109 lines
2.6 KiB
Svelte
109 lines
2.6 KiB
Svelte
|
<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>
|