Add navigation template

This commit is contained in:
Florine W. Dekker 2020-05-03 18:02:48 +02:00
parent a183e8cbd3
commit 6275618cee
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
4 changed files with 111 additions and 4 deletions

BIN
package-lock.json generated

Binary file not shown.

View File

@ -1,14 +1,13 @@
:root {
--fwdekker-theme-color: #0033cc;
--fwdekker-theme-color-dark: #00279d;
}
html {
html, body {
height: 100%;
}
body {
position: relative;
#contents {
padding-top: 5rem;
padding-bottom: 9rem; /* Vertical footer paddings + 1 */
min-height: 100%;

View File

@ -0,0 +1,70 @@
.nav {
margin: 0;
width: 100%;
background-color: var(--fwdekker-theme-color);
font-size: 120%;
--padding: calc(2em / 3);
}
.nav * {
z-index: 10;
}
.nav a {
display: inline-block;
margin: 0;
padding: calc(var(--padding)) calc(var(--padding));
width: 100%;
vertical-align: middle;
color: white;
}
.nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
display: inline-block;
margin: 0;
padding: 0;
position: relative;
background-color: var(--fwdekker-theme-color);
}
.nav li:hover,
.nav li:focus-within {
cursor: pointer;
background-color: var(--fwdekker-theme-color-dark);
}
.nav img.logo {
margin-right: calc(1em / 3);
height: calc(1em + var(--padding));
vertical-align: middle;
filter: brightness(0) invert(1);
}
.nav ul li ul {
display: none;
position: absolute;
left: 0;
}
.nav ul li:hover > ul,
.nav ul li:focus-within > ul,
.nav ul li ul:hover {
display: block;
}
.nav ul li ul li {
width: 100%;
}

View File

@ -2,6 +2,7 @@ import h from "hyperscript";
import "normalize.css/normalize.css";
import "milligram/dist/milligram.css";
import "../css/common.css";
import "../css/nav.css";
/**
@ -30,6 +31,43 @@ export const doAfterLoad = function (fun) {
};
/**
* Creates a navigation element for navigating through the website.
*
* @returns {HTMLElement} a navigation element
*/
export const nav = function () {
return h("nav.nav",
h("ul",
h("li", h("a", {href: "https://fwdekker.com/"},
h("img.logo", {src: "https://fwdekker.com/favicon.png"}),
h("b", "FWDekker")
)),
h("li", h("a", {href: "#", innerHTML: "Tools ▾"}),
h("ul",
h("li",
h("a", "Converter", {href: "https://fwdekker.com/tools/converter/"})
),
h("li",
h("a", "Dice", {href: "https://fwdekker.com/tools/dice/"})
),
h("li",
h("a", "Doomsday", {href: "https://fwdekker.com/tools/doomsday/"})
),
h("li",
h("a", "Interlanguage Checker", {href: "https://fwdekker.com/tools/interlanguage-checker/"})
),
h("li",
h("a", "Random FO76", {href: "https://fwdekker.com/tools/random-fo76/"})
),
)
),
h("li", h("a", "Gitea", {href: "https://git.fwdekker.com/"})),
h("li", h("a", "Blog", {href: "https://blog.fwdekker.com/"}))
)
);
};
/**
* Creates a header element with the given title and description.
*