From 0b1afda9aad7e00e2ef15c27944a320d97931444 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Sun, 7 Jul 2024 14:04:13 +0200
Subject: [PATCH] Move slim layout to slim container

---
 src/components/atoms/ContainerSlim.svelte |  23 ++++
 src/lib/styles/mixins.scss                |  18 +++
 src/routes/+layout.svelte                 |  13 ---
 src/routes/+page.svelte                   |  61 +++++-----
 src/routes/blog/+page.svelte              |  17 +--
 src/routes/blog/[slug]/+page.svelte       | 131 +++++++++++-----------
 6 files changed, 150 insertions(+), 113 deletions(-)
 create mode 100644 src/components/atoms/ContainerSlim.svelte
 create mode 100644 src/lib/styles/mixins.scss

diff --git a/src/components/atoms/ContainerSlim.svelte b/src/components/atoms/ContainerSlim.svelte
new file mode 100644
index 0000000..323f968
--- /dev/null
+++ b/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>
diff --git a/src/lib/styles/mixins.scss b/src/lib/styles/mixins.scss
new file mode 100644
index 0000000..8374b17
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2f0e560..d35c86d 100644
--- a/src/routes/+layout.svelte
+++ b/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;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8b8f379..7b2f0f5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,39 +1,42 @@
 <script>
   import "$lib/vars.scss";
   import Box from "../components/atoms/Box.svelte";
-    import Paragraph from "../components/atoms/Paragraph.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">
-  <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>
-        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>
+<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 />
+          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>
+      </div>
+      <div class="image">
+        <Thumbnail
+          imageData={{
+            altText:
+              "A picture of Ferris, the Rust mascot. An orange crab plushie.",
+            formats: [
+              {
+                name: "original",
+                mime: "image/jpeg",
+                url: "/images/profile.jpg",
+              },
+            ],
+          }}
+        />
+      </div>
     </div>
-    <div class="image">
-      <Thumbnail
-        imageData={{
-          altText:
-            "A picture of Ferris, the Rust mascot. An orange crab plushie.",
-          formats: [
-            {
-              name: "original",
-              mime: "image/jpeg",
-              url: "/images/profile.jpg",
-            },
-          ],
-        }}
-      />
-    </div>
-  </div>
-</Box>
+  </Box>
+</ContainerSlim>
 
 <style lang="scss">
   .text-and-image {
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 6a7a3d9..70172ff 100644
--- a/src/routes/blog/+page.svelte
+++ b/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}
-  <BlogPostTeaser {post} />
-{/each}
+  {#each data.posts ?? [] as post}
+    <BlogPostTeaser {post} />
+  {/each}
 
-{#if data.error}
-  <Error error={data.error} />
-{/if}
+  {#if data.error}
+    <Error error={data.error} />
+  {/if}
+</ContainerSlim>
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index b059371..3721d08 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/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,75 +30,77 @@
   });
 </script>
 
-{#if data.post}
-  {@const post = data.post}
-  {@const author = data.post.attributes.author.data?.attributes}
-  {@const teaserImage = data.post.attributes.teaserImage.data?.attributes}
-  {@const collection = data.post.attributes.collection.data?.attributes}
+<ContainerSlim>
+  {#if data.post}
+    {@const post = data.post}
+    {@const author = data.post.attributes.author.data?.attributes}
+    {@const teaserImage = data.post.attributes.teaserImage.data?.attributes}
+    {@const collection = data.post.attributes.collection.data?.attributes}
 
-  <div class="blog-entry-head">
-    <Box>
-      <div class="head-text">
-        <h1>{post.attributes.title}</h1>
-        <h3>by {author?.name}</h3>
-        {#if collection}
-          <h4>
-            in <a href={`/blog/collection/${collection.slug}`}
-              >{collection?.name}</a
-            >
-          </h4>
-        {/if}
-        <span>{formatDateRelative(post.attributes.publishedAt)}</span>
-      </div>
-      {#if post.attributes.teaserImage.data}
-        <div class="head-thumbnail">
-          <Thumbnail
-            imageData={{
-              altText: teaserImage.alternativeText,
-              formats: Object.values(teaserImage.formats),
-            }}
-          />
+    <div class="blog-entry-head">
+      <Box>
+        <div class="head-text">
+          <h1>{post.attributes.title}</h1>
+          <h3>by {author?.name}</h3>
+          {#if collection}
+            <h4>
+              in <a href={`/blog/collection/${collection.slug}`}
+                >{collection?.name}</a
+              >
+            </h4>
+          {/if}
+          <span>{formatDateRelative(post.attributes.publishedAt)}</span>
         </div>
-      {/if}
-    </Box>
-  </div>
-  {#each post.attributes.content as contentEntry}
-    <BlogPostContent content={contentEntry} />
-  {/each}
-{:else if !data.error}
-  <Error error={{ message: "Could not find the post" }} />
-{/if}
+        {#if post.attributes.teaserImage.data}
+          <div class="head-thumbnail">
+            <Thumbnail
+              imageData={{
+                altText: teaserImage.alternativeText,
+                formats: Object.values(teaserImage.formats),
+              }}
+            />
+          </div>
+        {/if}
+      </Box>
+    </div>
+    {#each post.attributes.content as contentEntry}
+      <BlogPostContent content={contentEntry} />
+    {/each}
+  {:else if !data.error}
+    <Error error={{ message: "Could not find the post" }} />
+  {/if}
 
-{#if data.error}
-  <Error error={data.error} />
-{/if}
+  {#if data.error}
+    <Error error={data.error} />
+  {/if}
 
-<style lang="scss">
-  .blog-entry-head {
-    position: relative;
-    margin: 0;
-    margin-bottom: 1em;
-    background: rgba(0, 0, 0, 0.6);
-    border-radius: 10px;
+  <style lang="scss">
+    .blog-entry-head {
+      position: relative;
+      margin: 0;
+      margin-bottom: 1em;
+      background: rgba(0, 0, 0, 0.6);
+      border-radius: 10px;
 
-    .head-text {
-      width: 100%;
-      z-index: 100;
-      padding: 1em;
-      h1 {
-        margin-top: 0;
+      .head-text {
+        width: 100%;
+        z-index: 100;
+        padding: 1em;
+        h1 {
+          margin-top: 0;
+        }
+        &* {
+          text-align: center;
+        }
       }
-      &* {
-        text-align: center;
+      .head-thumbnail {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -100;
       }
     }
-    .head-thumbnail {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: -100;
-    }
-  }
-</style>
+  </style>
+</ContainerSlim>