[dpdk-web] [PATCH] make menu adaptative for small screens

[Thomas Monjalon]

The CSS layout for the navigation bar is designed for mobile first.
Some media queries are used to increase the size of spacing and font
for bigger screens.

If the bar must be displayed on two rows, the background is fixed
by using a max-height with hidden overflow.

The hover effect is disabled for handhelds.

Signed-off-by: Thomas Monjalon <thomas.monjalon at 6wind.com>
---
 layout.css | 54 +++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 35 insertions(+), 19 deletions(-)

diff --git a/layout.css b/layout.css
index 99f37f5..d881fd6 100644
--- a/layout.css
+++ b/layout.css
@@ -26,7 +26,8 @@ header h1 a:hover {
 header nav {
 	border-radius: 0.4em 0.4em 0 0;
 	background-color: #00233b;
-	height: 2.6em;
+	max-height: 4em;
+	overflow: hidden;
 	box-shadow: 0.2em 0.2em 0.7em black;
 }
 header nav ul {
@@ -37,32 +38,47 @@ header nav li {
 }
 header nav li a {
 	display: inline-block;
-	padding: 0.8em 1.5em;
-	font: normal 1em/1 'exo2', sans-serif;
+	padding: 0.8em 0.7em;
+	font: normal 0.7em/1 'exo2', sans-serif;
 	font-size-adjust: 0.50;
 	color: #ccc;
-	-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.4em 0 0 0;
 }
 header nav li a#current {
 	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: #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;
+header nav li:first-child a {
+	border-radius: 0.4em 0 0 0;
+}
+ at media (min-width: 700px) {
+	header nav li a {
+		font-size: 0.9em;
+	}
+}
+ at media (min-width: 1000px) {
+	header nav li a {
+		padding: 0.8em 1.5em;
+		font-size: 1em;
+	}
+}
+ at media only screen {
+	header nav li a {
+		-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 a#current:hover,
+	header nav li a:hover {
+		color: #fff;
+		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 {
-- 
2.7.0