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 {