main page sidebar now responds to narrow screen width

This commit is contained in:
2026-04-02 16:58:30 +02:00
parent 65427bd47d
commit 682b90cc36

View File

@@ -102,9 +102,9 @@
<div> <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!"> <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 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> <p>irl I am from 🇩🇪 Northern Germany and studying to become a secondary school teacher.</p>
</div> </div>
@@ -179,7 +179,8 @@
<style> <style>
.split-intro-container { .split-intro-container {
display: grid; display: grid;
grid-template-columns: 3fr 1fr; grid-template-columns: 3fr 30%;
gap: 16px;
} }
.button-container { .button-container {
@@ -211,7 +212,7 @@
} }
.sidebox-container { .sidebox-container {
padding: 8px 24px; padding: 8px 16px;
backdrop-filter: blur(var(--blur-radius-background)); backdrop-filter: blur(var(--blur-radius-background));
border-width: var(--border-dash-size); border-width: var(--border-dash-size);
border-style: var(--border-style); border-style: var(--border-style);
@@ -293,4 +294,11 @@
margin: 4px 0 12px 0; margin: 4px 0 12px 0;
display: block; display: block;
} }
@media screen and (max-width: 900px) {
.split-intro-container {
display: flex;
flex-direction: column;
}
}
</style> </style>