Browse Source

Add navigation template

master v0.0.8
F.W. Dekker 1 year ago
parent
commit
6275618cee
Signed by: FWDekker GPG Key ID: B1B567AF58D6EE0F
  1. 13
      package-lock.json
  2. 7
      src/main/css/common.css
  3. 70
      src/main/css/nav.css
  4. 38
      src/main/js/Template.js

13
package-lock.json

@ -1744,8 +1744,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
@ -2162,8 +2161,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
@ -2219,7 +2217,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -2263,14 +2260,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},

7
src/main/css/common.css

@ -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%;

70
src/main/css/nav.css

@ -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%;
}

38
src/main/js/Template.js

@ -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.
*

Loading…
Cancel
Save