Hi Laura, KiBi. Le 17/06/2017 à 20:33, Cyril Brulebois a écrit : > Hi, > > And thanks for your work on this. Please pretend I don't know anything > about web, standards, and best practices. I’ll call this inspiring, so please pretend I don’t know anything about web, standards, and best practices. :-)
You’ll find a patch with additional improvements in attachment : - Fix height of logo background that was otherwise broken on smaller screens. - Use a color from the theme for the download link box instead of the green. - Round me these corners, how cute ! - Increase the screen size limit where the download link becomes a bar above logo, to avoid bumping into the « Debian, universal blah » text. I’d still like to improve what’s displayed on smaller screen, we still get half of the debian logo and half of the moto. Couldn’t find a easy way to do that, if anyone here knows better. Maybe an additional image for smaller screen sizes with only the logo and waves, without the debian-universal text would make it OK for all sizes. With the above disclaimer, please do test the patch before committing. :-) Cheers, --Aurélien
diff --git a/debhome.css b/debhome.css index f185163..af7be7f 100644 --- a/debhome.css +++ b/debhome.css @@ -27,7 +27,7 @@ background-image: url('Pics/softwaves_web_bg.png'); background-position:top center; background-repeat: no-repeat; - background-size: 100%; + background-size: 100% 100%; margin-top: 0; margin-bottom: 1.5em; text-align: center; @@ -51,30 +51,31 @@ span.download { right: 13px; font-size: 0.75em; line-height: 2; - background-color: white; margin-top: 10px; } span.download a { color: white; font-weight: bold; text-decoration: none; - border: 0.15em solid #339900; + border: 0.15em solid #2f5567; /* softWaves color */ display: block; background: transparent url('Pics/emblem-downloads.png') no-repeat 5px 5px; padding-left: 30px; padding-right: 1em; - color:#339900; + color:#2f5567; /* softWaves color */ + border-radius: 4px; + background-color: white; } span.download a:hover { text-decoration: none; color: white; - background-color: #339900; + background-color: #2f5567; /* softWaves color */ } span.download a em { font-size: 0.75em; font-weight: normal; clear: right; - color: #339900; + color: #2f5567; /* softWaves color */ line-height: 0.5em; font-style: normal; display: block; @@ -82,7 +83,7 @@ span.download a em { } span.download a:hover em { color: white; - background-color: #339900; + background-color: #2f5567; /* softWaves color */ } #announce { text-align: center; @@ -198,7 +199,7 @@ li.frontbutton { * For small screens */ -@media only screen and (max-width: 38em) { +@media only screen and (max-width: 60em) { div#content { background-image: none; } @@ -210,4 +211,8 @@ li.frontbutton { right: 0; margin: 0; } + + span.download a { + border-radius: 0; + } }
signature.asc
Description: OpenPGP digital signature