[dpdk-web] [PATCH] update css colours and shadows

[dpdk-web] [PATCH] update css colours and shadows

[Harry van Haaren]

Change colours and shadows to align with DPDK logo,
rounded corners reduced, fade times shortend.

Signed-off-by: Harry van Haaren <harry.van.haaren@intel.com>
---
 content.css |  2 +-
 layout.css  | 37 +++++++++++++++++--------------------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/content.css b/content.css
index a7614af..5cf1ee4 100644
--- a/content.css
+++ b/content.css
@@ -49,7 +49,7 @@ section span.pre {
 }
 
 section a {
-	color: #942;
+	color: #2980b9;
 	font-weight: 600;
 }
 section a:hover {
diff --git a/layout.css b/layout.css
index 5a537c7..6a7f8b6 100644
--- a/layout.css
+++ b/layout.css
@@ -11,8 +11,9 @@ body {
 }
 
 header h1 {
-	margin: 0 auto 0.5em;
+	margin: 0 auto 1em;
 	padding: 0;
+	padding-top: 0.5em;
 	text-align: center;
 	font: italic bold 2em 'exo2',sans-serif;
 }
@@ -24,9 +25,8 @@ header h1 a:hover {
 }
 
 header nav {
-	box-shadow: 0 0 0.7em black;
-	border-radius: 0.5em 0.5em 0 0;
-	background-color: #333;
+	border-radius: 0.4em 0.4em 0 0;
+	background-color: #00233b;
 	height: 2.6em;
 }
 header nav ul {
@@ -40,35 +40,32 @@ header nav li a {
 	padding: 0.8em 1.5em;
 	font: normal 1em/1 'exo2',sans-serif;
 	color: #ccc;
-	-webkit-transition: background-color .3s linear;
-	-moz-transition: background-color .3s linear;
-	-o-transition: background-color .3s linear;
-	transition: background-color .3s linear;
+	-webkit-transition: background-color .1s linear;
+	-moz-transition: background-color .1s linear;
+	-o-transition: background-color .1s linear;
+	transition: background-color .1s linear;
 }
 header nav li:first-child a {
-	border-radius: 0.5em 0 0 0;
+	border-radius: 0.4em 0 0 0;
 }
 header nav li a#current {
-	color: #eee;
-	background-color: #544;
-	box-shadow: inset 0 -1em 1em #333;
+	color: #fff;
+	background-color: #782a90;
 }
 header nav li a#current:hover,
 header nav li a:hover {
 	color: #fff;
-	background-color: #844;
-	box-shadow: inset 0 -1em 2em #533;
-	-webkit-transition: background-color .2s linear;
-	-moz-transition: background-color .2s linear;
-	-o-transition: background-color .2s linear;
-	transition: background-color .2s linear;
+	background-color: #9b2490;
+	-webkit-transition: background-color .08s linear;
+	-moz-transition: background-color .08s linear;
+	-o-transition: background-color .08s linear;
+	transition: background-color .08s linear;
 }
 
 section {
 	clear: both;
 	background-color: #fff;
-	border-radius: 0 0 0.5em 0.5em;
-	box-shadow: 0 0 0.7em black;
+	box-shadow: 0 0 1em black;
 }
 
 section,
-- 
2.5.0

Re: [dpdk-web] [PATCH] update css colours and shadows

[Thomas Monjalon]

Hi Harry,

I agree the colours of the website may be improved :)
See my comments below, thanks.

2016-01-28 13:24, Harry van Haaren:
> Change colours and shadows to align with DPDK logo,
> rounded corners reduced, fade times shortend.

Colours debate... ;)

>  section a {
> -	color: #942;
> +	color: #2980b9;

I find it difficult to read.
May we keep a kind of red as the one in the logo?

>  header h1 {
> -	margin: 0 auto 0.5em;
> +	margin: 0 auto 1em;

I'm OK to give more space between the logo and the content,

>  	padding: 0;
> +	padding-top: 0.5em;

but not above the logo (which is just a waste IMHO).

>  header nav {
> -	box-shadow: 0 0 0.7em black;

Why removing the shadow for the menu?
I think it must be applied to the whole block (menu + content).
Or is it to avoid the blur effect and be in line with the net logo?
The more I look at it, the more I think it is acceptable.
It gives the impression of a light really coming from the top.

> -	border-radius: 0.5em 0.5em 0 0;
> -	background-color: #333;
> +	border-radius: 0.4em 0.4em 0 0;
> +	background-color: #00233b;

Yes good idea this color for the menu!
The smaller radius is less old-school?

>  header nav ul {
> @@ -40,35 +40,32 @@ header nav li a {
>  	padding: 0.8em 1.5em;
>  	font: normal 1em/1 'exo2',sans-serif;
>  	color: #ccc;
> -	-webkit-transition: background-color .3s linear;
> -	-moz-transition: background-color .3s linear;
> -	-o-transition: background-color .3s linear;
> -	transition: background-color .3s linear;
> +	-webkit-transition: background-color .1s linear;
> +	-moz-transition: background-color .1s linear;
> +	-o-transition: background-color .1s linear;
> +	transition: background-color .1s linear;
>  }

OK to be more reactive.

>  header nav li a#current {
> -	color: #eee;
> -	background-color: #544;
> -	box-shadow: inset 0 -1em 1em #333;

I really like this small light effect. Why removing?
The flat trend?

> +	color: #fff;

The idea was to keep extra-white for the hover effect.
However I'm OK with this change.

> +	background-color: #782a90;

Yes this purple is nice. (maybe less pinky?)

>  }
>  header nav li a#current:hover,
>  header nav li a:hover {
>  	color: #fff;
> -	background-color: #844;
> -	box-shadow: inset 0 -1em 2em #533;
> -	-webkit-transition: background-color .2s linear;
> -	-moz-transition: background-color .2s linear;
> -	-o-transition: background-color .2s linear;
> -	transition: background-color .2s linear;
> +	background-color: #9b2490;

But I don't like this hover color.
What about something like #728 ?

>  section {
>  	clear: both;
>  	background-color: #fff;
> -	border-radius: 0 0 0.5em 0.5em;

I think it's better to keep rounded corners at the bottom like above.

> -	box-shadow: 0 0 0.7em black;
> +	box-shadow: 0 0 1em black;

Why more shadow?

[dpdk-web] [PATCH v2] update css colours and shadows

[Harry van Haaren]

Change colours and shadows to align with DPDK logo,
rounded corners reduced, fade times shortend,
changed colour beside code snippet and event.

Signed-off-by: Harry van Haaren <harry.van.haaren@intel.com>
---

v2:
-Addressed suggestions from ML, shadows, colours of the main menu,
 lighting effects and border radius.

-Fixed <pre> and "<h2><em>" to suit colour scheme (see Event page)

 content.css |  6 +++---
 layout.css  | 41 +++++++++++++++++++++--------------------
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/content.css b/content.css
index a7614af..5d2fe64 100644
--- a/content.css
+++ b/content.css
@@ -10,7 +10,7 @@ section h2:first-child {
 	margin-top: 0;
 }
 section h2 em {
-	color: #942;
+	color: #782A90;
 	font-weight: inherit;
 	font-style: inherit;
 }
@@ -42,14 +42,14 @@ section#news li em:first-child {
 
 section pre {
 	padding-left: 1em;
-	border-left: solid 0.3em #942;
+	border-left: solid 0.3em #782A90;
 }
 section span.pre {
 	font: 1.2em monospace;
 }
 
 section a {
-	color: #942;
+	color: #EF4E22;
 	font-weight: 600;
 }
 section a:hover {
diff --git a/layout.css b/layout.css
index 5a537c7..c99b914 100644
--- a/layout.css
+++ b/layout.css
@@ -11,8 +11,9 @@ body {
 }
 
 header h1 {
-	margin: 0 auto 0.5em;
-	padding: 0;
+	margin: 0 auto 0.75em;
+	padding: -0.5em;
+	padding-top: 0.25em;
 	text-align: center;
 	font: italic bold 2em 'exo2',sans-serif;
 }
@@ -24,10 +25,10 @@ header h1 a:hover {
 }
 
 header nav {
-	box-shadow: 0 0 0.7em black;
-	border-radius: 0.5em 0.5em 0 0;
-	background-color: #333;
+	border-radius: 0.4em 0.4em 0 0;
+	background-color: #00233b;
 	height: 2.6em;
+	box-shadow: 0.2em 0.2em 0.7em black;
 }
 header nav ul {
 	list-style: none;
@@ -40,35 +41,35 @@ header nav li a {
 	padding: 0.8em 1.5em;
 	font: normal 1em/1 'exo2',sans-serif;
 	color: #ccc;
-	-webkit-transition: background-color .3s linear;
-	-moz-transition: background-color .3s linear;
-	-o-transition: background-color .3s linear;
-	transition: background-color .3s linear;
+	-webkit-transition: background-color .1s linear;
+	-moz-transition: background-color .1s linear;
+	-o-transition: background-color .1s linear;
+	transition: background-color .1s linear;
 }
 header nav li:first-child a {
-	border-radius: 0.5em 0 0 0;
+	border-radius: 0.4em 0 0 0;
 }
 header nav li a#current {
-	color: #eee;
-	background-color: #544;
-	box-shadow: inset 0 -1em 1em #333;
+	color: #fff;
+	background-color: #782a90;
+	box-shadow: inset 0 -1em 1em #580a70;
 }
 header nav li a#current:hover,
 header nav li a:hover {
 	color: #fff;
-	background-color: #844;
-	box-shadow: inset 0 -1em 2em #533;
-	-webkit-transition: background-color .2s linear;
-	-moz-transition: background-color .2s linear;
-	-o-transition: background-color .2s linear;
-	transition: background-color .2s linear;
+	background-color: #EF4E22;
+	box-shadow: inset 0 -1em 1em #CF2E02;
+	-webkit-transition: background-color .08s linear;
+	-moz-transition: background-color .08s linear;
+	-o-transition: background-color .08s linear;
+	transition: background-color .08s linear;
 }
 
 section {
 	clear: both;
 	background-color: #fff;
 	border-radius: 0 0 0.5em 0.5em;
-	box-shadow: 0 0 0.7em black;
+	box-shadow: 0.2em 0.2em 0.7em black;
 }
 
 section,
-- 
2.5.0

Re: [dpdk-web] [PATCH] update css colours and shadows

[Van Haaren, Harry]

> From: Thomas Monjalon [mailto:thomas.monjalon@6wind.com]
> Colours debate... ;)

The best bikeshed topic ever :D


Re: HyperLink Color
> May we keep a kind of red as the one in the logo?

Done, v2 uses #EF4E22 as in the logo


Re: Logo and padding
> I'm OK to give more space between the logo and the content,
> but not above the logo (which is just a waste IMHO).

Hmmm, to me it allows the logo to "breathe" in the space around it.
v2 compromises to have the space split between top and bottom of
the logo - see what you think.


Re: Shadows
> Why removing the shadow for the menu?

Re-worked to show only on the right hand side, not on the top.
See what you think. 


Re: Menu shadow / lighting
> I really like this small light effect. Why removing?
> The flat trend?

Re-added, fixed shadow colours to suit the new colours. 


Re: Nav Bar Colours
> But I don't like this hover color.

Hover is now orange instead of lighter purple.


> I think it's better to keep rounded corners at the bottom like above.

v2 leaves untouched.



Sent v2 patch just now, -Harry

Re: [dpdk-web] [PATCH v2] update css colours and shadows

[Thomas Monjalon]

Hi Harry,

I like the new CSS. I would like to apply it but there are 2 small nits
to confirm below.

2016-02-15 14:00, Harry van Haaren:
> Change colours and shadows to align with DPDK logo,
> rounded corners reduced, fade times shortend,
> changed colour beside code snippet and event.
> 
> Signed-off-by: Harry van Haaren <harry.van.haaren@intel.com>
[...]
>  header h1 {
> -	margin: 0 auto 0.5em;
> -	padding: 0;
> +	margin: 0 auto 0.75em;
> +	padding: -0.5em;
> +	padding-top: 0.25em;

Why the negative padding? It seems to have no effect.
May I remove it before applying?

Sometimes you use lowercase for colors and other times uppercase.
No problem to convert in lowercase before applying?

Re: [dpdk-web] [PATCH v2] update css colours and shadows

[Van Haaren, Harry]

> From: Thomas Monjalon [mailto:thomas.monjalon@6wind.com]
> Why the negative padding? It seems to have no effect.
> May I remove it before applying?

Yes

> Sometimes you use lowercase for colors and other times uppercase.
> No problem to convert in lowercase before applying?

Yes, and I'll keep consistency in mind for future patches.

Thanks!

Re: [dpdk-web] [PATCH v2] update css colours and shadows

[Thomas Monjalon]

2016-02-15 14:00, Harry van Haaren:
> Change colours and shadows to align with DPDK logo,
> rounded corners reduced, fade times shortend,
> changed colour beside code snippet and event.
> 
> Signed-off-by: Harry van Haaren <harry.van.haaren@intel.com>

New colours applied :)