From 0ac33061f8275a6808276adfa8ea8b8dcd92d7c9 Mon Sep 17 00:00:00 2001 From: Anhgelus Morhtuuzh Date: Mon, 6 Oct 2025 11:59:09 +0200 Subject: feat(frontend): better link style in light theme and rename /log route to /logs/ --- frontend/index.ts | 4 +++- frontend/scss/general.scss | 9 ++++++--- frontend/scss/main.scss | 2 ++ 3 files changed, 11 insertions(+), 4 deletions(-) (limited to 'frontend') diff --git a/frontend/index.ts b/frontend/index.ts index d4fbe2a..1d87f0a 100644 --- a/frontend/index.ts +++ b/frontend/index.ts @@ -5,7 +5,9 @@ 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.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") diff --git a/frontend/scss/general.scss b/frontend/scss/general.scss index cb0f89c..0d9acf3 100644 --- a/frontend/scss/general.scss +++ b/frontend/scss/general.scss @@ -55,6 +55,9 @@ a { &:hover { background: var(--color-light-rose); } + &.target { + @extend :hover; + } } nav > a { @@ -73,7 +76,7 @@ b { } ul, ol { - margin-top: -0.5rem; + margin-top: -1rem; margin-bottom: var(--margin-base); margin-left: 1rem; @@ -137,7 +140,7 @@ figcaption { } code, pre { - background: rgba(0, 0, 0, 0.4); + background: var(--color-black); } code { @@ -162,4 +165,4 @@ pre { background: none; border: none; } -} \ No newline at end of file +} diff --git a/frontend/scss/main.scss b/frontend/scss/main.scss index a837471..541dd9e 100644 --- a/frontend/scss/main.scss +++ b/frontend/scss/main.scss @@ -9,6 +9,7 @@ --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 */ @media (prefers-color-scheme: light) { --color-dark: #dbf6f6; @@ -16,6 +17,7 @@ --color-gray: #433b42; /* quote and legend */ --color-rose: #a01a5e; /* link accent */ --color-light-rose: hsla(330, 86%, 67%, 0.2); /* link accent hover and highlight */ + --color-black: rgba(0, 0, 0, 0.2); /* pre, code */ } --font-size-tiny: 0.85rem; /* quote, legend, code */ -- cgit v1.2.3