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>
 
+<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>
@@ -34,6 +36,7 @@
       </div>
     </div>
   </Box>
+</ContainerSlim>
 
 <style lang="scss">
   .text-and-image {

src/routes/blog/+page.svelte

@@ -2,10 +2,12 @@
   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>
 
+<ContainerSlim>
   <h1>Blog</h1>
 
   {#each data.posts ?? [] as post}
@@ -15,3 +17,4 @@
   {#if data.error}
     <Error error={data.error} />
   {/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,6 +30,7 @@
   });
 </script>
 
+<ContainerSlim>
   {#if data.post}
     {@const post = data.post}
     {@const author = data.post.attributes.author.data?.attributes}
@@ -101,3 +103,4 @@
       }
     }
   </style>
+</ContainerSlim>