feat(frontend): better link style in light theme

and rename /log route to /logs/

3 files changed, 11 insertions, 4 deletions

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 */