denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main page shenanigans; added dateUpdate attribute to blog posts; updated banner to display them

Browse Source
This commit is contained in:
denizk0461
2026-04-02 15:50:30 +02:00
parent 3484efc498
commit f932793b62
6 changed files with 97 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/lib/banner2.svelte
View File

@@ -1,7 +1,8 @@
<script lang="ts">
let {
title,
date = "",
date = "", // date posted
dateUpdated = "",
subtitle = "",
banner = "",
bannerAlt = "",
@@ -9,6 +10,7 @@
}: {
title: string;
date?: string;
dateUpdated?: string;
subtitle?: string;
banner?: string;
bannerAlt?: string;
@@ -19,14 +21,21 @@
{#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
<div class="title-container">
<div class="title-text-container">
<h1 class="title">{title}</h1>
{#if subtitle}
<p class="subtitle">[ {subtitle} ]</p>
{/if}
</div>
{#if date}
<p class="date">» {date}</p>
<div class="date-container">
<p class="date">posted :: {date}</p>
{#if dateUpdated}
<p class="date">last updated :: {dateUpdated}</p>
{/if}
</div>
{/if}
</div>
{/snippet}
<div class="container">
@@ -55,8 +64,8 @@
.title-container {
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 12px;
/* align-items: flex-end; */
gap: 16px;
margin: var(--margin-header-top) 0 var(--margin-header-bottom) 0;
}
@@ -65,6 +74,19 @@
margin-top: 16px;
}
.title-text-container {
width: fit-content;
flex: 1;
}
.date-container {
width: fit-content;
display: flex;
flex-direction: column;
align-items: flex-end;
margin-bottom: 12px;
}
.title {
box-sizing: border-box;
height: fit-content;
@@ -72,14 +94,18 @@
}
.date {
font-weight:700;
font-size: 1.3rem;
margin-top: 0;
font-weight: 500;
font-family: var(--font-mono);
font-size: 1.0rem;
line-height: 1.4rem;
font-style: italic;
margin: 0;
color: var(--color-highlight);
}
.subtitle {
font-family: var(--font-mono);
/* width: fit-content; */
font-weight: 500;
font-size: 1.0rem;
margin: 0;

2
src/routes/+layout.svelte
View File

@@ -148,7 +148,7 @@
--font-lightyears: 'LIGHTYEARS', sans-serif;
--font-size-h1: 2.0rem;
--font-size-h1: 2.2rem;
--font-size-h2: 1.5rem;
--font-size-h3: 1.3rem;
--font-size-h4: 1.2rem;

101
src/routes/+page.svelte
View File

@@ -98,8 +98,8 @@
<hr>
<div class="split-intro-container">
<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>
@@ -108,30 +108,34 @@
<p>irl I am from 🇩🇪 Northern Germany and studying to become a secondary school teacher.</p>
</div>
<div class="split-container">
<div class="meta-vertical-container">
<div class="meta-container info-container">
<a class="status-header-link" href="/"><h4 class="update-header">latest status</h4></a>
<p class="status-content">{latestStatusContent}</p>
<span class="status-timestamp">:: {latestStatusTimestamp}</span>
</div>
<div class="meta-container info-container">
<h4 class="update-header">heads-up</h4>
<div>
<div class="sidebox-container">
<h4 class="sidebox-header">heads-up</h4>
<p>This website works best on Firefox and other Gecko-based browsers! All pages <i>should</i> be responsive and work on mobile.</p>
<hr>
<a class="sidebox-header-link" href="/"><h4 class="sidebox-header">latest status</h4></a>
<p class="status-content">"{latestStatusContent}"</p>
<span class="status-timestamp">:: {latestStatusTimestamp}</span>
<!-- <hr>
<a class="sidebox-header-link" href="/meta/updates"><h4 class="sidebox-header">website updates <span class="small-supertext">(new!)</span></h4></a>
{#each updateEntriesTrimmed as entry}
<UpdateEntry {entry} />
{/each} -->
</div>
</div>
</div>
<div class="meta-container update-container">
<a class="update-header-link" href="/meta/updates"><h4 class="update-header">website updates <span class="small-supertext">(new!)</span></h4></a>
{#each updateEntriesTrimmed as entry}
<UpdateEntry {entry} />
{/each}
</div>
</div>
<hr>
<GalleryRow entries={galleryTopRow} />
<GalleryRow entries={galleryBottomRow} />
<hr>
<div class="split-container">
<div class="webring-container">
<h4 class="update-header">webrings</h4>
@@ -174,6 +178,11 @@
</Content>
<style>
.split-intro-container {
display: grid;
grid-template-columns: 3fr 1fr;
}
.split-container {
width: 100%;
display: flex;
@@ -219,36 +228,24 @@
margin-right: 12px;
}
.meta-vertical-container {
flex: 3;
display: flex;
flex-direction: column;
gap: 8px;
}
.meta-container {
.sidebox-container {
padding: 8px 24px;
backdrop-filter: blur(var(--blur-radius-background));
border-width: var(--border-dash-size);
border-style: var(--border-style);
border-color: var(--color-highlight-alt);
/* transition: border-radius var(--duration-animation) var(--anim-curve); */
/* border-radius: var(--border-radius); */
}
.info-container {
.sidebox-container hr {
border-color: var(--color-highlight-alt);
}
.info-container p, .info-container a {
font-size: 1.0rem;
line-height: 1.4rem;
}
.info-container > h4 {
color: var(--color-highlight-alt);
margin: 16px 0;
}
.update-container {
border-color: var(--color-highlight);
flex: 4;
.sidebox-container p, .sidebox-container a {
font-size: 0.9rem;
line-height: 1.3rem;
}
.status-content {
@@ -278,27 +275,23 @@
padding-bottom: 16px;
}
.update-header-link, .status-header-link {
text-decoration: none;
}
.update-header-link:hover {
text-decoration-color: var(--color-highlight);
}
.status-header-link:hover {
text-decoration-color: var(--color-highlight-alt);
}
.update-header-link:hover, .status-header-link:hover {
text-decoration-line: underline;
text-decoration-style: dashed;
text-decoration-thickness: var(--border-dash-size);
}
.status-header-link .update-header {
.sidebox-header {
font-size: 1.0rem;
line-height: 1.0rem;
margin-top: 8px;
color: var(--color-highlight-alt);
}
.update-header {
margin-top: 8px;
.sidebox-header-link {
text-decoration: none;
}
.sidebox-header-link:hover {
text-decoration-color: var(--color-highlight-alt);
}
.sidebox-header-link:hover {
text-decoration-line: underline;
text-decoration-style: dashed;
text-decoration-thickness: var(--border-dash-size);
}
.gradient-title {

3
src/routes/blog/[year]/[date]/+page.svelte
View File

@@ -15,7 +15,8 @@
<Content>
<Banner2
title="{data.title}"
date="{data.date}, {data.time}"
date="{data.date}"
dateUpdated="{data.dateUpdated}"
banner="{data.banner}"
bannerAlt="Banner for blog post '{data.title}'" />

2
src/routes/blog/[year]/[date]/+page.ts
View File

@@ -8,6 +8,7 @@ export async function load({ params }) {
const content = post.default;
const title: string = postValues?.title ?? "";
const date: string = postValues?.date ?? "";
const dateUpdated: string = postValues?.dateUpdated ?? "";
const time: string = postValues?.time ?? "";
const banner: string = postValues?.banner ?? "";
const description: string = postValues?.description ?? "";
@@ -17,6 +18,7 @@ export async function load({ params }) {
title,
banner,
date,
dateUpdated,
time,
tag,
description,

4
src/routes/blog/posts.ts
View File

@@ -4,6 +4,8 @@ export interface BlogPostDetails {
// Format: HH:mm
time: string;
dateUpdated?: string;
// Banner image title. If empty, defaults to banner.webp
banner: string;
bannerAlt: string;
@@ -67,6 +69,7 @@ export const posts: BlogPostLink[] = [
post: {
date: "2026-03-17",
time: "17:00",
dateUpdated: "2026-03-25",
banner: "banner.webp",
bannerAlt: "A Microsoft Surface Pro 8 displaying a Blue Screen of Death.",
title: "How To: Set Up SvelteKit Frontend + PostgreSQL Backend",
@@ -110,6 +113,7 @@ export const posts: BlogPostLink[] = [
post: {
date: "2026-02-05",
time: "22:55",
dateUpdated: "2026-03-05",
banner: "banner.webp",
bannerAlt: "A Leuchtturm-branded notebook with a copper-coloured cover. An eraser, a pencil sharpener, and a Faber-Castell pencil are lying on top.",
title: "Drawing Challenge",