Re: urgent: help us fix the background for website banner for Stretch

Aurélien COUDERC <[email protected]> Sun, 18 Jun 2017 21:45:13 +0200

Newsgroups	gmane.linux.debian.devel.www
Message-ID	<[email protected]>

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

debhome-softwaves-patch1.diff (text/x-patch, 1.8 KB)

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 (application/pgp-signature, 858 B)