On 20:06 Tue 10 Jan, Francesca Ciceri wrote: > On Mon, Jan 09, 2012 at 08:36:48PM +0200, Damyan Ivanov wrote: > > -=| Damyan Ivanov, 08.01.2012 21:45:30 +0200 |=- > > > Attached is a patch which changes some CSS parameters when the page > > > is displayed on a "small" device. The definition of "small" is > > > somewhat arbitrary taken to mean a device, whise horizontal size is > > > no more tham 50em. > > > > The home page can be seen in action with the patch applied at > > http://people.debian.org/~dmn/www.d.o/index.en.html > > Hi Damyan, > thanks for working on this one! > > Your patch is perfect: getting of rid of the overlapping of the Download > and the Search thingies and provide a little more space for text. > On my Samsung Galaxy in landscape mode the page is definitely good, less > on portrait mode but still acceptable. > I'm not completely sure on not enlarge also the footer to use all the > available width, and probably we could drop some links from the "hometoc" > but these are details. > IMHO you can already apply this patch and close the BR :) > > Cheers, > Francesca Hi folks, It seems I'm a bit late with this one as the bug has been marked as done. Anyway based on Damyans width idea I created a rather more complicated patch that makes the site more suitable for smaller devices. Screenshots: <http://kalleswork.net/projects/debian/git/2012-01-11-234506_401x653_scrot.png> <http://kalleswork.net/projects/debian/git/2012-01-11-234554_401x653_scrot.png> The patches shuffles the navbar around and makes it work better for multiple lines it also reduces margins and makes the sidebar workable for tiny screens. I made it today so have only done limited testing but seems to work in all my browsers. Please find attached patch. Any good? ps. Long time no mail :) -- Kalle Söderman http://www.kalleswork.net pgp 6D87C839 On 20:06 Tue 10 Jan, Francesca Ciceri wrote:
diff --git a/english/debhome.css b/english/debhome.css
index a90278b..892daaa 100644
--- a/english/debhome.css
+++ b/english/debhome.css
@@ -205,19 +205,34 @@ div.trans-note p {
margin:0;
}
-@media screen and (max-width: 50em) {
-span.download {
- left: 0;
- right: inherit;
- position: static;
- margin: 2px 0;
- display: inline-block;
- background: #339900;
-}
-span.download a, span.download a em {
- color: white;
-}
-#intro {
- clear: left;
-}
+/*
+ * For small screens
+ */
+
+@media only screen and (max-width: 36em) {
+
+ div#content {
+ background-image: none;
+ }
+
+ span.download {
+ display: block;
+ position: relative;
+ right: 0;
+ left: 0;
+ margin: 0;
+ }
+ div#splash {
+ height: auto;
+ margin: 0;
+ padding: 0;
+ }
+ div#splash h1 {
+ padding: 0;
+ background-image: none;
+ height: auto;
+ line-height: 0.83333;
+ margin: 0.83333em 0 0.83333em 0;
+ text-align: left;
+ }
}
diff --git a/english/debian.css b/english/debian.css
index 5206341..1b9979d 100644
--- a/english/debian.css
+++ b/english/debian.css
@@ -882,19 +882,99 @@ ul.nodecoration {
padding: 0;
}
-@media screen and (max-width: 50em) {
- #header {
- padding-right: 0;
- }
- input[name="P"] {
- width: 10em;
- }
- #content {
- margin: 0;
- }
- #footer {
- margin: 0;
- padding-left: 0;
- padding-right: 0;
- }
+/*
+ * For small screens
+ */
+
+@media only screen and (max-width: 36em) {
+
+ div#content {
+ margin: 0 10px 0 10px;
+ }
+ div#header {
+ margin: 0 10px 0 10px;
+ padding: 0;
+ }
+ div#logo {
+ position: relative;
+ top:0;
+ left: 0;
+ height: auto;
+ margin: 0;
+ padding: 0;
+ min-height: 0;
+ }
+ div#logo a {
+ height: auto;
+ height: 61px;
+ }
+ div#logo a img {
+ margin: 0;
+ padding: 0;
+ display: block;
+ }
+ #upperheader p.section {
+ left: 70px;
+ top: 0;
+ }
+ div#searchbox {
+ position: relative;
+ margin: -31px 0 0 60px;
+ float: right;
+ bottom: 0;
+ padding: 0;
+ }
+ div#navbar {
+ display: block;
+ position: relative;
+ clear: both;
+ }
+ #navbar ul {
+ min-height: 1.5em;
+ display: block;
+ }
+ #navbar li {
+ display: inline;
+ float: none;
+ margin: 0;
+ padding:0;
+ }
+ div#navbar a:link
+ , div#navbar a:visited {
+ display: inline;
+ margin: 0 1.5em 0 0;
+ padding:0.25em 0 0.25em 0;
+ border: 0;
+ background-color: transparent;
+ }
+ ul.toc {
+ max-width: none;
+ }
+ div#maincol {
+ margin-right: 0;
+ }
+ div.tip
+ , div.important
+ , div.warning
+ , div.note
+ , div.trans-note {
+ overflow: hidden;
+ }
+ div#second-nav {
+ margin-left: 1em;
+ width: auto;
+ }
+ div#footer {
+ margin-left: 10px;
+ }
+ div.trans-note {
+ position: relative;
+ top: 0;
+ right: 0;
+ left: 0;
+ margin: 0;
+ background-image: none;
+ padding: 0;
+ padding-left: 1em;
+ }
}
Attachment:
signature.asc
Description: Digital signature