On Mon, Jan 02, 2012 at 01:53:46PM +0100, Francesca Ciceri wrote: > As MJ Ray pointed out, also on my Samsung Galaxy search box and download > box overlap the logos but apart from that the page looks a big > improvement. > IMHO we could create a mobile.css in which remove the left and right > margins from the content (which on a smartphone sounds like a waste of > space). > I also think that for the mobile version of the homepage we'd need to > remove some of the current content: as the space is less (and the screen > is smaller) we need to list only the essential parts of the page. > For example, I'd cut off the spacefun banner. > But we need to identify the essential parts (what the user is searching > on our website while browsing it with a smartphone?). > > What do you think about it? 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. On such devices (or when you just shrink your browser window), the download button becomes a separate item above the spacefun banner, the padding around the content is removed and the search box is reduced a bit. I had also to move the spacefun background from the #content div to the #splash one in order to make the download button independent. The change is active for wide browsers too, but there is no visual difference. I hope this is useful.
commit 4b14fda966d41b06b596bede313b53c27688bf16
Author: Damyan Ivanov <dmn@debian.org>
Commit: Damyan Ivanov <dmn@debian.org>
mobile-optimized styles - no content padding, separate download button
diff --git a/english/debhome.css b/english/debhome.css
index 558c391..8d96c9f 100644
--- a/english/debhome.css
+++ b/english/debhome.css
@@ -22,6 +22,9 @@
@import url("debian.css");
#splash {
+ background-image: url('Pics/spacefun-bg.png');
+ background-position:top center;
+ background-repeat: repeat-x;
margin-top: 0;
margin-bottom: 1.5em;
text-align: center;
@@ -78,11 +81,6 @@ span.download a:hover em {
color: white;
background-color: #339900;
}
-#content {
- background-image: url('Pics/spacefun-bg.png');
- background-position:top center;
- background-repeat: repeat-x;
-}
#announce {
text-align: center;
float: left;
@@ -206,3 +204,26 @@ div.trans-note {
div.trans-note p {
margin:0;
}
+
+@media screen and (max-width: 50em) {
+#content {
+ margin: 0;
+}
+input[name="P"] {
+ width: 10em;
+}
+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;
+}
+}
Attachment:
signature.asc
Description: Digital signature