debian.org and small screens

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 */



Kind Regards
Kao
https://wiki.debian.org/kao