From 682b90cc36eec20ec051fb6918302d4f43557f42 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Thu, 2 Apr 2026 16:58:30 +0200
Subject: [PATCH] main page sidebar now responds to narrow screen width

---
 src/routes/+page.svelte | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f35799c..14cabeb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -102,9 +102,9 @@
         <div>
             <img class="me-img pixelated-img" src="me.webp" alt="Pixelated mirror selfie of the website creator wearing a green shirt, fitting the website theme. The face is obscured." title="hi!">
 
-            <p>Hi! I'm Deniz. Welcome to my website! I keep rewriting this introduction but I'm REALLY bad at this type of stuff.</p>
+            <p>Hi! I'm Deniz. Welcome to my website! I keep rewriting this introduction because I'm REALLY bad at this type of stuff.</p>
             <p>I made this website because I really don't like modern social media and I wanted a more creative way of expressing myself without giving in to the attention economy or submitting all my data including my soul to some megacorp. That's why you'll find a bunch of stuff here that interests me: programming, gamedev, 3D modelling, electronic music, drawing, electronics and microcontroller programming, Linux and self-hosting, and probably some other stuff too. I am currently developing at least one game and I am also posting random things on my blog, both of which you can find linked above and below.</p>
-            <p>I listen to A LOT of music (fav artists: <a href="https://acloudyskye.bandcamp.com/">acloudyskye</a>, <a href="https://jaronsteele.bandcamp.com/">Jaron</a>, <a href="https://janeremover.bandcamp.com/">Jane Remover</a>) and I enjoy dabbling around in <a href="https://godotengine.org/">Godot</a> and <a href="https://blender.org/">Blender</a>. I also use <a href="https://fedoraproject.org/">Fedora KDE</a>... btw. Want to know more about me and this website? Firstly, <i>why?</i> But also, <a href="/meta/about">here</a>!</p>
+            <p>I listen to A LOT of music (fav artists: <a href="https://acloudyskye.bandcamp.com/">acloudyskye</a>, <a href="https://jaronsteele.bandcamp.com/">Jaron</a>, <a href="https://janeremover.bandcamp.com/">Jane Remover</a>) and I enjoy dabbling around in <a href="https://godotengine.org/">Godot</a>, <a href="https://blender.org/">Blender</a>, and <a href="https://krita.org/">Krita</a>. I also use <a href="https://fedoraproject.org/">Fedora KDE</a>... btw. Want to know more about me and this website? Firstly, <i>why?</i> But also, <a href="/meta/about">here</a>!</p>
             <p>irl I am from 🇩🇪 Northern Germany and studying to become a secondary school teacher.</p>
         </div>
 
@@ -179,7 +179,8 @@
 <style>
     .split-intro-container {
         display: grid;
-        grid-template-columns: 3fr 1fr;   
+        grid-template-columns: 3fr 30%;
+        gap: 16px;
     }
 
     .button-container {
@@ -211,7 +212,7 @@
     }
 
     .sidebox-container {
-        padding: 8px 24px;
+        padding: 8px 16px;
         backdrop-filter: blur(var(--blur-radius-background));
         border-width: var(--border-dash-size);
         border-style: var(--border-style);
@@ -293,4 +294,11 @@
         margin: 4px 0 12px 0;
         display: block;
     }
+
+    @media screen and (max-width: 900px) {
+        .split-intro-container {
+            display: flex;
+            flex-direction: column;
+        }
+    }
 </style>
\ No newline at end of file