added SubtitledImage component
This commit is contained in:
111
src/lib/components/subtitled-image.svelte
Normal file
111
src/lib/components/subtitled-image.svelte
Normal file
@@ -0,0 +1,111 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
image,
|
||||
altText,
|
||||
subtitle,
|
||||
// options: left, right. leaving empty means centred
|
||||
alignment,
|
||||
}: {
|
||||
image: string;
|
||||
altText: string;
|
||||
subtitle?: string;
|
||||
alignment?: string;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
{#snippet subtitledImageContent()}
|
||||
<img class="subtitled-img" src="{image}" alt="{altText}">
|
||||
|
||||
{#if subtitle}
|
||||
<hr>
|
||||
<div class="subtitled-img-text-container">
|
||||
<span class="subtitled-img-logo">ⓘ</span>
|
||||
<p class="subtitled-img-text">{subtitle}</p>
|
||||
</div>
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
{#if alignment && alignment == "left"}
|
||||
<a class="subtitled-img-container subtitled-img-container-left" href="{image}">
|
||||
{@render subtitledImageContent()}
|
||||
</a>
|
||||
{:else if alignment && alignment == "right"}
|
||||
<a class="subtitled-img-container subtitled-img-container-right" href="{image}">
|
||||
{@render subtitledImageContent()}
|
||||
</a>
|
||||
{:else}
|
||||
<a class="subtitled-img-container subtitled-img-container-centred" href="{image}">
|
||||
{@render subtitledImageContent()}
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.subtitled-img-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 2px var(--color-highlight) dashed;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
transition: background-color 0.1s ease-out;
|
||||
}
|
||||
|
||||
.subtitled-img-container-centred {
|
||||
width: var(--media-width);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.subtitled-img-container-left, .subtitled-img-container-right {
|
||||
width: 34%;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.subtitled-img-container-left {
|
||||
float: left;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.subtitled-img-container-right {
|
||||
float: right;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.subtitled-img-container:hover {
|
||||
background-color: var(--color-background-highlight)
|
||||
}
|
||||
|
||||
.subtitled-img {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subtitled-img-logo {
|
||||
color: var(--color-highlight);
|
||||
}
|
||||
|
||||
.subtitled-img-text-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 0 0 4px 0;
|
||||
padding: 8px 16px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.subtitled-img-text {
|
||||
box-sizing: border-box;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.3rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -97,6 +97,7 @@
|
||||
:global {
|
||||
:root {
|
||||
--color-text: #d0d0d0;
|
||||
--color-text-secondary: #b0b0b0;
|
||||
--color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%);
|
||||
--color-text-dark: #1e1e1e;
|
||||
--color-highlight: #51B86B;
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
<script>
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
{@render children()}
|
||||
41
src/routes/test/+page.svelte
Normal file
41
src/routes/test/+page.svelte
Normal file
@@ -0,0 +1,41 @@
|
||||
<script>
|
||||
import SubtitledImage from "$lib/components/subtitled-image.svelte";
|
||||
import Content from "$lib/viewport/content.svelte";
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<Content>
|
||||
<p>this is a test page. please disregard. or not i'm not your boss</p>
|
||||
|
||||
<SubtitledImage
|
||||
image="/meta/about/taskbar.webp"
|
||||
altText="taskbar"
|
||||
subtitle="My taskbar with a little Clank backback on the left side because it's very cute. very cute. very very very cute indeed. very much indeed so. sample text. lorem ipsum. this text needs to break. how long can i make this text be? i need to write a lot to see how this text box handles very long text and if this actually looks good. let's see hmm what can I think of? nothing really. PUSH UR T3MPRR"
|
||||
/>
|
||||
<SubtitledImage
|
||||
image="/projects/projectn5/devlog/2025/0427/laura-v4-full.webp"
|
||||
altText="taskbar"
|
||||
subtitle="old as fuck laura. very tall. very very very tall indeed. very much indeed so. sample text. lorem ipsum. PUSH UR T3MPRR"
|
||||
alignment="left"
|
||||
/>
|
||||
|
||||
<p>test text to see whether this aligmne tactually works afdsdfasjd iofjaopsid iofjasiop[d iofajiope juiorpfjah sidfokljasolkdjf ioajsu0oid kfjpzxj niujkhjozx jcio gjzoxij cviozjhxioc jvzxjc asdjfoasd iozxoic uoizxcu hoiwe oijfio aswjiofjo sajdj asd hnnhnhnhan han n nhnhnhnhnnhnh nhnh nggnhngh ng nhng nhng nh na asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdftest text to see whether this aligmne tactually works afdsdfasjd iofjaopsid iofjasiop[d iofajiope juiorpfjah sidfokljasolkdjf ioajsu0oid kfjpzxj niujkhjozx jcio gjzoxij cviozjhxioc jvzxjc asdjfoasd iozxoic uoizxcu hoiwe oijfio aswjiofjo sajdj asd hnnhnhnhan han n nhnhnhnhnnhnh nhnh nggnhngh ng nhng nhng nh na asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdftest text to see whether this aligmne tactually works nhng nh na asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdftest text to see whether this aligmne tactually works afdsdfasjd if asdf</p>
|
||||
<SubtitledImage
|
||||
image="/meta/about/taskbar.webp"
|
||||
altText="taskbar"
|
||||
subtitle="My taskbar with a little Clank backback on the left side because it's very cute. very cute. very very very cute indeed. very much indeed so. sample text. lorem ipsum. this text needs to break. how long can i make this text be? i need to write a lot to see how this text box handles very long text and if this actually looks good. let's see hmm what can I think of? nothing really. PUSH UR T3MPRR"
|
||||
alignment="right"
|
||||
/>
|
||||
|
||||
<p>test text to see whether this aligmne tactually works afdsdfasjd iofjaopsid iofjasiop[d iofajiope juiorpfjah sidfokljasolkdjf ioajsu0oid kfjpzxj niujkhjozx jcio gjzoxij cviozjhxioc jvzxjc asdjfoasd iozxoic uoizxcu hoiwe oijfio aswjiofjo sajdj asd hnnhnhnhan han n nhnhnhnhnnhnh nhnh nggnhngh ng nhng nhng nh na asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdftest text to see whether this aligmne tactually works afdsdfasjd iofjaopsid iofjasiop[d iofajiope juiorpfjah sidfokljasolkdjf ioajsu0oid kfjpzxj niujkhjozx jcio gjzoxij cviozjhxioc jvzxjc asdjfoasd iozxoic uoizxcu hoiwe oijfio aswjiofjo sajdj asd hnnhnhnhan han n nhnhnhnhnnhnh nhnh nggnhngh ng nhng nhng nh na asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdftest text to see whether this aligmne tactually works afdsdfasjd iofjaopsid iofjasiop[d iofajiope juiorpfjah sidfokljasolkdjf ioajsu0oid kfjpzxj niujkhjozx jcio gjzoxij cviozjhxioc jvzxjc asdjfoasd iozxoic uoizxcu hoiwe oijfio aswjiofjo sajdj asd hnnhnhnhan han n nhnhnhnhnnhnh nhnh nggnhngh ng nhng nhng nh na asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdftest text to see whether this aligmne tactually works afdsdfasjd iofjaopsid iofjasiop[d iofajiope juiorpfjah sidfokljasolkdjf ioajsu0oid kfjpzxj niujkhjozx jcio gjzoxij cviozjhxioc jvzxjc asdjfoasd iozxoic uoizxcu hoiwe oijfio aswjiofjo sajdj asd hnnhnhnhan han n nhnhnhnhnnhnh nhnh nggnhngh ng nhng nhng nh na asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdftest text to see whether this aligmne tactually works afdsdfasjd iofjaopsid iofjasiop[d iofajiope juiorpfjah sidfokljasolkdjf ioajsu0oid kfjpzxj niujkhjozx jcio gjzoxij cviozjhxioc jvzxjc asdjfoasd iozxoic uoizxcu hoiwe oijfio aswjiofjo sajdj asd hnnhnhnhan han n nhnhnhnhnnhnh nhnh nggnhngh ng nhng nhng nh na asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf</p>
|
||||
<SubtitledImage
|
||||
image="/meta/about/taskbar.webp"
|
||||
altText="taskbar"
|
||||
alignment="right"
|
||||
/>
|
||||
<SubtitledImage
|
||||
image="/meta/about/taskbar.webp"
|
||||
altText="taskbar"
|
||||
/>
|
||||
</Content>
|
||||
Reference in New Issue
Block a user