added fancy marker for latest update date in main page link row

This commit is contained in:
2026-04-24 20:48:22 +02:00
parent db236538a0
commit df1a4c8db4
2 changed files with 48 additions and 11 deletions

View File

@@ -1,8 +1,9 @@
<script lang="ts">
export interface GalleryRowEntry {
export interface LinkRowEntry {
title: string;
description: string;
img: string;
latestUpdate?: string;
altText: string;
link: string;
}
@@ -10,7 +11,7 @@
let {
entries,
}: {
entries: GalleryRowEntry[];
entries: LinkRowEntry[];
} = $props();
</script>
@@ -23,6 +24,9 @@
<div class="row-text-container">
<p class="row-title">&gt; {entry.title}</p>
<p class="row-description">{@html entry.description}</p>
{#if entry.latestUpdate}
<p class="row-updated">updated: <span class="row-updated-date">{entry.latestUpdate}</span></p>
{/if}
</div>
</a>
{/each}
@@ -78,6 +82,7 @@
.row-text-container {
margin-top: 8px;
margin-bottom: 4px;
}
.row-title {
@@ -90,7 +95,38 @@
.row-description {
font-size: 1.0rem;
line-height: 1.3rem;
margin: 0 0 4px 0;
margin: 0;
}
.row-updated, .row-updated-date {
font-size: 0.9rem;
line-height: 1.2rem;
margin: 0;
font-style: italic;
width: fit-content;
transition: color var(--duration-animation) var(--anim-curve),
background-color var(--duration-animation) var(--anim-curve);
}
.row-updated {
margin-top: 2px;
padding: 4px 8px;
font-weight: 500;
background-color: var(--color-background-highlight);
border-radius: var(--border-radius);
}
.row-entry:hover .row-updated {
color: var(--color-text-dark);
background-color: var(--color-highlight);
}
.row-updated-date {
font-weight: 600;
}
.row-entry:hover .row-updated-date {
color: var(--color-text-dark);
}
@media screen and (max-width: 600px) {