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

added text updates for project n5 devlog; added wide option for alt title banner

Browse Source
This commit is contained in:
denizk0461
2025-08-19 19:10:34 +02:00
parent aeade6e167
commit 54fa1234c6
3 changed files with 241 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/lib/banner-title-alt.svelte
View File

@@ -8,6 +8,7 @@
banner = "",
bannerAlt = "",
pixelated,
wide,
}: {
title: string;
date?: string;
@@ -15,11 +16,28 @@
banner?: string;
bannerAlt?: string;
pixelated?: boolean;
wide?: boolean;
} = $props();
</script>
<div class="container">
{#if wide}
<div class="subcontainer">
<div class="img-container-wide">
{#if pixelated}
<img class="pixelated-img" src="{banner}" alt="{bannerAlt}">
{:else}
<img src="{banner}" alt="{bannerAlt}">
{/if}
<div class="text-container-wide">
<div class="text-align-container-wide">
{@render titles({title, subtitle, date})}
</div>
</div>
</div>
</div>
{:else}
<div class="subcontainer">
<div class="img-container">
{#if pixelated}
@@ -29,17 +47,22 @@
{/if}
</div>
<div class="text-container">
<h1 class="title">{title}</h1>
{#if subtitle}
<p class="subtitle">[ {subtitle} ]</p>
{/if}
{#if date}
<p class="date">» {date}</p>
{/if}
{@render titles({title, subtitle, date})}
</div>
</div>
{/if}
</div>
{#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
<h1 class="title">{title}</h1>
{#if subtitle}
<p class="subtitle">[ {subtitle} ]</p>
{/if}
{#if date}
<p class="date">» {date}</p>
{/if}
{/snippet}
<SeparatorLine />
<style>
@@ -62,6 +85,26 @@
width: 50%;
}
.img-container-wide {
width: 100%;
position: relative;
}
.text-align-container-wide {
margin: auto 24px;
height: fit-content;
}
.text-container-wide {
position: absolute;
display: flex;
right: 0;
top: 0;
bottom: 0;
width: 50%;
background-color: #000000bb;
}
.text-container {
width: 48%;
margin: auto 24px;