114 lines
2.9 KiB
Plaintext
114 lines
2.9 KiB
Plaintext
---
|
|
import Html from "./components/Html.astro";
|
|
import AppLayoutBackgroundImg from "./components/AppLayoutBackgroundImg.astro";
|
|
import Topbar from "./components/Topbar/Topbar.astro";
|
|
import Footer from "./components/Footer.astro";
|
|
import AppLayoutTitle from "./components/AppLayoutTitle.astro";
|
|
import type { ComponentProps } from "astro/types";
|
|
|
|
interface Props {
|
|
parentPages?: ComponentProps<typeof Topbar>["parentPages"];
|
|
pretitle?: string | undefined;
|
|
title: string;
|
|
subtitle?: string | undefined;
|
|
description?: string | undefined;
|
|
illustration?: string;
|
|
illustrationSize?: string;
|
|
illustrationPosition?: string;
|
|
backgroundIllustration?: string | undefined;
|
|
hideFooterLinks?: boolean;
|
|
hideHomeButton?: boolean;
|
|
}
|
|
|
|
const {
|
|
title,
|
|
subtitle,
|
|
pretitle,
|
|
description,
|
|
illustration,
|
|
backgroundIllustration,
|
|
parentPages,
|
|
illustrationSize = "contain",
|
|
illustrationPosition = "center",
|
|
hideFooterLinks = false,
|
|
hideHomeButton = false,
|
|
} = Astro.props;
|
|
---
|
|
|
|
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
|
|
|
<Html title={title}>
|
|
<header>
|
|
{backgroundIllustration && <AppLayoutBackgroundImg src={backgroundIllustration} />}
|
|
|
|
<Topbar parentPages={parentPages} hideHomeButton={hideHomeButton} />
|
|
{
|
|
(
|
|
<div id="header-content">
|
|
<div id="header-left">
|
|
<slot name="header-title">
|
|
<AppLayoutTitle pretitle={pretitle} title={title} subtitle={subtitle} />
|
|
</slot>
|
|
|
|
<div class="prose">
|
|
<slot name="header-description">
|
|
<p>{description}</p>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
{illustration && <div id="image-container" />}
|
|
</div>
|
|
)
|
|
}
|
|
</header>
|
|
<main><slot /></main>
|
|
<Footer withLinks={!hideFooterLinks} />
|
|
</Html>
|
|
|
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
|
|
|
{/* TODO: Not use CSS image if possible */}
|
|
<style
|
|
define:vars={{
|
|
illustration: illustration ? `url(${illustration})` : "unset",
|
|
illustrationSize,
|
|
illustrationPosition,
|
|
}}
|
|
>
|
|
header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5em;
|
|
|
|
& > #header-content {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
|
|
& > #header-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2em;
|
|
place-items: flex-start;
|
|
}
|
|
|
|
& > #image-container {
|
|
background-image: var(--illustration);
|
|
background-size: var(--illustrationSize);
|
|
background-repeat: no-repeat;
|
|
background-position: right var(--illustrationPosition);
|
|
mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 50%, transparent 80%);
|
|
|
|
@media (max-width: 60rem) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
main {
|
|
padding-top: 6em;
|
|
padding-bottom: 8em;
|
|
flex-grow: 1;
|
|
}
|
|
</style>
|