Peter Meier
d8a6508cde
Drop the footer's flex override so it renders through the standard 12-col grid + per-block layout (mobile/tablet/desktop) like pages do. Add optional column-start (desktopStart/tabletStart) to the layout system so blocks can be offset in the grid — used to place the inline newsletter form directly under the "Kontakt & Community" column. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
90 lines
2.9 KiB
Svelte
90 lines
2.9 KiB
Svelte
<script lang="ts">
|
||
import ContentRows from "./ContentRows.svelte";
|
||
import type { RowContentLayout } from "$lib/block-types";
|
||
import { t as tStatic, T } from "$lib/translations";
|
||
import type { Translations } from "$lib/translations";
|
||
|
||
interface FooterEntry extends RowContentLayout {
|
||
id?: string;
|
||
}
|
||
|
||
let { footer = null, translations = {} }: { footer?: FooterEntry | null; translations?: Translations | null } = $props();
|
||
|
||
function t(key: string) {
|
||
return tStatic(translations ?? null, key);
|
||
}
|
||
|
||
const hasRowContent = $derived(
|
||
!!footer &&
|
||
((footer.row1Content?.length ?? 0) > 0 ||
|
||
(footer.row2Content?.length ?? 0) > 0 ||
|
||
(footer.row3Content?.length ?? 0) > 0),
|
||
);
|
||
</script>
|
||
|
||
{#if footer}
|
||
<footer
|
||
class="mt-auto bg-stein-900 text-stein-0 py-10"
|
||
data-footer-id={footer.id}
|
||
>
|
||
<div class="container-custom">
|
||
{#if hasRowContent}
|
||
<div class="content-footer text-sm text-stein-200">
|
||
<ContentRows layout={footer} translations={translations} />
|
||
</div>
|
||
{:else}
|
||
<p class="text-sm text-stein-0/80 text-center">
|
||
{t(T.footer_copyright) !== T.footer_copyright
|
||
? t(T.footer_copyright)
|
||
: `© ${new Date().getFullYear()} Windwiderstand`}
|
||
</p>
|
||
{/if}
|
||
</div>
|
||
</footer>
|
||
{/if}
|
||
|
||
<style>
|
||
.content-footer :global(.content) {
|
||
margin: 0;
|
||
}
|
||
/* Footer nutzt jetzt das normale 12-Spalten-Grid (grid grid-cols-12 aus
|
||
ContentRows) + per-Block layout (mobile/tablet/desktop + desktopStart).
|
||
Kein Flex-Override mehr — Spaltigkeit kommt aus dem CMS-layout. */
|
||
.content-footer :global(.content-row + .content-row) {
|
||
margin-top: 2rem;
|
||
padding-top: 1.5rem;
|
||
border-top: 1px solid var(--color-stein-700);
|
||
}
|
||
/* Globaler Row-Trenner (::before aus app.css) doppelt den eigenen
|
||
border-top-Trenner → hier abschalten. */
|
||
.content-footer :global(.content-row + .content-row::before) {
|
||
display: none;
|
||
}
|
||
/* Trailing-Margins im Footer killen: letzter Block (Wrapper mb-4) und
|
||
letzter Absatz (.markdown p mb-4) sonst → Leerraum unter Copyright/Lizenz
|
||
vor dem Footer-Rand (zusätzlich zum py-10-Padding). */
|
||
.content-footer :global(.content-row:last-child > *:last-child),
|
||
.content-footer :global(.markdown > p:last-child) {
|
||
margin-bottom: 0;
|
||
}
|
||
.content-footer :global(a) {
|
||
color: var(--color-stein-200);
|
||
}
|
||
/* Markdown-Links (z. B. „Mehr dazu" in Copyright-Zeile) unterstreichen –
|
||
konsistent mit den Link-Listen, die schon Underline haben. */
|
||
.content-footer :global(.markdown a) {
|
||
text-decoration: underline;
|
||
text-underline-offset: 2px;
|
||
}
|
||
.content-footer :global(a:hover) {
|
||
color: var(--color-stein-0);
|
||
}
|
||
.content-footer :global(h3) {
|
||
color: var(--color-stein-0);
|
||
}
|
||
.content-footer :global(.markdown),
|
||
.content-footer :global(.prose) {
|
||
color: var(--color-stein-200);
|
||
}
|
||
</style>
|