You are viewing a plain text version of this content. The canonical link for it is here.
Posted to privacy-commits@apache.org by gr...@apache.org on 2021/07/05 19:39:23 UTC
[privacy-website] 18/48: Add responsive drop-down capable menu CSS,
tweak header elements
This is an automated email from the ASF dual-hosted git repository.
grobmeier pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/privacy-website.git
commit c17549783849603c4cd978a7b3e81dd20db4b2da
Author: Daniel Gruno <hu...@apache.org>
AuthorDate: Fri Mar 12 23:26:12 2021 +0100
Add responsive drop-down capable menu CSS, tweak header elements
---
_sass/main.scss | 121 ++++++++++++++++++++++++++++++++++++++++++++++++--------
1 file changed, 104 insertions(+), 17 deletions(-)
diff --git a/_sass/main.scss b/_sass/main.scss
index 5b04e41..928ecfa 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -20,7 +20,9 @@ under the License.
$font: Helvetica, Arial, sans-serif;
$color_asf: #282661;
$color_link: #4643aa;
-
+$color_dropdown: #EEE;
+$color_nav_item: #2f3036;
+$color_nav_hover: #1989c5;
html, body {
width: 100%;
@@ -38,15 +40,15 @@ body {
header {
display: grid;
grid-template-columns: 30% auto;
- border-top: 1em solid $color_asf;
- padding: 0.5em;
+ background: $color_nav_item;
+ padding: 0;
.header-logo {
display: flex;
}
- .header-logo svg {
- max-height: 100px;
+ .header-logo img {
+ max-height: 48px;
}
.header-text {
@@ -54,23 +56,108 @@ header {
align-items: center;
font-size: 24px;
font-family: $font;
+ color: $color_nav;
+ padding-left: 20px;
}
+ @media screen and (max-width : 810px){
+ grid-template-columns: auto;
+ .header-logo {
+ width: 100%;
+ display: block;
+ }
+ .header-text {
+ display: block;
+ }
+ .header-logo img {
+ display: none;
+ }
+ }
+
nav {
- display: flex;
- align-items: center;
ul {
- list-style-type: none;
- display: flex;
-
+ list-style-type:none;
+ margin:0;
+ padding:0;
+ position: absolute;
+ }
+ li {
+ display:inline-block;
+ float: left;
+ margin-right: 1px;
+ }
+ li a {
+ display:block;
+ min-width:140px;
+ height: 48px;
+ text-align: center;
+ line-height: 48px;
+ font-family: $font;
+ color: #fff;
+ background: $color_nav_item;
+ text-decoration: none;
+ }
+
+ li:hover a {
+ background: $color_nav_hover;
+ }
+
+ li:hover ul a {
+ background: $color_dropdown;
+ color: #color_asf;
+ height: 40px;
+ line-height: 40px;
+ }
+ li:hover ul a:hover {
+ background: $color_nav_hover;
+ color: #fff;
+ }
+ li ul {
+ display: none;
+ }
+ li ul li {
+ display: block;
+ float: none;
+ }
+ li ul li a {
+ width: auto;
+ min-width: 100px;
+ padding: 0 20px;
+ }
+ ul li a:hover + .hidden, .hidden:hover {
+ display: block;
+ }
+
+ .show-menu {
+ font-family: $font;
+ text-decoration: none;
+ color: #fff;
+ background: $color_nav_hover;
+ text-align: center;
+ padding: 10px 0;
+ display: none;
+ }
+ input[type=checkbox]{
+ display: none;
+ -webkit-appearance: none;
+ }
+ input[type=checkbox]:checked ~ #menu{
+ display: block;
+ }
+
+ @media screen and (max-width : 810px){
+ ul {
+ position: static;
+ display: none;
+ }
li {
- padding: 0 1.5em 0 1.5em;
- border-right: 1px $color_asf solid;
- a {
- font-family: $font;
- text-decoration: none;
- color: $color_link;
- }
+ margin-bottom: 1px;
+ }
+ ul li, li a {
+ width: 100%;
+ }
+ .show-menu {
+ display:block;
}
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: privacy-commits-unsubscribe@apache.org
For additional commands, e-mail: privacy-commits-help@apache.org