[dpdk-web] [PATCH] update css colours and shadows
Thomas Monjalon
thomas.monjalon at 6wind.com
Fri Feb 12 16:46:56 CET 2016
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?
More information about the web
mailing list