Add navigation template
This commit is contained in:
parent
a183e8cbd3
commit
6275618cee
Binary file not shown.
|
@ -1,14 +1,13 @@
|
||||||
:root {
|
:root {
|
||||||
--fwdekker-theme-color: #0033cc;
|
--fwdekker-theme-color: #0033cc;
|
||||||
|
--fwdekker-theme-color-dark: #00279d;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
#contents {
|
||||||
position: relative;
|
|
||||||
|
|
||||||
padding-top: 5rem;
|
padding-top: 5rem;
|
||||||
padding-bottom: 9rem; /* Vertical footer paddings + 1 */
|
padding-bottom: 9rem; /* Vertical footer paddings + 1 */
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
|
|
|
@ -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%;
|
||||||
|
}
|
|
@ -2,6 +2,7 @@ import h from "hyperscript";
|
||||||
import "normalize.css/normalize.css";
|
import "normalize.css/normalize.css";
|
||||||
import "milligram/dist/milligram.css";
|
import "milligram/dist/milligram.css";
|
||||||
import "../css/common.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.
|
* Creates a header element with the given title and description.
|
||||||
*
|
*
|
||||||
|
|
Loading…
Reference in New Issue