cleaned up some components conditional css class assignment

src/lib/components/outlined-button.svelte

@@ -10,11 +10,7 @@
     } = $props();
 </script>
 
-{#if fullWidth}
-    <button class="outlined-button outlined-button-fullwidth" onclick={onClick}>{text}</button>   
-{:else}
-    <button class="outlined-button" onclick={onClick}>{text}</button>
-{/if}
+<button class="outlined-button {fullWidth ? "outlined-button-fullwidth" : ""}" onclick={onClick}>{text}</button>   
 
 <style>
     .outlined-button {

src/lib/components/ring.svelte

@@ -34,18 +34,24 @@
 <div class="webring-container">
     <div class="webring-row">
         <span>〔</span>
+        
         <a href="{ringLink}">{highlightEmojiLeft} {ringName} {highlightEmojiRight ?? highlightEmojiLeft}</a>
+
         <span>〕</span>
     </div>
     <div class="webring-row">
         <span>〔</span>
+
         <a href="{prevLink}">{prevSymbol} prev</a>
+
         {#if randLink}
             <a href="{randLink}">rand</a>
         {/if}
+
         {#if listLink}
             <a href="{listLink}">list</a>
         {/if}
+
         <a href="{nextLink}">next {nextSymbol}</a>
         <span>〕</span>
     </div>

src/lib/components/subtitled-image.svelte

@@ -21,15 +21,29 @@
     } = $props();
 </script>
 
-{#snippet subtitledImageContent()}
+<a class="
+    subtitled-img-container
+    blurred-background
+    {smaller ? "subtitled-img-reduced-size" : ""}
+    {alignment == "left"
+        ? "subtitled-img-container-left"
+        : alignment == "right"
+            ? "subtitled-img-container-right"
+            : "subtitled-img-container-centred"
+    }"
+    href="{image}"
+    >
+
     {#if video}
         <Video src={image} />
     {:else}
-        {#if pixelated}
-            <img class="subtitled-img pixelated-img" src="{image}" alt="{altText}">
-        {:else}
-            <img class="subtitled-img" src="{image}" alt="{altText}">
-        {/if}
+        <img class="
+            subtitled-img
+            {pixelated ? "pixelated-img" : ""}
+        "
+        src="{image}"
+        alt="{altText}"
+        >
     {/if}
 
     {#if subtitle}
@@ -39,40 +53,7 @@
             <p class="subtitled-img-text">{subtitle}</p>
         </div>
     {/if}
-{/snippet}
-
-<!-- this structure is ugly as fuck. there must be a better way of doing this -->
-{#if alignment && alignment == "left"}
-    {#if smaller}
-        <a class="subtitled-img-container blurred-background subtitled-img-container-left subtitled-img-reduced-size" href="{image}">
-            {@render subtitledImageContent()}
-        </a>
-    {:else}
-        <a class="subtitled-img-container blurred-background subtitled-img-container-left" href="{image}">
-            {@render subtitledImageContent()}
-        </a>
-    {/if}
-{:else if alignment && alignment == "right"}
-    {#if smaller}
-        <a class="subtitled-img-container blurred-background subtitled-img-container-right subtitled-img-reduced-size" href="{image}">
-            {@render subtitledImageContent()}
-        </a>
-    {:else}
-        <a class="subtitled-img-container subtitled-img-container-right" href="{image}">
-            {@render subtitledImageContent()}
-        </a>
-    {/if}
-{:else}
-    {#if smaller}
-        <a class="subtitled-img-container blurred-background subtitled-img-container-centred subtitled-img-reduced-size" href="{image}">
-            {@render subtitledImageContent()}
-        </a>
-    {:else}
-        <a class="subtitled-img-container blurred-background subtitled-img-container-centred" href="{image}">
-            {@render subtitledImageContent()}
-        </a>
-    {/if}
-{/if}
+</a>
 
 <style>
     .subtitled-img-container {