moved some CSS properties to variables

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,10 @@
     .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;
+        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/viewport/header.svelte

@@ -45,7 +45,6 @@
     /* mouse over link */
     a:hover {
         color: var(--color-highlight);
-        /* text-decoration: underline dashed 2px var(--color-highlight); */
     }
 
     @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,20 @@
             
             --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-sizing: 2px;
+            
+            /* durations */
+            --duration-animation: 0.1s;
+            --duration-blur: 0.2s;
+
             /* fonts */
             --font-line-height: 1.6rem;
 
@@ -147,6 +153,10 @@
             --screen-width-mobile: 800px;
 
             --margin-content-side: 24px;
+
+            /* misc */
+            --notch-size: 32px;
+            --notch-size-small: 16px;
         }
 
         html {
@@ -254,7 +264,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;
         }
 

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 {