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

merged main page and devlog galleries to common lib

Browse Source
This commit is contained in:
denizk0461
2026-01-21 22:08:09 +01:00
parent 7e5130783f
commit 6c28a4c5f3
6 changed files with 130 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/lib/lists/gallery-entry.svelte
View File

@@ -1,91 +0,0 @@
<script lang="ts">
export interface GalleryEntry {
title: string;
subtitle: string;
fullWidth: boolean;
img: string;
imgAlt: string;
link: string;
}
let {
entries,
}: {
entries: GalleryEntry[];
} = $props();
</script>
<div class="container">
{#each entries as entry}
{#if entry.fullWidth}
<div class="entry-parent full-width notched">
{@render galleryEntry({entry})}
</div>
{:else}
<div class="entry-parent half-width notched">
{@render galleryEntry({entry})}
</div>
{/if}
{/each}
</div>
{#snippet galleryEntry({entry}: {entry: GalleryEntry})}
<a class="entry" href="{entry.link}">
<img src="{entry.img}" alt="{entry.imgAlt}">
<p class="wide-font">{entry.title}</p>
<p>{@html entry.subtitle}</p>
</a>
{/snippet}
<style>
.container {
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
/* flex-flow: row wrap; */
justify-content: left;
padding: 4px;
}
.entry-parent {
display: flex;
}
.entry {
width: 100%;
margin: 4px;
padding-bottom: 20px;
background-color: var(--color-background-highlight);
text-decoration: none; /* removes link underline */
transition: background-color 0.16s ease-in-out;
}
.entry:hover {
background-color: var(--color-background-highlight-hover);
}
.entry img {
width: 100%;
object-fit: cover;
max-height: 300px;
}
.entry p {
margin: 0 32px;
}
/* gallery entry header */
.entry p:nth-child(2) {
font-size: 20px;
margin-top: 12px;
font-family: var(--font-title);
font-size: 1.2rem;
font-weight: 800;
font-style: italic;
}
.half-width {
width: 50%;
}
.full-width {
width: 100%;
}
</style>

109
src/lib/lists/gallery.svelte Normal file
View File

@@ -0,0 +1,109 @@
<script lang="ts">
export interface GalleryEntry {
title: string;
subtitle: string;
img: string;
imgAlt: string;
link: string;
}
let {
entries,
reverseTextOrder,
}: {
entries: GalleryEntry[];
reverseTextOrder?: boolean;
} = $props();
</script>
<div class="post-list">
{#each entries as entry}
{@render galleryEntry({entry, reverseTextOrder})}
{/each}
</div>
{#snippet galleryEntry({entry, reverseTextOrder}: {entry: GalleryEntry, reverseTextOrder?: boolean})}
<!-- {#snippet galleryEntry({key, post, index}: {key: string, post: DevlogPost, index: number})} -->
<a class="gallery-container" href="{entry.link}">
<img class="gallery-img" src="{entry.img}" alt="{entry.imgAlt}">
<div class="gallery-text-container">
{#if reverseTextOrder}
<p class="gallery-date">{@html entry.subtitle}</p>
<p class="gallery-title">{entry.title}</p>
{:else}
<p class="gallery-title">{entry.title}</p>
<p class="gallery-date">{@html entry.subtitle}</p>
{/if}
</div>
</a>
{/snippet}
<style>
:root {
--color-laura: #C76668CC;
--color-laura-darker: #A55051CC;
}
.post-list {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
.gallery-container {
box-sizing: content-box;
height: 80px;
display: flex;
flex-direction: row;
text-decoration: none;
align-items: center;
margin: 6px 0;
}
.gallery-img {
width: 145px;
height: 100%;
margin: 0;
object-fit: cover;
filter: grayscale(60%);
transition: filter 0.1s ease-out;
}
.gallery-text-container {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
padding-left: 16px;
border-style: dashed;
justify-content: center;
border-color: transparent;
border-width: 2px;
border-left: none;
transition: border-color 0.1s ease-out;
}
.gallery-date, .gallery-title {
margin: 0;
transition: color 0.1s ease-out;
}
.gallery-date {
font-size: 1.0rem;
}
.gallery-title {
font-family: var(--font-mono);
font-weight: 700;
}
.gallery-container:hover .gallery-text-container {
border-color: var(--color-highlight);
}
.gallery-container:hover .gallery-img {
filter: grayscale(0%);
}
.gallery-container:hover p {
color: var(--color-highlight);
}
</style>

3
src/lib/table-of-contents.svelte
View File

@@ -81,10 +81,9 @@
<style> <style>
:global { :global {
.toc-container { .toc-container {
width: 80%; width: 70%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background-color: var(--color-background-highlight); background-color: var(--color-background-highlight);
padding: 16px 0; padding: 16px 0;
} }

12
src/routes/+page.svelte
View File

@@ -2,12 +2,11 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
import Content from "$lib/content.svelte"; import Content from "$lib/content.svelte";
import GamedevWebring from "$lib/webrings/gamedev.svelte"; import GamedevWebring from "$lib/webrings/gamedev.svelte";
import Gallery from "$lib/lists/gallery-entry.svelte"; import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte";
import LinkList from "$lib/link-list.svelte"; import LinkList from "$lib/link-list.svelte";
import { quotes, type Quote } from "./quotes"; import { quotes, type Quote } from "./quotes";
import { posts, type DevlogPost } from "./projects/projectn5/devlog/posts"; import { posts } from "./projects/projectn5/devlog/posts";
import { type GalleryEntry } from "$lib/lists/gallery-entry.svelte";
let meImg: string = $state("common/me/a.webp"); let meImg: string = $state("common/me/a.webp");
let marqueeQuote: Quote = $state({ let marqueeQuote: Quote = $state({
@@ -20,8 +19,7 @@
const galleryEntries: GalleryEntry[] = [ const galleryEntries: GalleryEntry[] = [
{ {
title: "Project N5 – devlog", title: "Project N5 – devlog",
subtitle: `my active Godot game project about finding yourself in an unfamiliar future.\n<i>latest update: ${latestDevlogDate}</i>`, subtitle: `my active Godot game project about finding yourself in an unfamiliar future. <i>latest update: ${latestDevlogDate}</i>`,
fullWidth: true,
img: "projects/projectn5/devlog/2025/0523/birds_eye.webp", img: "projects/projectn5/devlog/2025/0523/birds_eye.webp",
imgAlt: "Project N5 screenshot of Laura looking down at two cuboids", imgAlt: "Project N5 screenshot of Laura looking down at two cuboids",
link: "projects/projectn5/devlog", link: "projects/projectn5/devlog",
@@ -29,15 +27,13 @@
{ {
title: "Projects", title: "Projects",
subtitle: "an overview of what I do and have done", subtitle: "an overview of what I do and have done",
fullWidth: false,
img: "projects/project-mix.webp", img: "projects/project-mix.webp",
imgAlt: "A collage of multiple projects: the Unity default third-person character and CJ from GTA San Andreas in the top left; purple protagonist from Project N5 holding a massive rocket launcher in the top right; two wizards in the bottom left; a breadboard with a microcontroller and input components in the bottom right", imgAlt: "A collage of multiple projects: the Unity default third-person character and CJ from GTA San Andreas in the top left; purple protagonist from Project N5 holding a massive rocket launcher in the top right; two wizards in the bottom left; a breadboard with a microcontroller and input components in the bottom right",
link: "projects", link: "projects",
}, },
{ {
title: "Files", title: "Files",
subtitle: "find things I've put for download on my <a href='https://github.com/9001/copyparty'>copyparty</a> instance", subtitle: "find things I've put for download on my copyparty instance",
fullWidth: false,
img: "common/hypertext.webp", img: "common/hypertext.webp",
imgAlt: "Screenshot of Hypertext Unity level. Crates are strewn across the floor, Waluigi is flying in front of the camera, and text such as 'COME AND TRY OUR ALL-NEW BLENDER' and 'omg! it's the brandenburg er tor!' is displayed", imgAlt: "Screenshot of Hypertext Unity level. Crates are strewn across the floor, Waluigi is flying in front of the camera, and text such as 'COME AND TRY OUR ALL-NEW BLENDER' and 'omg! it's the brandenburg er tor!' is displayed",
link: "//files.denizk0461.dev/", link: "//files.denizk0461.dev/",

12
src/routes/projects/+page.svelte
View File

@@ -5,16 +5,6 @@
import { projects } from './projects'; import { projects } from './projects';
import LinkList from "$lib/link-list.svelte"; import LinkList from "$lib/link-list.svelte";
import Content from "$lib/content.svelte"; import Content from "$lib/content.svelte";
let getActiveProjects = function(projects: Project[], isActive: boolean): Project[] {
var result: Project[] = [];
projects.forEach(project => {
if (project.isActive == isActive) {
result.push(project);
}
});
return result;
}
</script> </script>
<svelte:head> <svelte:head>
@@ -123,7 +113,7 @@
color: var(--color-text-dark); color: var(--color-text-dark);
background-color: var(--color-highlight); background-color: var(--color-highlight);
font-family: var(--font-stylised); font-family: var(--font-sans-serif);
padding: 4px; padding: 4px;
} }

237
src/routes/projects/projectn5/devlog/+page.svelte
View File

@@ -3,6 +3,19 @@
import Content from "$lib/content.svelte"; import Content from "$lib/content.svelte";
// import type { DevlogPost } from "./devlog-posts"; // import type { DevlogPost } from "./devlog-posts";
import { posts, type DevlogPost } from "./posts"; import { posts, type DevlogPost } from "./posts";
import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte";
let entries: GalleryEntry[] = posts.entries().map(mapEntries).toArray();
function mapEntries(m: [String, DevlogPost], index: number): GalleryEntry {
return {
title: `${m[1].title}`,
subtitle: `#${posts.size - index} // ${m[1].date}`,
img: `/projects/projectn5/devlog/${m[0]}/preview.webp`,
link: `/projects/projectn5/devlog/${m[0]}/`,
imgAlt: `Preview image for ${m[1].title}`,
};
}
// Leftpads a single-digit number to two digits // Leftpads a single-digit number to two digits
function leftpad(n: number): String { function leftpad(n: number): String {
@@ -28,227 +41,5 @@
<p>2023 progress updates summarise an entire month's work, respectively. Progress updates thereafter denote noteworthy developments in a more collected format.</p> <p>2023 progress updates summarise an entire month's work, respectively. Progress updates thereafter denote noteworthy developments in a more collected format.</p>
<div class="post-list"> <Gallery entries={entries} reverseTextOrder />
{#each posts.entries() as [key, post], index}
{@render devlogPost2({key, post, index})}
{/each}
</div>
</Content> </Content>
{#snippet devlogPost2({key, post, index}: {key: string, post: DevlogPost, index: number})}
<a class="post2-container" href="/projects/projectn5/devlog/{key}/">
<img class="post2-img" src="/projects/projectn5/devlog/{key}/preview.webp" alt="Preview image for devlog {post.title}">
<div class="post2-text-container">
<p class="post2-date"><span class="post2-number">#{posts.size - index}</span> // {post.date}</p>
<p class="post2-title">{post.title}</p>
</div>
</a>
{/snippet}
<style>
:root {
--color-laura: #C76668CC;
--color-laura-darker: #A55051CC;
}
.post-list {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
.post2-container {
box-sizing: content-box;
height: 80px;
display: flex;
flex-direction: row;
text-decoration: none;
align-items: center;
margin: 6px 0;
/* gap: 16px; */
}
.post2-img {
width: 145px;
height: 100%;
margin: 0;
object-fit: cover;
filter: grayscale(60%);
transition: filter 0.1s ease-out;
}
.post2-text-container {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
padding-left: 16px;
border-style: dashed;
justify-content: center;
border-color: transparent;
border-width: 2px;
border-left: none;
transition: border-color 0.1s ease-out;
}
.post2-date, .post2-title, .post2-number {
margin: 0;
transition: color 0.1s ease-out;
}
.post2-date, .post2-number {
font-size: 1.0rem;
}
.post2-number {
color: var(--color-highlight);
font-weight: 700;
}
.post2-title {
font-family: var(--font-mono);
font-weight: 700;
}
.post2-container:hover .post2-text-container {
/* background-color: var(--color-background-highlight-hover); */
border-color: var(--color-highlight);
}
.post2-container:hover .post2-img {
filter: grayscale(0%);
}
.post2-container:hover p{/*}, .post2-container:hover .post2-number {*/
color: var(--color-highlight);
}
.post {
text-decoration: none;
background-color: #00000044;
display: flex;
flex-direction: row;
justify-content: flex-start;
padding: 16px;
transition: background-color 0.16s ease-in-out;
margin: 4px;
--notch-size-devlog: 30px;
--notch-size-devlog-img: 24px;
clip-path: polygon(
0% var(--notch-size-devlog),
var(--notch-size-devlog) 0%,
calc(100% - var(--notch-size-devlog)) 0%,
100% var(--notch-size-devlog),
100% calc(100% - var(--notch-size-devlog)),
calc(100% - var(--notch-size-devlog)) 100%,
var(--notch-size-devlog) 100%,
0% calc(100% - var(--notch-size-devlog))
);
}
.post:hover {
background-color: var(--color-background-highlight-hover);
}
.post:hover .post-title, .post:hover .post-date {
color: var(--color-text-dark);
}
.post:hover .post-img-container {
background-color: transparent;
}
.post-img-container {
position: relative;
height: fit-content;
width: fit-content;
/* background-color: var(--color-background-highlight-hover); */
transition: background-color 0.16s ease-in-out;
clip-path: polygon(
0% var(--notch-size-devlog-img),
var(--notch-size-devlog-img) 0%,
calc(100% - var(--notch-size-devlog-img)) 0%,
100% var(--notch-size-devlog-img),
100% calc(100% - var(--notch-size-devlog-img)),
100% 100%,
var(--notch-size-devlog-img) 100%,
0% calc(100% - var(--notch-size-devlog-img))
);
}
.post-img {
width: 125px;
height: 100px;
margin: 0;
object-fit: cover;
clip-path: polygon(
0% 0%,
100% 0%,
100% 0%,
100% 0%,
100% calc(100% - var(--notch-size-devlog-img)),
calc(100% - var(--notch-size-devlog-img)) 100%,
0% 100%,
0% 100%
);
}
.post-text-container {
display: flex;
flex-direction: column;
padding-left: 24px;
justify-content: center;
}
.post-date, .post-title {
font-family: 'Space Mono', monospace;
margin: 4px 0;
transition: color 0.16s ease-in-out;
}
.post-date {
font-size: 0.8rem;
line-height: 0.7rem;
font-weight: 500;
}
.post-title {
font-size: 1.1rem;
line-height: 1.4rem;
font-weight: 700;
}
@media screen and (max-width: 1250px) {
.post-supercontainer {
width: 50% !important;
}
}
@media screen and (max-width: 700px) {
.post-supercontainer {
width: 100% !important;
}
}
@media screen and (max-width: 800px) {
.post {
--notch-size-devlog: 18px;
--notch-size-devlog-img: 12px;
}
.post-img {
width: 100px;
height: 70px;
}
.post-date {
font-size: 0.8rem;
line-height: 0.9rem;
}
.post-title {
font-size: 1.0rem;
line-height: 1.1rem;
}
}
</style>