* [dpdk-web] [PATCH] make menu adaptative for small screens
@ 2017-03-30 2:22 Thomas Monjalon
2017-03-30 15:28 ` Van Haaren, Harry
0 siblings, 1 reply; 3+ messages in thread
From: Thomas Monjalon @ 2017-03-30 2:22 UTC (permalink / raw)
To: web
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@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;
+}
+@media (min-width: 700px) {
+ header nav li a {
+ font-size: 0.9em;
+ }
+}
+@media (min-width: 1000px) {
+ header nav li a {
+ padding: 0.8em 1.5em;
+ font-size: 1em;
+ }
+}
+@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
^ permalink raw reply [flat|nested] 3+ messages in thread
* Re: [dpdk-web] [PATCH] make menu adaptative for small screens
2017-03-30 2:22 [dpdk-web] [PATCH] make menu adaptative for small screens Thomas Monjalon
@ 2017-03-30 15:28 ` Van Haaren, Harry
2017-03-30 16:00 ` Thomas Monjalon
0 siblings, 1 reply; 3+ messages in thread
From: Van Haaren, Harry @ 2017-03-30 15:28 UTC (permalink / raw)
To: Thomas Monjalon, web
> From: web [mailto:web-bounces@dpdk.org] On Behalf Of Thomas Monjalon
> Sent: Thursday, March 30, 2017 3:22 AM
> To: web@dpdk.org
> Subject: [dpdk-web] [PATCH] make menu adaptative for small screens
>
> 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@6wind.com>
Tested on desktop browser and emulated smaller devices to try the @media rules.
Acked-by: Harry van Haaren <harry.van.haaren@intel.com>
^ permalink raw reply [flat|nested] 3+ messages in thread
* Re: [dpdk-web] [PATCH] make menu adaptative for small screens
2017-03-30 15:28 ` Van Haaren, Harry
@ 2017-03-30 16:00 ` Thomas Monjalon
0 siblings, 0 replies; 3+ messages in thread
From: Thomas Monjalon @ 2017-03-30 16:00 UTC (permalink / raw)
To: Van Haaren, Harry; +Cc: web
> > 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@6wind.com>
>
> Tested on desktop browser and emulated smaller devices to try the @media rules.
>
> Acked-by: Harry van Haaren <harry.van.haaren@intel.com>
Applied
^ permalink raw reply [flat|nested] 3+ messages in thread
end of thread, other threads:[~2017-03-30 16:00 UTC | newest]
Thread overview: 3+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2017-03-30 2:22 [dpdk-web] [PATCH] make menu adaptative for small screens Thomas Monjalon
2017-03-30 15:28 ` Van Haaren, Harry
2017-03-30 16:00 ` Thomas Monjalon
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for NNTP newsgroup(s).