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,77 +19,100 @@
       <div class="border-right"></div>
     </div>
   {/if}
-  <slot/>
+  <slot />
 </div>
 
 <style lang="scss">
-@layer component {
+  @layer component {
-  .box {
+    .box {
-    position: relative;
+      position: relative;
-    --box-border-color: color-mix(in srgb, var(--box-color), #fff 65%);
+      --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,
-    padding: 1em;
+        var(--box-color),
-    border: 5px solid var(--box-border-color);
+        var(--color-foreground) 90%
-    border-radius: 10px;
+      );
-    margin: auto;
-    height: auto;
-    width: 100%;
-    box-shadow: 0 0 20px var(--box-color), inset 0 0 20px var(--box-color);
-
-    &.with-title {
-      margin-top: 2em;
-      border-top: transparent;
-      padding-top: 1.25em;
-    }
 
-    
+      border: 5px solid var(--box-border-color);
-    .box-title {
-      display: flex;
-      width: calc(100% + 10px);
-      flex-direction: row;
-
-
-      position: absolute;
-      top: 0;
-      left: -5px;
-      height: 1.5em; 
-      font-size: 1.5em;
       border-radius: 10px;
+      margin: auto;
+      height: auto;
+      width: 100%;
+      box-shadow:
+        0 0 20px var(--box-color),
+        inset 0 0 20px var(--box-color);
+
+      &.with-title {
+        border-top: transparent;
+        margin-top: 2em;
 
-      .title-label {
+        &.margin-slim {
-        transform: translateY(-1em);
+          padding-top: 1.25em;
-        padding: 0.25em;
+        }
-        border-radius: 10%;
+        &.margin-medium {
-        color: var(--box-text-color);
+          padding-top: 1.75em;
-        text-shadow: 0 0 20px var(--box-color);
+        }
-        z-index: 99;
+        &.margin-wide {
+          padding-top: 2.25em;
+        }
       }
 
-      .border-left {
+      &.margin-slim {
-        width: 1.2em;
+        padding: 1em;
-        border-top-left-radius: 10px;
-        border-left: 5px solid var(--box-border-color);
       }
-      .border-right {
+      &.margin-medium {
-        width: 100%;
+        padding: 1.5em;
-        border-top-right-radius: 10px;
-        border-right: 5px solid var(--box-border-color);
       }
-      
+      &.margin-wide {
-      .border-right, .border-left {
+        padding: 2em;
-        border-top: 5px solid var(--box-border-color);
       }
 
-      .left-end-cap, .right-end-cap {
+      .box-title {
-        width: 10px;
+        display: flex;
-        height: 7px;
+        width: calc(100% + 10px);
-        transform: translateY(-1px);
+        flex-direction: row;
-        background: var(--color-foreground);
+
-        z-index: 100;
+        position: absolute;
+        top: 0;
+        left: -5px;
+        height: 1.5em;
+        font-size: 1.5em;
+        border-radius: 10px;
+
+        .title-label {
+          transform: translateY(-1em);
+          padding: 0.25em;
+          border-radius: 10%;
+          color: var(--box-text-color);
+          text-shadow: 0 0 20px var(--box-color);
+          z-index: 99;
+        }
+
+        .border-left {
+          width: 1.2em;
+          border-top-left-radius: 10px;
+          border-left: 5px solid var(--box-border-color);
+        }
+        .border-right {
+          width: 100%;
+          border-top-right-radius: 10px;
+          border-right: 5px solid var(--box-border-color);
+        }
+
+        .border-right,
+        .border-left {
+          border-top: 5px solid var(--box-border-color);
+        }
+
+        .left-end-cap,
+        .right-end-cap {
+          width: 10px;
+          height: 7px;
+          transform: translateY(-1px);
+          background: var(--color-foreground);
+          z-index: 100;
+        }
       }
     }
   }
-
-}
 </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">
+  <ContainerDualColumn leftWidth="65%" rightWidth="35%">
-    <div class="flex-row text-and-image">
+    <Box slot="left" title="About">
-      <div class="text">
+      <ContainerDualColumn leftWidth="34%" rightWidth="63%">
-        <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
+          slot="left"
           imageData={{
             altText:
               "A picture of Ferris, the Rust mascot. An orange crab plushie.",
@@ -33,22 +26,61 @@
             ],
           }}
         />
-      </div>
+        <Paragraph slot="right">
-    </div>
+          Heyyy. I'm a software developer and tinkerer from Germany. I do a lot
-  </Box>
+          of stuff so this website is an attempt in providing an overview.
-</ContainerSlim>
+          <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>
+
+    <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>
 
-<style lang="scss">
+        <h3>Me on other Platforms</h3>
-  .text-and-image {
+        <ul>
-    .text {
+          <li>
-      display: box;
+            <a href="https://github.com/trivernis">GitHub</a>
-      width: 63%;
+          </li>
-      margin-right: 3%;
+          <li>
-    }
+            <a href="https://codeberg.org/trivernis">Codeberg</a>
+          </li>
+        </ul>
 
-    .image {
+        <h3>My selfhosted stuff</h3>
-      display: box;
+        <ul>
-      width: 34%;
+          <li>
-    }
+            <a href="https://git.trivernis.net">Forgejo</a>
-  }
+          </li>
-</style>
+          <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>