From 32ee2de00861edbe442da7a479745139c9f1775b Mon Sep 17 00:00:00 2001 From: April Eaton Date: Sun, 14 Dec 2025 21:28:50 +0100 Subject: [PATCH 1/4] Header --- global/global.css | 9 +++++++++ header/header.css | 42 ++++++++++++++++++++++++++++++++++++++++++ header/header.html | 15 +++++++++++++++ index.html | 13 +++++++++++-- index.js | 4 ++++ 5 files changed, 81 insertions(+), 2 deletions(-) diff --git a/global/global.css b/global/global.css index 85a1601..c900fc9 100644 --- a/global/global.css +++ b/global/global.css @@ -1 +1,10 @@ /* Global CSS options */ + +body { + font-family: "Truculenta", sans-serif; + font-optical-sizing: auto; + font-weight: 500; + font-style: normal; + font-variation-settings: "wdth" 100; + font-size: 16pt; +} diff --git a/header/header.css b/header/header.css index ff722bc..1f2f339 100644 --- a/header/header.css +++ b/header/header.css @@ -1 +1,43 @@ /* Header CSS */ +header { + font-family: "Roboto Mono", monospace; + font-optical-sizing: auto; + font-weight: 600; + font-style: normal; + font-size: 14pt; + + height: 1.5rem; + width: calc(100% - 1.5rem); + + margin-bottom: 0.25rem; + padding: 0.5rem; + border-width: 3px; + border-style: solid; + + position: sticky; + top: 0; + + display: flex; + + #hd-left { + width: min-width; + padding-left: 0.25rem; + padding-right: 0.25rem; + font-style: italic; + } + + #hd-mid { + width: 100%; + } + + #hd-right { + width: min-width; + padding-left: 0.25rem; + padding-right: 0.25rem; + } + + .spacer { + width: 2rem; + display: block; + } +} diff --git a/header/header.html b/header/header.html index 9f531db..c1ff57c 100644 --- a/header/header.html +++ b/header/header.html @@ -1 +1,16 @@ + +
nekoapril.blog
+
+
+ Home + + Kinks + + Gear +
diff --git a/index.html b/index.html index 8e5b19c..a7ebffc 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,19 @@ Kinklist + + + + - + + - + +
Look ma, I'm horny! diff --git a/index.js b/index.js index 2d9ed3a..d098bfc 100644 --- a/index.js +++ b/index.js @@ -1 +1,5 @@ // Landing page JS +function loadDependencies() { + loadHTML("hd-box", "/header/header.html"); + loadHTML("footer", "/footer/footer.html"); +} From 0abf209616b5de090ea53859faaf38114d80ddf5 Mon Sep 17 00:00:00 2001 From: April Eaton Date: Mon, 15 Dec 2025 18:27:19 +0100 Subject: [PATCH 2/4] Better devex Using ES6 modueles and adding a JS LSP to `flake.nix` --- flake.nix | 2 ++ gear/index.html | 20 +++++++++++--------- gear/page.mjs | 9 +++++++++ global/loadin.mjs | 8 ++++++++ index.html | 6 +++--- index.mjs | 8 ++++++++ kinks/kinks.mjs | 1 + 7 files changed, 42 insertions(+), 12 deletions(-) create mode 100644 gear/page.mjs create mode 100644 global/loadin.mjs create mode 100644 index.mjs create mode 100644 kinks/kinks.mjs diff --git a/flake.nix b/flake.nix index 1d4e865..6f5fdca 100644 --- a/flake.nix +++ b/flake.nix @@ -35,6 +35,8 @@ http-server prettier vscode-langservers-extracted + typescript-language-server + typescript ]; }; }; diff --git a/gear/index.html b/gear/index.html index 5b5f35d..78eb770 100644 --- a/gear/index.html +++ b/gear/index.html @@ -7,17 +7,19 @@ - - + + + + + + - +
This will be my gear +
diff --git a/gear/page.mjs b/gear/page.mjs new file mode 100644 index 0000000..8ea2f57 --- /dev/null +++ b/gear/page.mjs @@ -0,0 +1,9 @@ +import { attachGearList } from "/gear/gear.mjs"; +import { loadHTML } from "/global/loadin.mjs"; + +export function loadDependencies() { + loadHTML("hd-box", "/header/header.html"); + attachGearList("gl-body"); +} + +loadDependencies(); diff --git a/global/loadin.mjs b/global/loadin.mjs new file mode 100644 index 0000000..9b30f3a --- /dev/null +++ b/global/loadin.mjs @@ -0,0 +1,8 @@ +export function loadHTML(elementId, url) { + fetch(url) + .then((response) => response.text()) + .then((data) => { + document.getElementById(elementId).innerHTML = data; + }) + .catch((error) => console.error("Error loading HTML:", error)); +} diff --git a/index.html b/index.html index a7ebffc..fd449cc 100644 --- a/index.html +++ b/index.html @@ -14,11 +14,11 @@ /> - - + + - + diff --git a/header/header.css b/header/header.css index 1f2f339..923edf7 100644 --- a/header/header.css +++ b/header/header.css @@ -31,7 +31,8 @@ header { } #hd-right { - width: min-width; + display: flex; + width: fit-content; padding-left: 0.25rem; padding-right: 0.25rem; }