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}
-
- {/each}
+
+ {#each entry.images as i, index}
+
![{entry.imageAlts[index]}]({entry.path}/{i})
+ {/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