From: Thomas Monjalon <thomas.monjalon@6wind.com>
To: web@dpdk.org
Subject: [dpdk-web] [PATCH] make menu adaptative for small screens
Date: Thu, 30 Mar 2017 04:22:08 +0200 [thread overview]
Message-ID: <1490840528-13930-1-git-send-email-thomas.monjalon@6wind.com> (raw)
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
next reply other threads:[~2017-03-30 2:22 UTC|newest]
Thread overview: 3+ messages / expand[flat|nested] mbox.gz Atom feed top
2017-03-30 2:22 Thomas Monjalon [this message]
2017-03-30 15:28 ` Van Haaren, Harry
2017-03-30 16:00 ` Thomas Monjalon
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=1490840528-13930-1-git-send-email-thomas.monjalon@6wind.com \
--to=thomas.monjalon@6wind.com \
--cc=web@dpdk.org \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
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).