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

added devlog 2026/0309

Browse Source
This commit is contained in:
denizk0461
2026-03-09 22:06:49 +01:00
parent a9756725da
commit b88908d7bf
9 changed files with 130 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,6 +9,7 @@
alignment,
video,
pixelated,
smaller,
}: {
image: string;
altText?: string;
@@ -16,6 +17,7 @@
alignment?: string;
video?: boolean;
pixelated?: boolean;
smaller?: boolean;
} = $props();
</script>
@@ -39,18 +41,37 @@
{/if}
{/snippet}
<!-- this structure is ugly as fuck. there must be a better way of doing this -->
{#if alignment && alignment == "left"}
<a class="subtitled-img-container subtitled-img-container-left" href="{image}">
{@render subtitledImageContent()}
</a>
{#if smaller}
<a class="subtitled-img-container 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}">
{@render subtitledImageContent()}
</a>
{/if}
{:else if alignment && alignment == "right"}
<a class="subtitled-img-container subtitled-img-container-right" href="{image}">
{@render subtitledImageContent()}
</a>
{#if smaller}
<a class="subtitled-img-container subtitled-img-container-right subtitled-img-reduced-size" href="{image}">
{@render subtitledImageContent()}
</a>
{:else}
<a class="subtitled-img-container subtitled-img-container-right" href="{image}">
{@render subtitledImageContent()}
</a>
{/if}
{:else}
<a class="subtitled-img-container subtitled-img-container-centred" href="{image}">
{@render subtitledImageContent()}
</a>
{#if smaller}
<a class="subtitled-img-container 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}">
{@render subtitledImageContent()}
</a>
{/if}
{/if}
<style>
@@ -66,6 +87,7 @@
.subtitled-img-container-centred {
width: var(--media-width);
/* width: fit-content; */
margin-left: auto;
margin-right: auto;
}
@@ -112,6 +134,10 @@
margin-left: auto;
margin-right: auto;
}
.subtitled-img-reduced-size {
max-width: initial;
}
}
@media screen and (min-width: 600px) {
@@ -119,6 +145,10 @@
width: 34%;
}
.subtitled-img-reduced-size {
max-width: 20%;
}
/* Don't limit height of images set to the side because text flows around them */
.subtitled-img-container-left img, .subtitled-img-container-right img {
max-height: initial;