cleaned up some components conditional css class assignment

src/lib/banner2.svelte

@@ -27,9 +27,11 @@
 	<div class="title-container">
         <div class="title-text-container">
             <h1 class="title">{title}</h1>
+
             {#if subtitle}
                 <p class="subtitle">[ {subtitle} ]</p>
             {/if}
+
             {#if tags.length}
                 <div class="tag-container">
                     {#each tags as tag}
@@ -43,9 +45,11 @@
                 {#if dateIndeterminate}
                     <p class="date">:: {dateIndeterminate}</p>
                 {/if}
+
                 {#if date}
                     <p class="date">posted :: {date}</p>
                 {/if}
+
                 {#if dateUpdated}
                     <p class="date">last updated :: {dateUpdated}</p>
                 {/if}
@@ -57,13 +61,10 @@
 <div class="container">
     {#if banner && banner !== ""}
         <a class="banner-container" href={banner}>
-            {#if pixelated}
-                <img class="banner pixelated-img" src={banner} alt={bannerAlt}>
-            {:else}
-                <img class="banner" src={banner} alt={bannerAlt}>
-            {/if}
+            <img class="banner {pixelated ? "pixelated-img" : ""}" src={banner} alt={bannerAlt}>
         </a>
     {/if}
+    
     {@render titles({title, subtitle, date})}
     <hr>
 </div>

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}
 
 <style>
     .subtitled-img-container {