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

added image gallery component; moved blurred background to separate CSS class

Browse Source
This commit is contained in:
denizk0461
2026-04-06 17:53:40 +02:00
parent 256b3d4142
commit da62a57bfb
13 changed files with 131 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/components/callout.svelte
View File

@@ -32,15 +32,15 @@
{/snippet}
{#if type == "quote"}
<div class="callout-container callout-quote">
<div class="callout-container blurred-background callout-quote">
{@render calloutContent()}
</div>
{:else if type == "info"}
<div class="callout-container callout-info">
<div class="callout-container blurred-background callout-info">
{@render calloutContent()}
</div>
{:else}
<div class="callout-container callout-warn">
<div class="callout-container blurred-background callout-warn">
{@render calloutContent()}
</div>
{/if}
@@ -67,7 +67,6 @@
align-items: center;
border: var(--border-style) var(--border-dash-size) var(--color-callout);
background-color: var(--color-callout-background);
backdrop-filter: blur(var(--blur-radius-background));
border-radius: var(--border-radius);
padding: 16px;
gap: 16px;

3
src/lib/components/scroll-top-button.svelte
View File

@@ -9,7 +9,7 @@
<svelte:window bind:scrollY={y} />
{#if y > 2400}
<button class="scroll-top-button" onclick={scrollToTop}>↑</button>
<button class="scroll-top-button blurred-background" onclick={scrollToTop}>↑</button>
{/if}
<style>
@@ -22,7 +22,6 @@
border: var(--border-style) var(--border-dash-size) var(--color-highlight);
color: var(--color-highlight);
background-color: var(--color-background-highlight);
backdrop-filter: blur(var(--blur-radius-background));
padding: 12px;
transition: background-color var(--duration-animation) var(--anim-curve);
z-index: 10;

11
src/lib/components/subtitled-image.svelte
View File

@@ -44,17 +44,17 @@
<!-- this structure is ugly as fuck. there must be a better way of doing this -->
{#if alignment && alignment == "left"}
{#if smaller}
<a class="subtitled-img-container subtitled-img-container-left subtitled-img-reduced-size" href="{image}">
<a class="subtitled-img-container blurred-background subtitled-img-container-left subtitled-img-reduced-size" href="{image}">
{@render subtitledImageContent()}
</a>
{:else}
<a class="subtitled-img-container subtitled-img-container-left" href="{image}">
<a class="subtitled-img-container blurred-background subtitled-img-container-left" href="{image}">
{@render subtitledImageContent()}
</a>
{/if}
{:else if alignment && alignment == "right"}
{#if smaller}
<a class="subtitled-img-container subtitled-img-container-right subtitled-img-reduced-size" href="{image}">
<a class="subtitled-img-container blurred-background subtitled-img-container-right subtitled-img-reduced-size" href="{image}">
{@render subtitledImageContent()}
</a>
{:else}
@@ -64,11 +64,11 @@
{/if}
{:else}
{#if smaller}
<a class="subtitled-img-container subtitled-img-container-centred subtitled-img-reduced-size" href="{image}">
<a class="subtitled-img-container blurred-background subtitled-img-container-centred subtitled-img-reduced-size" href="{image}">
{@render subtitledImageContent()}
</a>
{:else}
<a class="subtitled-img-container subtitled-img-container-centred" href="{image}">
<a class="subtitled-img-container blurred-background subtitled-img-container-centred" href="{image}">
{@render subtitledImageContent()}
</a>
{/if}
@@ -81,7 +81,6 @@
border: var(--border-dash-size) var(--color-highlight) var(--border-style);
text-decoration: none;
box-sizing: border-box;
backdrop-filter: blur(var(--blur-radius-background));
transition: background-color var(--duration-animation) var(--anim-curve);
}

3
src/lib/components/table-of-contents.svelte
View File

@@ -63,7 +63,7 @@
{/snippet}
{#if tocEntries.length > 0}
<div class="toc-container">
<div class="toc-container blurred-background">
<ul class="toc-list">
{#each tocEntries as entry}
{@render tocEntryLine({ entry })}
@@ -88,7 +88,6 @@
background-color: var(--color-background-highlight);
padding: 16px 0;
border: var(--border-style) var(--border-dash-size) var(--color-highlight);
backdrop-filter: blur(var(--blur-radius-background));
}
.toc-list {

3
src/lib/lists/blog-gallery.svelte
View File

@@ -10,7 +10,7 @@
<div class="entry-container">
{#each posts as post}
<a class="entry" href="{post.key}">
<a class="entry blurred-background-hover" href="{post.key}">
<div class="entry-banner-container">
<img class="entry-banner" src="{post.key}/{post.post.banner}" alt="{post.post.bannerAlt}">
</div>
@@ -55,7 +55,6 @@
.entry:hover {
background-color: var(--color-background-highlight-alt);
border-color: var(--color-highlight-alt);
backdrop-filter: blur(var(--blur-radius-background));
}
.entry:hover .entry-banner {

3
src/lib/lists/gallery-row.svelte
View File

@@ -16,7 +16,7 @@
<div class="row-container">
{#each entries as entry}
<a class="row-entry" href="{entry.link}">
<a class="row-entry blurred-background-hover" href="{entry.link}">
<div class="row-img-container">
<img class="row-img" src="{entry.img}" alt="{entry.altText}">
</div>
@@ -49,7 +49,6 @@
.row-entry:hover {
background-color: var(--color-background-highlight);
border-color: var(--color-highlight);
backdrop-filter: blur(var(--blur-radius-background));
}
.row-entry:hover .row-img {

3
src/lib/lists/gallery.svelte
View File

@@ -22,7 +22,7 @@
</div>
{#snippet galleryEntry({entry}: {entry: GalleryEntry})}
<a class="gallery-container" href="{entry.link}">
<a class="gallery-container blurred-background-hover" href="{entry.link}">
{#if entry.img && entry.img !== ""}
<img class="gallery-img" src="{entry.img}" alt="{entry.imgAlt}">
{:else}
@@ -111,7 +111,6 @@
.gallery-container:hover {
border-color: var(--color-highlight);
background-color: var(--color-background-highlight);
backdrop-filter: blur(var(--blur-radius-background));
}
.gallery-container:hover p {
color: var(--color-highlight);

71
src/lib/lists/image-gallery.svelte Normal file
View File

@@ -0,0 +1,71 @@
<script lang="ts">
export interface GalleryImage {
src: string;
alt: string;
desc: string;
}
let {
images,
}: {
images: GalleryImage[];
} = $props();
let currentIndex: number = $state(0);
function galleryBack() {
if (currentIndex == 0) {
currentIndex = images.length - 1;
} else {
currentIndex -= 1;
}
}
function galleryForward() {
if (currentIndex == images.length - 1) {
currentIndex = 0;
} else {
currentIndex += 1;
}
}
</script>
<div class="gallery-container">
<div class="gallery-button-container">
<button onclick={galleryBack}>&lt;</button>
<button onclick={galleryForward}>&gt;</button>
</div>
<img src={images[currentIndex].src} alt={images[currentIndex].alt}>
</div>
<style>
.gallery-container {
position: relative;
max-width: var(--media-width);
margin: 0 auto;
border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);border-radius: var(--border-radius);
}
.gallery-container img {
width: 100%;
object-fit: contain;
}
.gallery-button-container {
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
.gallery-button-container button {
background-color: aqua;
height: fit-content;
cursor: pointer;
font-size: 2.4rem;
line-height: 2.4rem;
padding: 8px;
}
</style>

3
src/lib/viewport/footer.svelte
View File

@@ -15,7 +15,7 @@
</script>
<footer>
<div class="background">
<div class="background blurred-background">
<hr>
<div class="content-container">
<div class="content-box center-box">
@@ -92,7 +92,6 @@
.background {
background-color: var(--color-background-highlight);
backdrop-filter: blur(var(--blur-radius-background));
margin-top: 32px;
}