diff --git a/src/routes/feed/+page.svelte b/src/routes/feed/+page.svelte index 30960a4..1aa0aa7 100644 --- a/src/routes/feed/+page.svelte +++ b/src/routes/feed/+page.svelte @@ -52,9 +52,11 @@

{entry.date}

{#if entry.images && entry.images.length > 0} - {#each entry.images as i, index} - {entry.imageAlts[index]} - {/each} + {/if} {/each} @@ -106,6 +108,27 @@ background-color: var(--color-background-highlight-alt); } + .image-gallery { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 4px; + } + + .image-gallery img { + width: 100%; + height: 100%; + display: block; + object-fit: cover; + filter: brightness(60%) saturate(80%); + transition: filter var(--duration-animation) var(--anim-curve), + border-radius var(--duration-animation) var(--anim-curve); + } + + .image-gallery img:hover { + border-radius: var(--border-radius); + filter: brightness(100%) saturate(100%); + } + .subtitle { font-family: var(--font-mono); margin: 0; @@ -123,4 +146,14 @@ .subtitle::after { content: " -->"; } + + @media screen and (max-width: 800px) { + .image-gallery img { + filter: brightness(100%) saturate(100%); + } + + .image-gallery img:hover { + border-radius: 0; + } + } \ No newline at end of file