feat(frontend): better link style in light theme

and rename /log route to /logs/

6 files changed, 16 insertions, 7 deletions

diff --git a/.gitignore b/.gitignore
index 82245d4..d394685 100644
--- a/.gitignore
+++ b/.gitignore
@@ -160,3 +160,4 @@ public
 config.toml
 data
 small-world
+*.tar.gz
diff --git a/backend/logs.go b/backend/logs.go
index 7a6db3e..db69462 100644
--- a/backend/logs.go
+++ b/backend/logs.go
@@ -108,9 +108,10 @@ func readLogDir(path string, dir []os.DirEntry) error {
 }
 
 func HandleLogs(r *chi.Mux) {
-	r.Route("/log", func(r chi.Router) {
+	r.Route("/logs", func(r chi.Router) {
 		r.Get("/", handleLogList)
 		r.Get("/{slug:[a-zA-Z0-9-]+}", handleLog)
+		r.Get("/{slug:[a-zA-Z0-9-]+}/", handleLog)
 	})
 }
 
diff --git a/backend/templates/components.html b/backend/templates/components.html
index 280fa3d..2758a8b 100644
--- a/backend/templates/components.html
+++ b/backend/templates/components.html
@@ -2,9 +2,9 @@
 <article>
     {{ range .Logs }}
     <article>
-        <h2><a href="/log/{{ .Slug }}">{{ .Title }}</a></h2>
+        <h2><a href="/logs/{{ .Slug }}">{{ .Title }}</a></h2>
         <figure>
-            <a href="/log/{{ .Slug }}"><img src="{{ static .Img.Src }}" alt="{{ .Img.Alt }}"></a>
+            <a href="/logs/{{ .Slug }}"><img src="{{ static .Img.Src }}" alt="{{ .Img.Alt }}"></a>
             <figcaption>{{ .Img.Legend }}</figcaption>
         </figure>
         <p>{{ .Description }}</p>
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 */