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

Harry van Haaren harry.van.haaren at intel.com
Thu Jan 28 14:24:48 CET 2016


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

Signed-off-by: Harry van Haaren <harry.van.haaren at 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



More information about the web mailing list