From f5032974f1ecc733571709abebe37391671dcd43 Mon Sep 17 00:00:00 2001 From: southerntofu Date: Mon, 26 Aug 2019 22:46:53 +0200 Subject: [PATCH] :target based menu --- templates/web/assets/styles.css | 59 +++++++++++++-------------------- templates/web/head.partial.html | 24 ++++++-------- 2 files changed, 33 insertions(+), 50 deletions(-) diff --git a/templates/web/assets/styles.css b/templates/web/assets/styles.css index c7d26e0..b3dac29 100644 --- a/templates/web/assets/styles.css +++ b/templates/web/assets/styles.css @@ -90,23 +90,35 @@ h3 { max-width: 100%; } -#main-nav #toggle { +#main-nav .links { display: none; } -#main-nav #toggle:checked ~ section { +#main-nav:target .links { display: block; } -#main-nav #toggle:checked ~ label { +#main-nav:target .open { + display: none; +} + +#main-nav:target .close { + display: block; background-position: 0 -52px; } -#main-nav label { +#main-nav .open { + display: block; +} + +#main-nav .close { + display: none; +} + +#main-nav .menubutton { position: absolute; top: 0; left: 0; - display: block; cursor: pointer; line-height: 40px; background-image: url('/assets/nav-toggle.png'); @@ -119,10 +131,7 @@ h3 { z-index: 5; } -#main-nav section { - position: absolute; - top: 0; - left: 0; +#main-nav .links { width: 100vw; max-width: 100%; height: 100vh; @@ -135,36 +144,14 @@ h3 { background-color: #222; } -#main-nav section .link-grid { - display: grid; +#main-nav .links { padding-bottom: 55px; padding-top: 55px; max-height: 100%; - grid-template-columns: 1fr 0.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.5fr 1fr; - grid-template-rows: auto auto; - grid-template-areas: - ". . . nl nl nl nl nl nl . . ." } -#main-nav section .link-grid .links { - grid-area: nl; - padding-bottom: 55px; - height: 100%; -} - -#main-nav section header { - text-align: center; -} - -#main-nav section header img { - height: 22px; - padding-top: 17px; - margin-bottom: 50px; -} - -#main-nav section .link-grid .links a { +#main-nav .links a { display: block; - position: relative; line-height: 60px; text-decoration: none; font-weight: 500; @@ -175,11 +162,11 @@ h3 { font-family: "blankaregular"; } -#main-nav section .link-grid .links a:hover { +#main-nav .links a:hover { color: #222; } -#main-nav section .link-grid .links a::after { +#main-nav .links a::after { content: ''; display: block; position: absolute; @@ -193,7 +180,7 @@ h3 { z-index: -1; } -#main-nav section .link-grid .links a:hover::after { +#main-nav .links a:hover::after { transform: scaleX(1); } diff --git a/templates/web/head.partial.html b/templates/web/head.partial.html index e628297..5367251 100644 --- a/templates/web/head.partial.html +++ b/templates/web/head.partial.html @@ -12,20 +12,16 @@ -