From 1b8d53df869cadd144c3f016ef649a6110cccfef Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Sun, 7 Jul 2024 23:08:00 +0200
Subject: [PATCH] Fix about section

---
 src/components/molecules/PageTitle.svelte    |  6 ++
 src/components/organisms/Introduction.svelte | 77 ++++++++++++++------
 2 files changed, 59 insertions(+), 24 deletions(-)

diff --git a/src/components/molecules/PageTitle.svelte b/src/components/molecules/PageTitle.svelte
index 982e422..8b987c3 100644
--- a/src/components/molecules/PageTitle.svelte
+++ b/src/components/molecules/PageTitle.svelte
@@ -31,6 +31,8 @@
 </div>
 
 <style lang="scss">
+  @import "$lib/styles/mixins.scss";
+  
   @layer component {
     .page-title {
       display: flex;
@@ -49,6 +51,10 @@
       text-shadow: 0px 0px 0.5em var(--color-primary);
       user-select: none;
 
+      @include portrait {
+        font-size: 1.8em;
+      }
+
       h1,
       h6 {
         width: 100%;
diff --git a/src/components/organisms/Introduction.svelte b/src/components/organisms/Introduction.svelte
index 099c8f8..349e6a1 100644
--- a/src/components/organisms/Introduction.svelte
+++ b/src/components/organisms/Introduction.svelte
@@ -1,33 +1,62 @@
 <script>
-
-    import Box from "../atoms/Box.svelte";
-    import ContainerDualColumn from "../atoms/ContainerDualColumn.svelte";
-    import Paragraph from "../atoms/Paragraph.svelte";
-    import Thumbnail from "../molecules/Thumbnail.svelte";
-
+  import Box from "../atoms/Box.svelte";
+  import Thumbnail from "../molecules/Thumbnail.svelte";
 </script>
+
 <Box title="About">
-  <ContainerDualColumn leftRatio="1" rightRatio="2">
-    <Thumbnail
-      slot="left"
-      imageData={{
-        altText:
-          "A picture of Ferris, the Rust mascot. An orange crab plushie.",
-        formats: [
-          {
-            name: "original",
-            mime: "image/jpeg",
-            url: "/images/profile.jpg",
-          },
-        ],
-      }}
-    />
-    <Paragraph slot="right">
+  <div class="about-content">
+    <div class="about-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>
+    <p>
       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>
-  </ContainerDualColumn>
+    </p>
+  </div>
 </Box>
+
+<style lang="scss">
+  @import "$lib/styles/mixins.scss";
+
+  @layer component {
+    .about-content {
+      display: block;
+
+      @include portrait {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .about-image {
+        margin-right: 1em;
+        float: left;
+        width: 30%;
+
+        @include portrait {
+          width: 100%;
+          margin-right: 0;
+          margin-bottom: 1em;
+        }
+      }
+
+      p {
+        margin: 0;
+      }
+    }
+  }
+</style>