From a466f90a7495907c4bd117ae44d475ac5988b549 Mon Sep 17 00:00:00 2001 From: Henk Verlinde Date: Thu, 16 Apr 2020 11:41:54 +0200 Subject: [PATCH] Update mobile menu --- assets/scss/common/_dark.scss | 9 ++++ assets/scss/layouts/_header.scss | 73 +++++++++++++++++++++++++++++ layouts/index.headers | 2 +- layouts/partials/header/header.html | 19 ++++++-- 4 files changed, 97 insertions(+), 6 deletions(-) diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss index e629692..4642ce6 100644 --- a/assets/scss/common/_dark.scss +++ b/assets/scss/common/_dark.scss @@ -194,3 +194,12 @@ body.dark .card { body.dark .card.bg-light { background: $body-overlay-dark !important; } + +body.dark .navbar .menu-icon .navicon { + background: $navbar-dark-color; +} + +body.dark .navbar .menu-icon .navicon:before, +body.dark .navbar .menu-icon .navicon:after { + background: $navbar-dark-color; +} diff --git a/assets/scss/layouts/_header.scss b/assets/scss/layouts/_header.scss index 0843c1d..35d96b0 100644 --- a/assets/scss/layouts/_header.scss +++ b/assets/scss/layouts/_header.scss @@ -108,3 +108,76 @@ background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } + +/* + * Source: https://medium.com/creative-technology-concepts-code/responsive-mobile-dropdown-navigation-using-css-only-7218e4498a99 +*/ + + +/* Style the menu icon for the dropdown */ + +.navbar .menu-icon { + cursor: pointer; + /* display: inline-block; */ + /* float: right; */ + padding: 1.125rem 0.625rem; + margin: 0 0 0 -0.625rem; + /* position: relative; */ + user-select: none; +} + +.navbar .menu-icon .navicon { + background: $navbar-light-color; + display: block; + height: 2px; + position: relative; + transition: background .2s ease-out; + width: 18px; +} + +.navbar .menu-icon .navicon:before, +.navbar .menu-icon .navicon:after { + background: $navbar-light-color; + content: ''; + display: block; + height: 100%; + position: absolute; + transition: all .2s ease-out; + width: 100%; +} + +.navbar .menu-icon .navicon:before { + top: 5px; +} + +.navbar .menu-icon .navicon:after { + top: -5px; +} + +/* Add the icon and menu animations when the checkbox is clicked */ + +.navbar .menu-btn { + display: none; +} + +.navbar .menu-btn:checked ~ .navbar-collapse { + display: block; + max-height: 100vh; +} + +.navbar .menu-btn:checked ~ .menu-icon .navicon { + background: transparent; +} + +.navbar .menu-btn:checked ~ .menu-icon .navicon:before { + transform: rotate(-45deg); +} + +.navbar .menu-btn:checked ~ .menu-icon .navicon:after { + transform: rotate(45deg); +} + +.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, +.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { + top: 0; +} diff --git a/layouts/index.headers b/layouts/index.headers index 641a486..385e241 100644 --- a/layouts/index.headers +++ b/layouts/index.headers @@ -2,7 +2,7 @@ Strict-Transport-Security: max-age=31536000; includeSubDomains; preload X-Content-Type-Options: nosniff X-XSS-Protection: 1; mode=block - Content-Security-Policy: default-src 'self'; img-src 'self' data:; script-src 'self' 'unsafe-eval'; style-src 'self' + Content-Security-Policy: default-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self' X-Frame-Options: SAMEORIGIN Referrer-Policy: strict-origin Feature-Policy: geolocation 'self' diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html index 0fa4910..c23e750 100644 --- a/layouts/partials/header/header.html +++ b/layouts/partials/header/header.html @@ -1,6 +1,10 @@ -
+
+ + + + {{ .Site.Params.Title }}