From 9cfcbabb032c729b06d581412a64a9e7cefed6b1 Mon Sep 17 00:00:00 2001 From: Anhgelus Morhtuuzh Date: Mon, 6 Oct 2025 19:22:14 +0200 Subject: style(format): install prettier and run --- frontend/index.ts | 55 +++++++++++++++++++++++----------------------- frontend/scss/general.scss | 21 ++++++++++++------ frontend/scss/main.scss | 4 ++-- 3 files changed, 44 insertions(+), 36 deletions(-) (limited to 'frontend') diff --git a/frontend/index.ts b/frontend/index.ts index a00854f..61215cf 100644 --- a/frontend/index.ts +++ b/frontend/index.ts @@ -3,35 +3,36 @@ import htmx from "htmx.org"; htmx.config.historyRestoreAsHxRequest = false; function setupAnchors() { - document.querySelectorAll("a").forEach(e => { - // stuff related to external links are already handled in the backend - if (!e.href.startsWith(window.location.origin) && /https?:\/\//.test(e.href)) return; - if (e.href == window.location.href) e.classList.add("target"); - else e.classList.remove("target"); - if (e.hasAttribute("hx-trigger")) return; - e.setAttribute("hx-get", e.href) - e.setAttribute("hx-trigger", "click") - e.setAttribute("hx-target", "#content") - e.setAttribute("hx-swap", "outerHTML show:body:top") - htmx.process(e) - }); + document.querySelectorAll("a").forEach((e) => { + // stuff related to external links are already handled in the backend + if (!e.href.startsWith(window.location.origin) && /https?:\/\//.test(e.href)) return; + if (e.href == window.location.href) e.classList.add("target"); + else e.classList.remove("target"); + if (e.hasAttribute("hx-trigger")) return; + e.setAttribute("hx-get", e.href); + e.setAttribute("hx-trigger", "click"); + e.setAttribute("hx-target", "#content"); + e.setAttribute("hx-swap", "outerHTML show:body:top"); + htmx.process(e); + }); } // updating history and window title -document.addEventListener("htmx:afterSettle", e => { - if (e.detail.xhr === undefined) return - const title = e.detail.xhr.getResponseHeader("Updated-Title") - if (title?.length !== 0) document.title = decodeURIComponent(title).replaceAll("+", " ") - const quote = e.detail.xhr.getResponseHeader("Updated-Quote") - if (quote?.length !== 0) - document.querySelector("#quote")!.innerHTML = "« " + decodeURIComponent(quote).replaceAll("+", " ") + " »" - setupAnchors() -}) +document.addEventListener("htmx:afterSettle", (e) => { + if (e.detail.xhr === undefined) return; + const title = e.detail.xhr.getResponseHeader("Updated-Title"); + if (title?.length !== 0) document.title = decodeURIComponent(title).replaceAll("+", " "); + const quote = e.detail.xhr.getResponseHeader("Updated-Quote"); + if (quote?.length !== 0) + document.querySelector("#quote")!.innerHTML = + "« " + decodeURIComponent(quote).replaceAll("+", " ") + " »"; + setupAnchors(); +}); -document.body.addEventListener('htmx:beforeSwap', function(e) { - if(e.detail.xhr.status !== 404) return - e.detail.shouldSwap = true; - e.detail.isError = false; -}) +document.body.addEventListener("htmx:beforeSwap", function (e) { + if (e.detail.xhr.status !== 404) return; + e.detail.shouldSwap = true; + e.detail.isError = false; +}); -setupAnchors() +setupAnchors(); diff --git a/frontend/scss/general.scss b/frontend/scss/general.scss index 694a4b0..4df6da0 100644 --- a/frontend/scss/general.scss +++ b/frontend/scss/general.scss @@ -11,12 +11,15 @@ body * { line-height: var(--line-height); } -main, article { +main, +article { max-width: var(--width-content); margin: 0 auto; } -h1, h2, h3 { +h1, +h2, +h3 { font-weight: 500; line-height: var(--line-height-smaller); @@ -64,7 +67,8 @@ nav > a { line-height: var(--line-height-smaller); } -em, cite { +em, +cite { font-style: italic; } @@ -75,7 +79,8 @@ b { padding: 0.05em 0.1em; } -ul, ol { +ul, +ol { margin-top: -1rem; margin-bottom: var(--margin-base); margin-left: 1rem; @@ -118,14 +123,15 @@ figure { margin-bottom: var(--margin-base); - & a, img { + & a, + img { max-width: 100%; display: block; &.large { --max-width: var(--width-deco); --width: min(calc(100vw - 4rem), var(--max-width)); - margin-left: max(calc((100% - var(--max-width))/2), calc((100% - var(--width))/2)); + margin-left: max(calc((100% - var(--max-width)) / 2), calc((100% - var(--width)) / 2)); width: var(--width); max-width: var(--max-width); max-height: none; @@ -139,7 +145,8 @@ figcaption { color: var(--color-gray); } -code, pre { +code, +pre { background: var(--color-black); } diff --git a/frontend/scss/main.scss b/frontend/scss/main.scss index 541dd9e..d704d74 100644 --- a/frontend/scss/main.scss +++ b/frontend/scss/main.scss @@ -6,8 +6,8 @@ :root { --color-dark: hsl(202, 25%, 9%); --color-light: #dce4e4; - --color-gray: #BCB3BB; /* quote and legend */ - --color-rose: #F2B5D4; /* link accent */ + --color-gray: #bcb3bb; /* quote and legend */ + --color-rose: #f2b5d4; /* link accent */ --color-light-rose: hsl(330, 55%, 70%, 0.2); /* link accent hover and highlight */ --color-black: rgba(0, 0, 0, 0.4); /* pre, code */ -- cgit v1.2.3