-
{@html entry.subtitle}
-
{entry.title}
-
{entry.description}
+{#snippet linkEntry({entry}: {entry: LinkEntry})}
+
+
+

+
+
+
{@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