[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?