added content.svelte to handle page max width for specific elements; added alternative page banner

2025-04-18 11:30:21 +02:00
parent 3d894c54fc
commit 9e582615fc
25 changed files with 1182 additions and 1036 deletions
--- a/src/lib/banner-title-alt.svelte
+++ b/src/lib/banner-title-alt.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    import SeparatorLine from "./separator-line.svelte";
+
+    let {
+        title,
+        subtitle = "",
+        banner = "",
+    }: {
+        title: string;
+        subtitle?: string;
+        banner?: string;
+    } = $props();
+
+</script>
+
+<div class="container">
+    <div class="img-container">
+        <img src="{banner}">
+    </div>
+    <div class="text-container">
+        <h1 class="title">{title}</h1>
+        {#if subtitle}
+        <p class="subtitle">{subtitle}</p>
+        {/if}
+    </div>
+</div>
+
+<SeparatorLine />
+
+<style>
+    .container {
+        position: relative;
+        width: 100%;
+        height: 600px;
+        display: flex;
+        flex-direction: row;
+        background-color: var(--color-background-highlight);
+    }
+
+    .img-container {
+        flex-grow: 1;
+    }
+
+    .text-container {
+        width: 48%;
+        margin-top: auto;
+        margin-bottom: auto;
+        padding-left: 24px;
+    }
+
+    .container img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+    }
+
+    .title {
+        width: 100%;
+        box-sizing: border-box;
+        height: fit-content;
+        left: 0;
+        right: 0;
+        bottom: 0px;
+        font-style: italic;
+    }
+
+    .subtitle {
+        font-size: 1.2rem;
+        line-height: 1.6rem;
+        font-style: italic;
+    }
+</style>