denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fancied up feed images

Browse Source
This commit is contained in:
denizk0461
2026-04-13 22:08:04 +02:00
parent 6a9f7f763f
commit a88c02922b
2 changed files with 33 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/routes/feed/+page.svelte
View File

@@ -32,13 +32,13 @@
<Content> <Content>
<Banner2 <Banner2
title="Art & Project Feed" title="Creative Feed"
banner="banner.webp" banner="banner.webp"
bannerAlt="Mirror picture of me, pixelated beyond recognition" bannerAlt="Mirror picture of me, pixelated beyond recognition"
subtitle="subtitle missing" subtitle="minor things I have worked on"
/> />
<p>Welcome to my (new) art feed! It is heavily inspired by <a href="https://deathsurplus.com/">DeathSurplus' art blog</a> – definitely go check out his page!</p> <p>Welcome to my creative feed! It is heavily inspired by <a href="https://deathsurplus.com/">DeathSurplus' art blog</a> – definitely go check out his website!</p>
<p>This page is intended to be a contrasting companion to the <a href="/projects"><code>projects</code> page</a>; I'll use this page for smaller things that don't fit the dedicated-page-format.</p> <p>This page is intended to be a contrasting companion to the <a href="/projects"><code>projects</code> page</a>; I'll use this page for smaller things that don't fit the dedicated-page-format.</p>
@@ -54,8 +54,8 @@
{#if entry.images && entry.images.length > 0} {#if entry.images && entry.images.length > 0}
<div class="image-gallery"> <div class="image-gallery">
{#each entry.images as i, index} {#each entry.images as i, index}
<a href="{entry.path}/{i}.webp"> <a class="image-gallery-link" href="{entry.path}/{i}.webp">
<img loading="lazy" src="{entry.path}/{i}.webp" alt={entry.imageAlts[index]}> <img class="image-gallery-img" loading="lazy" src="{entry.path}/{i}.webp" alt={entry.imageAlts[index]}>
</a> </a>
{/each} {/each}
</div> </div>
@@ -116,19 +116,36 @@
gap: 4px; gap: 4px;
} }
.image-gallery img { .image-gallery-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
object-fit: cover; object-fit: cover;
filter: brightness(60%) saturate(80%); filter: brightness(60%) saturate(80%);
max-height: 320px;
transition: filter var(--duration-animation) var(--anim-curve), transition: filter var(--duration-animation) var(--anim-curve),
scale var(--duration-animation) var(--anim-curve),
border-radius 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); border-radius: var(--border-radius);
filter: brightness(100%) saturate(100%); filter: brightness(100%) saturate(100%);
scale: 1.0;
}
.image-gallery-link:hover {
outline-color: var(--color-highlight);
} }
.subtitle { .subtitle {
@@ -150,12 +167,18 @@
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.image-gallery img { .image-gallery-link, .image-gallery-link:hover .image-gallery-img {
filter: brightness(100%) saturate(100%); border-radius: 0;
} }
.image-gallery img:hover { .image-gallery-link:hover {
outline-color: transparent;
}
.image-gallery-img {
border-radius: 0; border-radius: 0;
scale: 1.0;
filter: brightness(100%) saturate(100%);
} }
} }
</style> </style>

5
src/routes/feed/feed.ts
View File

@@ -1,9 +1,4 @@
export let entries: string[] = [ export let entries: string[] = [
// 2026
// "misc/lightyears-font",
"electronics/trans-phone", "electronics/trans-phone",
"drawings/lecturer-gender", "drawings/lecturer-gender",
// 2024
// "electronics/3ds-usb-c",
// "electronics/deej0461",
]; ];