From 4f9bd66b2c33413bc0b05d23c3dd1d0dd3001435 Mon Sep 17 00:00:00 2001 From: denizk0461 Date: Wed, 8 Apr 2026 18:06:59 +0200 Subject: [PATCH] updated homesick link list look --- ...llery.svelte => homesick-link-list.svelte} | 104 +++++++++--------- src/routes/projects/projectn5/+page.svelte | 8 +- 2 files changed, 57 insertions(+), 55 deletions(-) rename src/lib/lists/{gallery.svelte => homesick-link-list.svelte} (55%) diff --git a/src/lib/lists/gallery.svelte b/src/lib/lists/homesick-link-list.svelte similarity index 55% rename from src/lib/lists/gallery.svelte rename to src/lib/lists/homesick-link-list.svelte index 385c329..7fa3c02 100644 --- a/src/lib/lists/gallery.svelte +++ b/src/lib/lists/homesick-link-list.svelte @@ -1,5 +1,5 @@ -
+
{#each entries as entry} - {@render galleryEntry({entry})} + {@render linkEntry({entry})} {/each}
-{#snippet galleryEntry({entry}: {entry: GalleryEntry})} - - {#if entry.img && entry.img !== ""} - {entry.imgAlt} - {:else} -
- {/if} -
-

{@html entry.subtitle}

-

{entry.title}

-

{entry.description}

+{#snippet linkEntry({entry}: {entry: LinkEntry})} + +
+ {entry.imgAlt} +
+
+

{@html entry.subtitle}

+

{entry.title}

+

{entry.description}

 {/snippet} @@ -42,13 +40,13 @@ --color-laura-darker: #A55051CC; } - .post-list { + .hs-post-list { max-width: 1600px; margin-left: auto; margin-right: auto; } - .gallery-container { + .hs-list-container { box-sizing: content-box; height: 120px; display: flex; @@ -58,23 +56,26 @@ margin: 0; justify-content: center; border: var(--border-style) transparent var(--border-dash-size); + border-radius: var(--border-radius); transition: border-color var(--duration-animation) var(--anim-curve); } - .gallery-img, .gallery-img-placeholder { - width: 180px; - min-width: 180px; + .hs-list-img-container { + width: 220px; + min-width: 220px; + height: 100%; + overflow: hidden; + transition: border-radius var(--duration-animation) var(--anim-curve); + } + + .hs-list-img { + width: 100%; height: 100%; - margin: 0; object-fit: cover; - transition: width var(--duration-animation) var(--anim-curve); + transition: scale var(--duration-animation) var(--anim-curve); } - .gallery-img-placeholder { - background-color: var(--color-highlight-dark); - } - - .gallery-text-container { + .hs-list-text-container { display: grid; grid-auto-columns: 1fr; grid-template-rows: 1fr 1fr 0fr; @@ -86,84 +87,85 @@ grid-template-rows var(--duration-blur) var(--anim-curve); } - .gallery-title, .gallery-subtitle, .gallery-description { + .hs-list-title, .hs-list-subtitle, .hs-list-description { margin: 0; transition: color var(--duration-animation) var(--anim-curve), opacity var(--duration-animation) var(--anim-curve); } - .gallery-title { + .hs-list-title { font-family: var(--font-mono); font-weight: 700; } - .gallery-subtitle, .gallery-description { + .hs-list-subtitle, .hs-list-description { font-size: 1.0rem; line-height: 1.2rem; overflow: hidden; } - .gallery-description { + .hs-list-description { font-weight: 500; opacity: 0; } - .gallery-container:hover { - border-color: var(--color-highlight); - background-color: var(--color-background-highlight); - } - .gallery-container:hover p { - color: var(--color-highlight); + .hs-list-container:hover { + border-color: var(--color-highlight-alt); + background-color: var(--color-background-highlight-alt); } @media screen and (min-width: 800px) { - .gallery-title { + .hs-list-title { font-size: 1.4rem; line-height: 2.0rem; } - /* .gallery-container:hover .gallery-img, .gallery-container:hover .gallery-img-placeholder { - width: 260px; - } */ + .hs-list-container:hover .hs-list-img { + scale: 1.2; + } - .gallery-container:hover .gallery-text-container { + .hs-list-container:hover .hs-list-img-container { + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + } + + .hs-list-container:hover .hs-list-text-container { grid-template-rows: 0fr 1fr 1fr; } - .gallery-container:hover .gallery-subtitle { + .hs-list-container:hover .hs-list-subtitle { opacity: 0; } - .gallery-container:hover .gallery-description { + .hs-list-container:hover .hs-list-description { opacity: 1; } } @media screen and (max-width: 800px) { - .gallery-title { + .hs-list-title { font-size: 1.0rem; line-height: 1.1rem; } - .gallery-description { + .hs-list-description { display: none; } - .gallery-subtitle { + .hs-list-subtitle { font-size: 0.8rem; line-height: 1rem; - /* display: none; */ } - .gallery-container { + .hs-list-container { height: 72px; } - .gallery-text-container { + .hs-list-text-container { padding-left: 8px; } - .gallery-img, .gallery-img-placeholder { + .hs-list-img-container { width: 110px; min-width: 110px; } diff --git a/src/routes/projects/projectn5/+page.svelte b/src/routes/projects/projectn5/+page.svelte index 0599e80f..9532e61 100644 --- a/src/routes/projects/projectn5/+page.svelte +++ b/src/routes/projects/projectn5/+page.svelte @@ -2,11 +2,11 @@ import Banner2 from "$lib/banner2.svelte"; import Content from "$lib/viewport/content.svelte"; import { posts, type DevlogPostLink } from "./devlog/posts"; - import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte"; + import HomesickLinkList, { type LinkEntry } from "$lib/lists/homesick-link-list.svelte"; - let entries: GalleryEntry[] = posts.map(mapEntries); + let entries: LinkEntry[] = posts.map(mapEntries); - function mapEntries(entry: DevlogPostLink, index: number): GalleryEntry { + function mapEntries(entry: DevlogPostLink, index: number): LinkEntry { return { title: `${entry.post.title}`, subtitle: `#${(posts.length - index).toString().padStart(2, '0')} // ${entry.post.date}`, @@ -44,5 +44,5 @@

Development log entries in reverse chronological order (newest to oldest).

- + \ No newline at end of file