Move slim layout to slim container

src/components/atoms/ContainerSlim.svelte

@@ -0,0 +1,23 @@
+<div class="container-slim">
+  <slot />
+</div>
+
+<style lang="scss">
+  @import "$lib/styles/mixins.scss";
+
+  @layer component {
+    .container-slim {
+      margin: 0 20%;
+      transition-duration: 1s;
+      display: block;
+
+      @include portrait {
+        margin: 0 5%;
+      }
+
+      @include landscape {
+        margin: 0 25%;
+      }
+    }
+  }
+</style>

src/lib/styles/mixins.scss

@@ -0,0 +1,18 @@
+@mixin mobile() {
+  @media (max-width: 600px) {
+    @content;
+  }
+}
+
+@mixin landscape() {
+  @media (min-aspect-ratio: 16/11) {
+    @content;
+  }
+}
+
+
+@mixin portrait() {
+  @media (max-aspect-ratio: 10/16) {
+    @content;
+  }
+}

src/routes/+layout.svelte

@@ -30,19 +30,6 @@
       display: flex;
       flex-direction: column;
     }
-    .content {
-      margin: 0 20%;
-      transition-duration: 1s;
-      display: block;
-
-      @include portrait {
-        margin: 0 5%;
-      }
-
-      @include landscape {
-        margin: 0 25%;
-      }
-    }
 
     .footer-position {
       margin: 0;

src/routes/+page.svelte

@@ -1,18 +1,20 @@
 <script>
   import "$lib/vars.scss";
   import Box from "../components/atoms/Box.svelte";
+  import ContainerSlim from "../components/atoms/ContainerSlim.svelte";
   import Paragraph from "../components/atoms/Paragraph.svelte";
   import Thumbnail from "../components/molecules/Thumbnail.svelte";
 </script>
 
-<h1>Welcome to my website</h1>
-<Box title="About">
+<ContainerSlim>
+  <h1>Welcome to my website</h1>
+  <Box title="About">
     <div class="flex-row text-and-image">
       <div class="text">
         <Paragraph>
-        Heyyy. I'm a software developer and tinkerer from Germany. I do a lot of
-        stuff so this website is an attempt in providing an overview.
-        <br><br>
+          Heyyy. I'm a software developer and tinkerer from Germany. I do a lot
+          of stuff so this website is an attempt in providing an overview.
+          <br /><br />
           Right now it's very much a work in progress as I'm figuring out how to
           properly design a website (lol). But there's already some content to explore.
         </Paragraph>
@@ -33,7 +35,8 @@
         />
       </div>
     </div>
-</Box>
+  </Box>
+</ContainerSlim>
 
 <style lang="scss">
   .text-and-image {

src/routes/blog/+page.svelte

@@ -2,16 +2,19 @@
   import type { PageData } from "./$types";
   import Error from "../../components/molecules/Error.svelte";
   import BlogPostTeaser from "../../components/organisms/BlogPostTeaser.svelte";
+  import ContainerSlim from "../../components/atoms/ContainerSlim.svelte";
 
   export let data: PageData;
 </script>
 
-<h1>Blog</h1>
+<ContainerSlim>
+  <h1>Blog</h1>
 
-{#each data.posts ?? [] as post}
+  {#each data.posts ?? [] as post}
     <BlogPostTeaser {post} />
-{/each}
+  {/each}
 
-{#if data.error}
+  {#if data.error}
     <Error error={data.error} />
-{/if}
+  {/if}
+</ContainerSlim>

src/routes/blog/[slug]/+page.svelte

@@ -7,6 +7,7 @@
   import BlogPostContent from "../../../components/organisms/BlogPostContent.svelte";
   import type { PageData } from "./$types";
   import { beforeNavigate } from "$app/navigation";
+  import ContainerSlim from "../../../components/atoms/ContainerSlim.svelte";
 
   export let data: PageData;
 
@@ -29,7 +30,8 @@
   });
 </script>
 
-{#if data.post}
+<ContainerSlim>
+  {#if data.post}
     {@const post = data.post}
     {@const author = data.post.attributes.author.data?.attributes}
     {@const teaserImage = data.post.attributes.teaserImage.data?.attributes}
@@ -64,15 +66,15 @@
     {#each post.attributes.content as contentEntry}
       <BlogPostContent content={contentEntry} />
     {/each}
-{:else if !data.error}
+  {:else if !data.error}
     <Error error={{ message: "Could not find the post" }} />
-{/if}
+  {/if}
 
-{#if data.error}
+  {#if data.error}
     <Error error={data.error} />
-{/if}
+  {/if}
 
-<style lang="scss">
+  <style lang="scss">
     .blog-entry-head {
       position: relative;
       margin: 0;
@@ -100,4 +102,5 @@
         z-index: -100;
       }
     }
-</style>
+  </style>
+</ContainerSlim>