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