From b61db223699c4f9bad4b7d7da6082f1029f68a7d Mon Sep 17 00:00:00 2001 From: April Eaton Date: Mon, 15 Dec 2025 18:54:19 +0100 Subject: [PATCH 1/2] Centering content in a column for better readability --- global/global.css | 14 ++++++++++++++ header/header.css | 1 + index.html | 2 +- 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/global/global.css b/global/global.css index c900fc9..bcc56bc 100644 --- a/global/global.css +++ b/global/global.css @@ -7,4 +7,18 @@ body { font-style: normal; font-variation-settings: "wdth" 100; font-size: 16pt; + margin: 0; + min-height: 100svh; + display: flex; + flex-direction: column; + align-items: center; +} + +#main { + width: 40rem; + margin: 0.25rem; + margin-top: 0; + padding: 0.25rem; + border-left: solid 2px; + border-right: solid 2px; } diff --git a/header/header.css b/header/header.css index 923edf7..d57609f 100644 --- a/header/header.css +++ b/header/header.css @@ -10,6 +10,7 @@ header { width: calc(100% - 1.5rem); margin-bottom: 0.25rem; + margin-top: 0.5rem; padding: 0.5rem; border-width: 3px; border-style: solid; diff --git a/index.html b/index.html index fd449cc..ed3405d 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,6 @@

- Look ma, I'm horny! +
Look ma, I'm horny!
From 4b4b91a30acc3e53a874daf23b175982e81ac01b Mon Sep 17 00:00:00 2001 From: April Eaton Date: Mon, 15 Dec 2025 19:16:32 +0100 Subject: [PATCH 2/2] Early styling --- gear/gear.mjs | 7 ++++--- gear/index.html | 3 +-- gear/page.mjs | 2 +- global/global.css | 12 +++++++++--- header/header.css | 6 ++++++ 5 files changed, 21 insertions(+), 9 deletions(-) diff --git a/gear/gear.mjs b/gear/gear.mjs index 43247c6..ef6abb3 100644 --- a/gear/gear.mjs +++ b/gear/gear.mjs @@ -68,13 +68,14 @@ function bondageItemsToUl(items) { } /** + * @param {string} position * @returns {Promise} */ -async function generateGearListArticle() { +async function generateGearListArticle(position) { let list = await getGearList(); let bondageItems = document.createElement("article"); - bondageItems.setAttribute("id", "gl-body"); + bondageItems.setAttribute("id", position); let heading = document.createElement("h2"); heading.textContent = "Gear List"; bondageItems.appendChild(heading); @@ -111,5 +112,5 @@ function buildSection(items) { export async function attachGearList(position) { document .getElementById(position) - .replaceWith(await generateGearListArticle()); + .replaceWith(await generateGearListArticle(position)); } diff --git a/gear/index.html b/gear/index.html index 78eb770..c2466d3 100644 --- a/gear/index.html +++ b/gear/index.html @@ -19,7 +19,6 @@
- This will be my gear -
+
diff --git a/gear/page.mjs b/gear/page.mjs index 8ea2f57..a8ed54d 100644 --- a/gear/page.mjs +++ b/gear/page.mjs @@ -3,7 +3,7 @@ import { loadHTML } from "/global/loadin.mjs"; export function loadDependencies() { loadHTML("hd-box", "/header/header.html"); - attachGearList("gl-body"); + attachGearList("main"); } loadDependencies(); diff --git a/global/global.css b/global/global.css index bcc56bc..ef7ff5c 100644 --- a/global/global.css +++ b/global/global.css @@ -9,16 +9,22 @@ body { font-size: 16pt; margin: 0; min-height: 100svh; + height: 100svh; display: flex; flex-direction: column; align-items: center; + + background-color: #1e2030; + color: #cad3f5; } #main { - width: 40rem; + max-width: 40rem; + width: 100%; + height: 100%; margin: 0.25rem; margin-top: 0; padding: 0.25rem; - border-left: solid 2px; - border-right: solid 2px; + border-left: solid 2px #c6a0f6; + border-right: solid 2px #c6a0f6; } diff --git a/header/header.css b/header/header.css index d57609f..881e5f7 100644 --- a/header/header.css +++ b/header/header.css @@ -14,6 +14,7 @@ header { padding: 0.5rem; border-width: 3px; border-style: solid; + border-color: #c6a0f6; position: sticky; top: 0; @@ -42,4 +43,9 @@ header { width: 2rem; display: block; } + + a { + text-decoration: none; + color: #cad3f5; + } }