diff --git a/package.json b/package.json index fd126ed..5cdf27b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@fwdekker/template", - "version": "2.0.1", + "version": "2.1.0", "description": "The base template for pages on fwdekker.com.", "author": "Felix W. Dekker", "license": "MIT", diff --git a/src/main/css/snippets/nav.css b/src/main/css/snippets/nav.css index 32c445a..278cf64 100644 --- a/src/main/css/snippets/nav.css +++ b/src/main/css/snippets/nav.css @@ -1,3 +1,4 @@ +/* Base elements */ nav { margin: 0; width: 100%; @@ -13,16 +14,23 @@ nav * { vertical-align: middle; } -nav a, nav a:link, nav a:visited, nav a:hover, nav a:active { +nav a, nav a:link, nav a:visited, nav a:hover, nav a:active, nav #nav-hamburger-label { display: inline-block; margin: 0; padding: calc(var(--padding)) calc(var(--padding)); - width: 100%; + height: 100%; color: white; } +nav #nav-hamburger-label { + float: right; + font-size: unset; + cursor: pointer; +} + +/* Logo */ nav .logo { width: calc(1em + var(--padding)); height: calc(1em + var(--padding)); @@ -30,12 +38,14 @@ nav .logo { vertical-align: middle; filter: brightness(0) invert(1); } + nav div.logo { display: inline-block; margin-right: calc(1em / 3); } +/* First level nesting */ nav ul { margin: 0; padding: 0; @@ -53,7 +63,9 @@ nav ul li { } nav ul li:hover, -nav ul li:focus-within { +nav ul li:focus-within, +nav #nav-hamburger-label:hover, +nav #nav-hamburger-label:focus-within { cursor: pointer; background-color: var(--fwdekker-theme-color-very-dark); } @@ -63,6 +75,7 @@ nav li.currentPage { } +/* Second level nesting */ nav ul li ul { display: none; position: absolute; @@ -85,3 +98,21 @@ nav ul li ul li { width: 100%; white-space: nowrap; } + + +/* Hide hamburger-related elements */ +nav input[type="checkbox"] { + display: none; +} + +@media (min-width: 600px) { + nav #nav-hamburger-label { + display: none; + } +} + +@media (max-width: 600px) { + nav input[type="checkbox"]:not(:checked) ~ ul li:not(:first-child) { + display: none; + } +} diff --git a/src/main/js/main.js b/src/main/js/main.js index fb50da8..33a9ee1 100644 --- a/src/main/js/main.js +++ b/src/main/js/main.js @@ -68,7 +68,13 @@ const nav = function(highlightPath = "") { return []; }); - const nav = stringToHtml(``, "nav"); + const nav = stringToHtml( + ``, + "nav" + ); nav.appendChild(base); return nav; };