From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from mail-wr0-f181.google.com (mail-wr0-f181.google.com [209.85.128.181]) by dpdk.org (Postfix) with ESMTP id 295C010B8A for ; Thu, 30 Mar 2017 04:22:23 +0200 (CEST) Received: by mail-wr0-f181.google.com with SMTP id l43so40773890wre.1 for ; Wed, 29 Mar 2017 19:22:23 -0700 (PDT) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=6wind-com.20150623.gappssmtp.com; s=20150623; h=from:to:subject:date:message-id; bh=eAC+uGsqCawt4LNe+rP7p3wSqlKvNtu+PK2K/yViMx0=; b=NuO8/PoEke3BRy6CJe/n09dObV38Ahv/zTr/7dtHCFnScmRP4Ffj0VEnwTM01Edn8O Q4XErcKqhH+ugAdRNr7KVfQSDBCyNB2EHjA1L7gw5QtxoSpFO7th/kwOtcDiTwN0u9mI P5IJdsFWXG9nFHuGm/aXbR60Jiq1NuG/QEqrUkNLKduDCtFyIknCTENOgABCsFArQXSX 08YlJhLDLs5LlsJ3iJYW2see2O1I5f5O0xq1+yKU3xuPEt7C8S11ZxKRMoLXacmqX5Ub YD4yLwNTq5t0nnufmyyjXOGd8q0t/yiVxsyeVpQ14m8oZZlw/SOd2Laqm2c4dZ1P0Y3u brqQ== X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=1e100.net; s=20161025; h=x-gm-message-state:from:to:subject:date:message-id; bh=eAC+uGsqCawt4LNe+rP7p3wSqlKvNtu+PK2K/yViMx0=; b=p3oueosfwNyVobVIg+SnET9qKPIpml4CyVXxdkn55OAF8mZiDK3Euty8g2icRwjkh4 sSSfX01Vxd8kXs8P/qhguxIlLi3wqYeEMgT4Fd3MlfRcqOnEbuRbJs4NnjcKP8Y73EMG p1hzQQ7fKWwv/BRsP4oeNrpJs4WklBNR4lER7ODlpBXizH/uOJGC16nmT+x4voVJ9OaH NutMAQfbet4U/BQBeMfExn29ujvOCVPSYORXhOeZxDJrHcKGnnNGKvLqXVBukPx7sYls 2qQ466EP9fv8DtYd+09FB+Q36oxMiXBGwOC1EH3JttsmjSaaJ6JYp0OC5pMz5Cc2mFj/ zATw== X-Gm-Message-State: AFeK/H3LzT/2DnQOrB9HQaeOwcxS0lhMXrW+RlehCeYA9EO1UkG13QQdTUPQgSe3dvRZztWc X-Received: by 10.28.128.147 with SMTP id b141mr1062134wmd.45.1490840542599; Wed, 29 Mar 2017 19:22:22 -0700 (PDT) Received: from XPS13.localdomain (184.203.134.77.rev.sfr.net. [77.134.203.184]) by smtp.gmail.com with ESMTPSA id 127sm1296731wmt.20.2017.03.29.19.22.21 for (version=TLS1_2 cipher=ECDHE-RSA-AES128-SHA bits=128/128); Wed, 29 Mar 2017 19:22:21 -0700 (PDT) From: Thomas Monjalon To: web@dpdk.org Date: Thu, 30 Mar 2017 04:22:08 +0200 Message-Id: <1490840528-13930-1-git-send-email-thomas.monjalon@6wind.com> X-Mailer: git-send-email 2.7.0 Subject: [dpdk-web] [PATCH] make menu adaptative for small screens X-BeenThere: web@dpdk.org X-Mailman-Version: 2.1.15 Precedence: list List-Id: DPDK website maintenance List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Thu, 30 Mar 2017 02:22:23 -0000 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 --- 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