From 80b1a2f5929a5c1a360fadb8a88a6b68d434526b Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Thu, 12 Feb 2026 16:39:28 +0100
Subject: [PATCH] added wavy effects to links as well as headers; added blurs
 to code blocks and more elements with background; changed table of contents
 style

---
 src/lib/components/subtitled-image.svelte | 1 +
 src/lib/table-of-contents.svelte          | 8 ++++++--
 src/lib/viewport/header.svelte            | 1 +
 src/routes/+layout.svelte                 | 5 ++++-
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/subtitled-image.svelte b/src/lib/components/subtitled-image.svelte
index ed880fb..ee91a4a 100644
--- a/src/lib/components/subtitled-image.svelte
+++ b/src/lib/components/subtitled-image.svelte
@@ -46,6 +46,7 @@
         border: var(--border-dash-size) var(--color-highlight) dashed;
         text-decoration: none;
         box-sizing: border-box;
+        backdrop-filter: blur(var(--blur-radius-background));
         transition: background-color var(--duration-animation) ease-out;
     }
 
diff --git a/src/lib/table-of-contents.svelte b/src/lib/table-of-contents.svelte
index fad6c6a..a7441aa 100644
--- a/src/lib/table-of-contents.svelte
+++ b/src/lib/table-of-contents.svelte
@@ -65,11 +65,11 @@
 </script>
 
 {#if stickyScrolling}
-    <div class="toc-container notched sticky-toc" bind:this={root}>
+    <div class="toc-container sticky-toc" bind:this={root}>
         {@render tocList()}
     </div>
 {:else}
-    <div class="toc-container notched" bind:this={root}>
+    <div class="toc-container" bind:this={root}>
         {@render tocList()}
     </div>
 {/if}
@@ -86,6 +86,8 @@
             margin-right: auto;
             background-color: var(--color-background-highlight);
             padding: 16px 0;
+            border: dashed var(--border-dash-size) var(--color-highlight);
+            backdrop-filter: blur(var(--blur-radius-background));
         }
 
         .sticky-toc {
@@ -109,6 +111,8 @@
             display: inline-block;
             text-decoration: none;
             box-sizing: border-box;
+            transition: color var(--duration-animation) ease-out,
+                        background-color var(--duration-animation) ease-out;
         }
         .toc-list a, .toc-list a:link, .toc-list a:visited {
             color: var(--color-text);
diff --git a/src/lib/viewport/header.svelte b/src/lib/viewport/header.svelte
index 101a423..aa485a4 100644
--- a/src/lib/viewport/header.svelte
+++ b/src/lib/viewport/header.svelte
@@ -45,6 +45,7 @@
     /* mouse over link */
     a:hover {
         color: var(--color-highlight);
+        text-decoration: wavy var(--underline-dash-size) var(--color-highlight) underline;
     }
 
     @media screen and (max-width: 500px) {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 10ae9e9..fae5d08 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -123,6 +123,7 @@
 
             /* borders */
             --border-dash-size: 2px;
+            --underline-dash-size: 1px;
             
             /* durations */
             --duration-animation: 0.1s;
@@ -274,6 +275,7 @@
             line-height: var(--font-line-height);
             font-weight: 500;
             background-color: var(--color-background-highlight);
+            backdrop-filter: blur(var(--blur-radius-background));
             /* color: var(--color-background); */
             border-radius: 8px;
             padding-left: 6px;
@@ -313,6 +315,7 @@
         a:link {
             color: var(--color-link-unvisited);
             text-decoration-style: dashed;
+            text-decoration-thickness: var(--underline-dash-size);
         }
         /* visited link */
         a:visited {
@@ -321,7 +324,7 @@
         /* mouse over link */
         a:hover {
             color: var(--color-link-hovered);
-            text-decoration-thickness: 1px;
+            text-decoration-style: wavy;
         }
 
         .notched {