adjusted sizing and spacing of body and header text, images, video

This commit is contained in:
2026-01-21 15:21:21 +01:00
parent 6d9cd1cc4b
commit 01feb485bf
15 changed files with 162 additions and 333 deletions

View File

@@ -72,46 +72,39 @@
<Content>
<h1 class="gradient-title"><i>Moin!</i> ~ welcome to my website :)</h1>
<div class="container">
<div class="subcontainer">
<Gallery entries={galleryEntries}/>
</div>
<div class="subcontainer">
<div class="quote-marquee-container">
{@render marqueeContent({quote: marqueeQuote, ignoreA11y: false})}
{@render marqueeContent({quote: marqueeQuote, ignoreA11y: true})}
{@render marqueeContent({quote: marqueeQuote, ignoreA11y: true})}
</div>
<h3>about ↬<img id="me-img" class="me-img" title="hi there" src={meImg} alt="Deniz, the website developer, small and pixelated">↫ me </h3>
<p>Hi! I'm Deniz. I'm a programmer, sometimes a music producer, and student from Northern Germany. Welcome to my webpage!</p>
<p>I share my projects on this website. Check them out the devlog of the game I'm working on especially!</p>
<h3>where to find me</h3>
<LinkList entries={[
{
icon: "icons/bluesky.svg",
text: "Bluesky",
link: "https://bsky.app/profile/denizk0461.dev",
},
{
icon: "icons/codeberg.svg",
text: "Codeberg",
link: "https://codeberg.org/denizk0461",
},
{
icon: "icons/github.svg",
text: "GitHub",
link: "https://github.com/denizk0461",
},
]}/>
<GamedevWebring />
</div>
<div class="quote-marquee-container">
{@render marqueeContent({quote: marqueeQuote, ignoreA11y: false})}
{@render marqueeContent({quote: marqueeQuote, ignoreA11y: true})}
{@render marqueeContent({quote: marqueeQuote, ignoreA11y: true})}
</div>
<h3>about ↬<img id="me-img" class="me-img" title="hi there" src={meImg} alt="Deniz, the website developer, small and pixelated">↫ me </h3>
<p>Hi! I'm Deniz. I'm a programmer, sometimes a music producer, and student from Northern Germany. Welcome to my webpage! I share my projects on this website. Check them out the devlog of the game I'm working on especially!</p>
<h3>where to find me</h3>
<LinkList entries={[
{
icon: "icons/bluesky.svg",
text: "Bluesky",
link: "https://bsky.app/profile/denizk0461.dev",
},
{
icon: "icons/codeberg.svg",
text: "Codeberg",
link: "https://codeberg.org/denizk0461",
},
{
icon: "icons/github.svg",
text: "GitHub",
link: "https://github.com/denizk0461",
},
]}/>
<GamedevWebring />
<Gallery entries={galleryEntries} />
</Content>
{#snippet marqueeContent({quote, ignoreA11y}: {quote: Quote, ignoreA11y: boolean})}
@@ -119,24 +112,17 @@
{/snippet}
<style>
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
.subcontainer {
max-width: 50%;
}
.subcontainer:last-child {
margin-left: 16px;
}
.me-img {
width: 32px;
display: inline-block;
}
.gradient-title {
background: -webkit-linear-gradient(0deg, #96C9DC, #9CE391, #E03E59);
background: linear-gradient(
90deg,
var(--color-highlight) 30%,
var(--color-highlight-alt) 90%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@@ -173,18 +159,4 @@
transform: translateX( -100% );
}
}
@media screen and (max-width: 800px) {
.container {
flex-direction: column-reverse;
}
.subcontainer {
max-width: 100%;
}
.subcontainer:last-child {
margin-left: 0px;
}
}
</style>