From a88c02922b2354a3e2194d7d897e12c995eebf5e Mon Sep 17 00:00:00 2001 From: denizk0461 Date: Mon, 13 Apr 2026 22:08:04 +0200 Subject: [PATCH] fancied up feed images --- src/routes/feed/+page.svelte | 43 +++++++++++++++++++++++++++--------- src/routes/feed/feed.ts | 5 ----- 2 files changed, 33 insertions(+), 15 deletions(-) diff --git a/src/routes/feed/+page.svelte b/src/routes/feed/+page.svelte index d501b9e..0074cff 100644 --- a/src/routes/feed/+page.svelte +++ b/src/routes/feed/+page.svelte @@ -32,13 +32,13 @@ -

Welcome to my (new) art feed! It is heavily inspired by DeathSurplus' art blog – definitely go check out his page!

+

Welcome to my creative feed! It is heavily inspired by DeathSurplus' art blog – definitely go check out his website!

This page is intended to be a contrasting companion to the projects page; I'll use this page for smaller things that don't fit the dedicated-page-format.

@@ -54,8 +54,8 @@ {#if entry.images && entry.images.length > 0} @@ -116,19 +116,36 @@ gap: 4px; } - .image-gallery img { + .image-gallery-img { width: 100%; height: 100%; display: block; object-fit: cover; filter: brightness(60%) saturate(80%); + max-height: 320px; transition: filter var(--duration-animation) var(--anim-curve), + scale var(--duration-animation) var(--anim-curve), border-radius var(--duration-animation) var(--anim-curve); + scale: 1.04; } - .image-gallery img:hover { + .image-gallery-link { + outline: var(--border-style) var(--border-dash-size) transparent; + border-radius: var(--border-radius); + z-index: 10; + transition: outline-color var(--duration-animation) var(--anim-curve); + overflow: hidden; + margin: 0; + } + + .image-gallery-link:hover .image-gallery-img { border-radius: var(--border-radius); filter: brightness(100%) saturate(100%); + scale: 1.0; + } + + .image-gallery-link:hover { + outline-color: var(--color-highlight); } .subtitle { @@ -150,12 +167,18 @@ } @media screen and (max-width: 800px) { - .image-gallery img { - filter: brightness(100%) saturate(100%); + .image-gallery-link, .image-gallery-link:hover .image-gallery-img { + border-radius: 0; } - .image-gallery img:hover { + .image-gallery-link:hover { + outline-color: transparent; + } + + .image-gallery-img { border-radius: 0; + scale: 1.0; + filter: brightness(100%) saturate(100%); } } \ No newline at end of file diff --git a/src/routes/feed/feed.ts b/src/routes/feed/feed.ts index e1b924f..6223b21 100644 --- a/src/routes/feed/feed.ts +++ b/src/routes/feed/feed.ts @@ -1,9 +1,4 @@ export let entries: string[] = [ - // 2026 - // "misc/lightyears-font", "electronics/trans-phone", "drawings/lecturer-gender", - // 2024 - // "electronics/3ds-usb-c", - // "electronics/deej0461", ]; \ No newline at end of file