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
