changed layout of main page

src/lib/components/split-container.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import ScrollTopButton from "$lib/components/scroll-top-button.svelte";
+
+    let { children } = $props();
+</script>
+
+<div class="split-container">
+    {@render children()}
+</div>
+
+<style>
+    .split-container {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+    }
+
+    .split-container * {
+        flex-basis: 1;
+    }
+
+    @media screen and (max-width: 800px) {
+        .split-container {
+            flex-direction: column;
+        }
+    }
+</style>

src/lib/components/subtitled-image.svelte

@@ -8,12 +8,14 @@
         // options: left, right. leaving empty means centred
         alignment,
         video,
+        pixelated,
     }: {
         image: string;
         altText?: string;
         subtitle?: string;
         alignment?: string;
         video?: boolean;
+        pixelated?: boolean;
     } = $props();
 </script>
 
@@ -21,7 +23,11 @@
     {#if video}
         <Video src={image} />
     {:else}
-        <img class="subtitled-img" src="{image}" alt="{altText}">
+        {#if pixelated}
+            <img class="subtitled-img pixelated-img" src="{image}" alt="{altText}">
+        {:else}
+            <img class="subtitled-img" src="{image}" alt="{altText}">
+        {/if}
     {/if}
 
     {#if subtitle}