parent
764348ad6d
commit
7b5590f9ea
|
@ -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",
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -68,7 +68,13 @@ const nav = function(highlightPath = "") {
|
|||
return [];
|
||||
});
|
||||
|
||||
const nav = stringToHtml(`<nav></nav>`, "nav");
|
||||
const nav = stringToHtml(
|
||||
`<nav>` +
|
||||
`<input id="nav-hamburger-checkbox" type="checkbox" hidden />` +
|
||||
`<label id="nav-hamburger-label" for="nav-hamburger-checkbox">☰</label>` +
|
||||
`</nav>`,
|
||||
"nav"
|
||||
);
|
||||
nav.appendChild(base);
|
||||
return nav;
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue