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

added zone for image gallery hover; added sentence to feed

Browse Source
This commit is contained in:
denizk0461
2026-04-06 21:13:29 +02:00
parent 5c0f1e338c
commit 0d608a6287
2 changed files with 25 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/lib/lists/image-gallery.svelte
View File

@@ -31,26 +31,32 @@
}
</script>
<div class="gallery-container blurred-background">
<div class="gallery-button-container">
<button class="gallery-button" onclick={galleryBack}>&lt;</button>
<div class="gallery-text-container">
<p class="gallery-index">{currentIndex + 1} / {images.length}</p>
<div class="gallery-desc-container">
<p>&nbsp;</p> <!-- this element intentionally left blank -->
{#each images[currentIndex].desc as d}
<p>{@html d}</p>
{/each}
<div class="gallery-zone">
<div class="gallery-container blurred-background">
<div class="gallery-button-container">
<button class="gallery-button" onclick={galleryBack}>&lt;</button>
<div class="gallery-text-container">
<p class="gallery-index">{currentIndex + 1} / {images.length}</p>
<div class="gallery-desc-container">
<p>&nbsp;</p> <!-- this element intentionally left blank -->
{#each images[currentIndex].desc as d}
<p>{@html d}</p>
{/each}
</div>
</div>
<button class="gallery-button" onclick={galleryForward}>&gt;</button>
</div>
<div class="gallery-img-container">
<img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}>
</div>
<button class="gallery-button" onclick={galleryForward}>&gt;</button>
</div>
<div class="gallery-img-container">
<img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}>
</div>
</div>
<style>
.gallery-zone {
width: 100%;
}
.gallery-container {
position: relative;
max-width: var(--media-width);
@@ -79,13 +85,13 @@
transition: opacity var(--duration-animation) var(--anim-curve);
}
.gallery-container:hover .gallery-button-container,
.gallery-container:hover .gallery-text-container
.gallery-zone:hover .gallery-button-container,
.gallery-zone:hover .gallery-text-container
{
opacity: 100%;
}
.gallery-container:hover .gallery-img {
.gallery-zone:hover .gallery-img {
filter: brightness(40%) saturate(60%);
}

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

@@ -26,6 +26,8 @@
<p>I'll add some more of my past projects, new projects, and an option to filter by project type <i>soon™</i>. Maybe I'll also split the content into pages, if I ever figure out how to do that.</p>
<p>I <b>MAY</b> merge this with the <a href="/projects">Projects</a> page, I've not yet decided.</p>
<TableOfContents />
<h2>My First Month Drawing</h2>