Add socials and links

src/components/atoms/Box.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
-  export let color = "primary"
+  export let color = "primary";
   export let title: string | undefined = undefined;
+
+  export let margin: "slim" | "medium" | "wide" = "medium";
 </script>
 
-<div class="box" class:with-title={title} style={`--box-color: var(--color-${color})`}>
+<div
+  class={["box", `margin-${margin}`].join(" ")}
+  class:with-title={title}
+  style={`--box-color: var(--color-${color})`}
+>
   {#if title}
     <div class="box-title">
       <div class="border-left"></div>
@@ -13,37 +19,59 @@
       <div class="border-right"></div>
     </div>
   {/if}
-  <slot/>
+  <slot />
 </div>
 
 <style lang="scss">
-@layer component {
+  @layer component {
     .box {
       position: relative;
       --box-border-color: color-mix(in srgb, var(--box-color), #fff 65%);
-    --box-text-color: color-mix(in srgb, var(--box-color), var(--color-foreground) 90%);
+      --box-text-color: color-mix(
+        in srgb,
+        var(--box-color),
+        var(--color-foreground) 90%
+      );
 
-    padding: 1em;
       border: 5px solid var(--box-border-color);
       border-radius: 10px;
       margin: auto;
       height: auto;
       width: 100%;
-    box-shadow: 0 0 20px var(--box-color), inset 0 0 20px var(--box-color);
+      box-shadow:
+        0 0 20px var(--box-color),
+        inset 0 0 20px var(--box-color);
 
       &.with-title {
-      margin-top: 2em;
         border-top: transparent;
+        margin-top: 2em;
+
+        &.margin-slim {
           padding-top: 1.25em;
         }
+        &.margin-medium {
+          padding-top: 1.75em;
+        }
+        &.margin-wide {
+          padding-top: 2.25em;
+        }
+      }
 
+      &.margin-slim {
+        padding: 1em;
+      }
+      &.margin-medium {
+        padding: 1.5em;
+      }
+      &.margin-wide {
+        padding: 2em;
+      }
 
       .box-title {
         display: flex;
         width: calc(100% + 10px);
         flex-direction: row;
 
-
         position: absolute;
         top: 0;
         left: -5px;
@@ -71,11 +99,13 @@
           border-right: 5px solid var(--box-border-color);
         }
 
-      .border-right, .border-left {
+        .border-right,
+        .border-left {
           border-top: 5px solid var(--box-border-color);
         }
 
-      .left-end-cap, .right-end-cap {
+        .left-end-cap,
+        .right-end-cap {
           width: 10px;
           height: 7px;
           transform: translateY(-1px);
@@ -84,6 +114,5 @@
         }
       }
     }
-
-}
+  }
 </style>

src/components/atoms/ContainerDualColumn.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  export let leftWidth = "50%";
+  export let rightWidth = "50%";
+</script>
+
+<div
+  class="container"
+  style={`--column-left-width: ${leftWidth}; --column-right-width: ${rightWidth}`}
+>
+  <div class="column-left">
+    <slot name="left" />
+  </div>
+  <div class="column-spacer" />
+  <div class="column-right">
+    <slot name="right" />
+  </div>
+</div>
+
+<style lang="scss">
+  @import "$lib/styles/mixins.scss";
+
+  @layer component {
+    .container {
+      transition-duration: 1s;
+      display: flex;
+      flex-direction: row;
+
+      @include portrait {
+        margin: 0 5%;
+        flex-direction: column;
+      }
+
+      .column-left {
+        width: var(--column-left-width);
+
+        @include portrait {
+          width: 100%;
+        }
+      }
+
+      .column-spacer {
+        width: 2em;
+
+        @include portrait {
+          display: none;
+        }
+      }
+
+      .column-right {
+        width: var(--column-right-width);
+
+        @include portrait {
+          width: 100%;
+        }
+      }
+    }
+  }
+</style>

src/components/atoms/ContainerMedium.svelte

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

src/components/organisms/Header.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <div class="header">
-  <Box color="purple">
+  <Box color="purple" margin="slim">
     <Navigation/>
   </Box>
 </div>

src/routes/+page.svelte

@@ -1,26 +1,19 @@
 <script>
   import "$lib/vars.scss";
   import Box from "../components/atoms/Box.svelte";
-  import ContainerSlim from "../components/atoms/ContainerSlim.svelte";
+  import ContainerDualColumn from "../components/atoms/ContainerDualColumn.svelte";
+  import ContainerMedium from "../components/atoms/ContainerMedium.svelte";
   import Paragraph from "../components/atoms/Paragraph.svelte";
   import Thumbnail from "../components/molecules/Thumbnail.svelte";
 </script>
 
-<ContainerSlim>
+<ContainerMedium>
   <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">
+  <ContainerDualColumn leftWidth="65%" rightWidth="35%">
+    <Box slot="left" title="About">
+      <ContainerDualColumn leftWidth="34%" rightWidth="63%">
         <Thumbnail
+          slot="left"
           imageData={{
             altText:
               "A picture of Ferris, the Rust mascot. An orange crab plushie.",
@@ -33,22 +26,61 @@
             ],
           }}
         />
-      </div>
-    </div>
+        <Paragraph slot="right">
+          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>
     </Box>
-</ContainerSlim>
 
-<style lang="scss">
-  .text-and-image {
-    .text {
-      display: box;
-      width: 63%;
-      margin-right: 3%;
-    }
+    <div slot="right">
+      <Box title="Socials" color="green">
+        Fediverse: <code>@trivernis@social.funkyfish.cool</code>
+        <br>
+        Matrix: <code>@trivernis:trivernis.net</code>
+        Email: <code>me@trivernis.net</code>
+      </Box>
+      <Box title="Links" color="cyan">
+        <h3>My other Websites</h3>
+        <ul>
+          <li>
+            <a href="https://plantwiki.trivernis.net">Plantwiki</a>
+            (<a href="https://plantwiki.trivernis.dev">Dev</a>)
+          </li>
+          <li>
+            <a href="https://no-chromium.org">No Chromium</a>
+          </li>
+        </ul>
+
+        <h3>Me on other Platforms</h3>
+        <ul>
+          <li>
+            <a href="https://github.com/trivernis">GitHub</a>
+          </li>
+          <li>
+            <a href="https://codeberg.org/trivernis">Codeberg</a>
+          </li>
+        </ul>
 
-    .image {
-      display: box;
-      width: 34%;
-    }
-  }
-</style>
+        <h3>My selfhosted stuff</h3>
+        <ul>
+          <li>
+            <a href="https://git.trivernis.net">Forgejo</a>
+          </li>
+          <li>
+            <a href="https://social.funkyfish.cool">Sharkey (Fediverse)</a>
+          </li>
+          <li>
+            <a href="https://lychee.trivernis.net">Lychee</a>
+          </li>
+          <li>
+            <a href="https://search.trivernis.net">SearchXNG</a>
+          </li>
+        </ul>
+      </Box>
+    </div>
+  </ContainerDualColumn>
+</ContainerMedium>