added fancy marker for latest update date in main page link row
This commit is contained in:
@@ -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">> {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) {
|
||||
Reference in New Issue
Block a user