Hi,
I have noticed that the
debian.org website is not very relevant for the small screens.
I look at the css file, and it seems possible to get something better by using : @media screen and (max-width:600px) {}
I like the actual theme, I think that it need just small changes to handle better small screens.
For now , I have used the "stylish" extension to test small changes on the css file :
https://addons.mozilla.org/fr/firefox/addon/stylish/It’s working like a patch on the css file, but I can make an update of the actual css file and merge all the changes.
Let me know, if you want me to work on it, I will produce something more clean, and I will conduct more tests, on more web explorers.
For now the code, for the "stylish" extension, looks like this :
@namespace url(
http://www.w3.org/1999/xhtml);
@-moz-document domain("
debian.org") {
}
/*Some improvements*/
/*to avoid a collapse on the small screens */
ul#hometoc-cola, ul#hometoc-colb, ul#hometoc-colc, ul#hometoc-cold, ul#hometoc-cole {
padding: 10px;
}
/*Prepare the logo for the small screens section*/
#logo{
border: 1px solid transparent ;
margin-top: 2px;
}
#logo:hover {
border: 1px solid transparent ;
background: radial-gradient(white 3%, transparent);
margin-right: 0px;
margin-left: 0px;
}
div#searchbox input[name="P"] {
width: 150px;}
/*Wiki*/
/* to avoid a collapse with the wiki menu*/
ul.editbar {
position: inherit;
width :100%;
padding-top: 3px;
padding-bottom: 0px;
margin-bottom: 10px;
border-bottom-width: 1px;
border-style: solid;
border-color: #808080;
}
#wikisection {
margin-left: 5px;
}
pre, div.codearea {
border-radius: 5px;
}
/* Start of section for the screen with a width smaller than 600px*/
@media screen and (max-width:600px) {
/*shrink the logo */
div#logo img {
height: 30px;
width: 25px;
}
#logo:hover {
border: 1px solid transparent ;
border-top: 0;
background: radial-gradient(white 1%, transparent);
}
div#logo a {
height: 40px;
width:30px;
min-height: 40px;
margin-top: 5px;
margin-right: 0px;
}
div#logo a:hover {
height: 40px;
width:30px;
min-height: 40px;
margin-top: 5px;
margin-right: 0px;
}
#header {
margin: 0px;
padding: 0px 10px 0px 25px;
}
/* Search Box */
div#searchbox input[name="P"] {
width: 150px;
margin-left: 0px;
padding: 0px;
}
div#searchbox {
position: relative;
margin: -35px 0px 0px 0px;
float: middle;
bottom: 0px;
padding: 0px;
}
/* Navigation Bar */
#navbar ul {
padding-left: 2%;
padding-right: 2%;
}
#navbar li {
display: block;
list-style: outside none none;
border-top-width: 1px;
border-style: dotted;
border-color: #808080;
padding-left :1%;
}
/*To avoid the content to touch screen borders */
div#content {
padding-left: 2%;
padding-right: 2%;
}
/*wikipage*/
form#searchform{
margin: 30px 0px 0px 30px;
}
div#searchform input[name="action"] {
width: 100px;
}
/*wiki navigation bar */
ul#navibar {
margin-top: 65px;
padding: 10px;
}
li.wikilink {
display: block;
width:100%;
}
#navbar a:link {margin: 0px;
padding: 0px;
}
}
/* end of the small screens section */