edited about page faq

src/lib/components/outlined-button.svelte

@@ -21,11 +21,11 @@
         font-family: var(--font-mono);
         font-size: var(--font-size-mono);
         padding: 8px;
-        border: dashed 2px var(--color-highlight);
+        border: dashed var(--border-dash-size) var(--color-highlight);
         color: var(--color-highlight);
         font-weight: 700;
         cursor: pointer;
-        transition: background-color 0.05s ease-out;
+        transition: background-color var(--duration-animation) ease-out;
     }
 
     .outlined-button:hover {

src/lib/components/ring.svelte

@@ -53,7 +53,7 @@
         text-decoration: none;
         font-size: 1.0rem;
         line-height: 1.4rem;
-        transition: color 0.1s ease-out, font-weight 0.1s ease-out;
+        transition: color var(--duration-animation) ease-out, font-weight var(--duration-animation) ease-out;
     }
     a:link, a:visited, span {
         color: var(--color-highlight);

src/lib/components/subtitled-image.svelte

@@ -43,10 +43,11 @@
     .subtitled-img-container {
         display: flex;
         flex-direction: column;
-        border: 2px var(--color-highlight) dashed;
+        border: var(--border-dash-size) var(--color-highlight) dashed;
         text-decoration: none;
         box-sizing: border-box;
-        transition: background-color 0.1s ease-out;
+        backdrop-filter: blur(var(--blur-radius-background));
+        transition: background-color var(--duration-animation) ease-out;
     }
 
     .subtitled-img-container-centred {

src/lib/lists/gallery-row.svelte

@@ -32,8 +32,6 @@
     .row-container {
         display: flex;
         flex-direction: row;
-        /* margin-bottom: 8px;
-        gap: 8px; */
     }
 
     .row-entry {
@@ -42,10 +40,10 @@
         margin: 0;
         padding: 8px;
         text-decoration: none;
-        transition: background-color 0.1s ease-out,
-                    border-color 0.1s ease-out,
-                    backdrop-filter 0.2s ease-out;
-        border: 2px dashed transparent;
+        transition: background-color var(--duration-animation) ease-out,
+                    border-color var(--duration-animation) ease-out,
+                    backdrop-filter var(--duration-blur) ease-out;
+        border: var(--border-dash-size) dashed transparent;
     }
 
     .row-entry:hover {
@@ -69,7 +67,7 @@
     .row-img {
         width: 100%;
         object-fit: cover;
-        transition: scale 0.1s ease-out;
+        transition: scale var(--duration-animation) ease-out;
     }
 
     .row-text-container {

src/lib/lists/gallery.svelte

@@ -71,7 +71,7 @@
         margin: 0;
         object-fit: cover;
         /* filter: grayscale(60%); */
-        transition: margin 0.1s ease-out;
+        transition: margin var(--duration-animation) ease-out;
     }
 
     .gallery-img-placeholder {
@@ -88,17 +88,17 @@
         border-style: dashed;
         justify-content: center;
         border-color: transparent;
-        border-width: 2px;
+        border-width: var(--border-dash-size);
         border-left: none;
-        transition: border-color 0.1s ease-out,
-                    padding-right 0.1s ease-out,
-                    background-color 0.1s ease-out,
-                    backdrop-filter 0.2s ease-out;
+        transition: border-color var(--duration-animation) ease-out,
+                    padding-right var(--duration-animation) ease-out,
+                    background-color var(--duration-animation) ease-out,
+                    backdrop-filter var(--duration-blur) ease-out;
     }
 
     .gallery-title, .gallery-subtitle {
         margin: 0;
-        transition: color 0.1s ease-out;
+        transition: color var(--duration-animation) ease-out;
     }
 
     .gallery-title {

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);

src/lib/viewport/header.svelte

@@ -45,7 +45,7 @@
     /* mouse over link */
     a:hover {
         color: var(--color-highlight);
-        /* text-decoration: underline dashed 2px var(--color-highlight); */
+        text-decoration: wavy var(--underline-dash-size) var(--color-highlight) underline;
     }
 
     @media screen and (max-width: 500px) {

src/routes/+layout.svelte

@@ -96,6 +96,7 @@
 
     :global {
         :root {
+            /* colours */
             --color-text: #d0d0d0;
             --color-text-secondary: #b0b0b0;
             --color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%);
@@ -113,15 +114,21 @@
             
             --color-waters: #242424;
 
-            --notch-size: 32px;
-            --notch-size-small: 16px;
-
             --color-link-unvisited: #c2e8ff;
             --color-link-visited: #ffd7f0;
             --color-link-hovered: #ffdad5;
 
+            /* blurs */
             --blur-radius-background: 6px;
 
+            /* borders */
+            --border-dash-size: 2px;
+            --underline-dash-size: 1px;
+            
+            /* durations */
+            --duration-animation: 0.1s;
+            --duration-blur: 0.2s;
+
             /* fonts */
             --font-line-height: 1.6rem;
 
@@ -147,6 +154,10 @@
             --screen-width-mobile: 800px;
 
             --margin-content-side: 24px;
+
+            /* misc */
+            --notch-size: 32px;
+            --notch-size-small: 16px;
         }
 
         html {
@@ -254,7 +265,7 @@
             width: 100%;
             height: 1px;
             border: none;
-            border-top: 2px dashed var(--color-highlight);
+            border-top: var(--border-dash-size) dashed var(--color-highlight);
             margin: 8px 0;
         }
 
@@ -264,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;
@@ -303,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 {
@@ -311,7 +324,7 @@
         /* mouse over link */
         a:hover {
             color: var(--color-link-hovered);
-            text-decoration-thickness: 1px;
+            text-decoration-style: wavy;
         }
 
         .notched {

src/routes/+page.svelte

@@ -105,14 +105,15 @@
 
     .changelog-container {
         padding: 8px 24px;
-        border: 2px var(--color-highlight) dashed;
+        border: var(--border-dash-size) var(--color-highlight) dashed;
+        backdrop-filter: blur(var(--blur-radius-background));
     }
 
     .changelog-header-link {
         text-decoration: none;
     }
     .changelog-header-link:hover {
-        text-decoration: underline dashed 2px var(--color-highlight);
+        text-decoration: underline dashed var(--border-dash-size) var(--color-highlight);
     }
     
     .changelog-header {

src/routes/meta/about/+page.svelte

@@ -167,7 +167,7 @@
 
     <p>The <a href="https://ratchetandclank.fandom.com/wiki/Ratchet">rat</a> in the bottom right of the screen is property of <a href="https://insomniac.games/">Insomniac Games</a>. Clicking it will bring you good fortune.</p>
 
-    <h2 id="contact">Where to find me</h2>
+    <h2 id="contact">Contact / Where to find me</h2>
 
     <p>Best to e-mail me if you want to get in touch – I try to respond quickly!</p>
 
@@ -179,17 +179,19 @@
 
     <p>hmm... maybe worth it to point out that this website and everything else I make comes straight from my own hands and brain. No generative AI is used, ever.</p>
 
+    <p>Have a small FAQ. No one ever asked these questions, but you may find the answer you didn't know you needed.</p>
+
     <p class="faq-question">What does '0461' stand for?</p>
 
-    <p>It's a reference to Ratchet & Clank; Clank's designation is <a href="https://ratchetandclank.fandom.com/wiki/Clank">XJ-0461</a>.</p>
+    <p>It's a reference to Ratchet & Clank; Clank's designation is <a href="https://ratchetandclank.fandom.com/wiki/Clank">XJ-0461</a>. They started using that designation in <i>Ratchet & Clank: A Crack in Time</i> when Orvus is revealed to be Clank's father and he keeps calling him by his 'real' name.</p>
 
     <p class="faq-question">If you could take 3 albums to a desert island, which ones?</p>
 
-    <p>acloudyskye's <a href="https://acloudyskye.bandcamp.com/album/there-must-be-something-here">There Must Be Something Here</a> as a melodic and emotional record, Jaron's <a href="https://jaronsteele.bandcamp.com/album/its-hard-to-see-color-when-youre-so-impossibly-far-away">it's hard to see color [When You're So Impossibly Far Away*]</a> for its pure hyperpop energy, and venturing's <a href="https://janeremover.bandcamp.com/album/ghostholding">Ghostholding</a> as an emotional and sad album.</p>
+    <p>acloudyskye's <a href="https://acloudyskye.bandcamp.com/album/there-must-be-something-here">There Must Be Something Here</a> as an emotional/melodic record, Jaron's <a href="https://jaronsteele.bandcamp.com/album/its-hard-to-see-color-when-youre-so-impossibly-far-away">it's hard to see color [When You're So Impossibly Far Away*]</a> for its pure hyperpop energy, and venturing's <a href="https://janeremover.bandcamp.com/album/ghostholding">Ghostholding</a> as an emotional/sad album.</p>
 
     <p class="faq-question">Tell me a fun fact.</p>
 
-    <p>I am currently replaying the original Ratchet & Clank (2002) and I am playing it in German for once because I haven't heard the German voies in so long. The dialogue translated into German is often longer than the original English dialogue, which makes characters' voice lines run into one another. This doesn't happen in the English original.</p>
+    <p>I am currently replaying the original Ratchet & Clank (2002) and I am playing it in German because I haven't heard the German voices in so long. The dialogue translated into German is often longer than the original English dialogue, which makes characters' voice lines run into one another. This doesn't happen in the English original.</p>
 
     <p><i>Last updated: 2026-02-12</i></p>
 </Content>
@@ -202,6 +204,10 @@
         margin-bottom: 0;
     }
 
+    .faq-question::before {
+        content: '↘ ';
+    }
+
     .faq-question + p {
         margin-top: 0;
     }