From 367f38676d18301784e7cf8b56f7dfb6192dfefc Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Fri, 30 Jan 2026 20:28:23 +0100
Subject: [PATCH] edited ImageSubtitle formatting

---
 src/lib/image-subtitle.svelte | 24 +++++++++++++++++-------
 src/routes/+layout.svelte     |  7 +++++--
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/lib/image-subtitle.svelte b/src/lib/image-subtitle.svelte
index 4555dc4..3443508 100644
--- a/src/lib/image-subtitle.svelte
+++ b/src/lib/image-subtitle.svelte
@@ -6,16 +6,26 @@
     } = $props();
 </script>
 
-<span class="image-subtitle">{content}</span>
+<div class="image-subtitle-container">
+    <span class="image-arrow">↳</span>
+    <span class="image-subtitle">{content}</span>
+</div>
 
 <style>
-    .image-subtitle::before {
-        content: "↳ ";
-    }
-    .image-subtitle {
-        display: block;
-        width: 80%;
+    .image-subtitle-container {
+        display: flex;
+        flex-direction: row;
+        width: var(--media-width);
         margin: 0 auto;
+    }
+
+    .image-subtitle, .image-arrow {
         font-size: 1rem;
+        line-height: 1.2rem;
+        margin: 2px 0 0 0;
+    }
+
+    .image-arrow {
+        margin-right: 4px;
     }
 </style>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d01976f..ec36a3b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -134,6 +134,9 @@
             --margin-header-top: 16px;
             --margin-header-bottom: 8px;
 
+            /* sizing */
+            --media-width: 80%;
+
             /* page sizing */
             --page-width: 1000px;
             --screen-width-mobile: 800px;
@@ -277,7 +280,7 @@
         }
 
         img, video {
-            width: 80%;
+            width: var(--media-width);
             margin-left: auto;
             margin-right: auto;
             display: flex;
@@ -286,7 +289,7 @@
         }
 
         .horizontally-centre-aligned {
-            width: 80%;
+            width: var(--media-width);
             display: flex;
             justify-content: center;
             align-items: center;