114 lines
3.8 KiB
Text
114 lines
3.8 KiB
Text
|
---
|
||
|
|
// Learn about using Astro layouts:
|
||
|
|
// https://docs.astro.build/en/core-concepts/layouts/
|
||
|
|
|
||
|
|
// Component Imports
|
||
|
|
import MainHead from '../components/MainHead.astro';
|
||
|
|
import Nav from '../components/Nav.astro';
|
||
|
|
import Footer from '../components/Footer.astro';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
title?: string | undefined;
|
||
|
|
description?: string | undefined;
|
||
|
|
}
|
||
|
|
|
||
|
|
const { title, description } = Astro.props;
|
||
|
|
---
|
||
|
|
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<MainHead title={title} description={description} />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="stack backgrounds">
|
||
|
|
<Nav />
|
||
|
|
<slot />
|
||
|
|
<Footer />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Add “loaded” class once the document has completely loaded.
|
||
|
|
addEventListener('load', () => document.documentElement.classList.add('loaded'));
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--_placeholder-bg: linear-gradient(transparent, transparent);
|
||
|
|
--bg-image-main: url('/assets/backgrounds/bg-main-light-800w.jpg');
|
||
|
|
--bg-image-main-curves: url('/assets/backgrounds/bg-main-light.svg');
|
||
|
|
--bg-image-subtle-1: var(--_placeholder-bg);
|
||
|
|
--bg-image-subtle-2: var(--_placeholder-bg);
|
||
|
|
--bg-image-footer: var(--_placeholder-bg);
|
||
|
|
--bg-svg-blend-mode: overlay;
|
||
|
|
--bg-blend-mode: darken;
|
||
|
|
--bg-image-aspect-ratio: 2.25;
|
||
|
|
--bg-scale: 1.68;
|
||
|
|
--bg-aspect-ratio: calc(var(--bg-image-aspect-ratio) / var(--bg-scale));
|
||
|
|
--bg-gradient-size: calc(var(--bg-scale) * 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
:root.theme-dark {
|
||
|
|
--bg-image-main: url('/assets/backgrounds/bg-main-dark-800w.jpg');
|
||
|
|
--bg-image-main-curves: url('/assets/backgrounds/bg-main-dark.svg');
|
||
|
|
--bg-svg-blend-mode: darken;
|
||
|
|
--bg-blend-mode: lighten;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* These backgrounds are displayed below the fold, so we lazy load them
|
||
|
|
once the `.loaded` class has been set. */
|
||
|
|
:root.loaded {
|
||
|
|
--bg-image-subtle-1: url('/assets/backgrounds/bg-subtle-1-light-800w.jpg');
|
||
|
|
--bg-image-subtle-2: url('/assets/backgrounds/bg-subtle-2-light-800w.jpg');
|
||
|
|
--bg-image-footer: url('/assets/backgrounds/bg-footer-light-800w.jpg');
|
||
|
|
}
|
||
|
|
:root.loaded.theme-dark {
|
||
|
|
--bg-image-subtle-1: url('/assets/backgrounds/bg-subtle-1-dark-800w.jpg');
|
||
|
|
--bg-image-subtle-2: url('/assets/backgrounds/bg-subtle-2-dark-800w.jpg');
|
||
|
|
--bg-image-footer: url('/assets/backgrounds/bg-footer-dark-800w.jpg');
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 50em) {
|
||
|
|
:root {
|
||
|
|
--bg-scale: 1;
|
||
|
|
--bg-image-main: url('/assets/backgrounds/bg-main-light-1440w.jpg');
|
||
|
|
}
|
||
|
|
:root.theme-dark {
|
||
|
|
--bg-image-main: url('/assets/backgrounds/bg-main-dark-1440w.jpg');
|
||
|
|
}
|
||
|
|
|
||
|
|
:root.loaded {
|
||
|
|
--bg-image-subtle-1: url('/assets/backgrounds/bg-subtle-1-light-1440w.jpg');
|
||
|
|
--bg-image-subtle-2: url('/assets/backgrounds/bg-subtle-2-light-1440w.jpg');
|
||
|
|
--bg-image-footer: url('/assets/backgrounds/bg-footer-light-1440w.jpg');
|
||
|
|
}
|
||
|
|
:root.loaded.theme-dark {
|
||
|
|
--bg-image-subtle-1: url('/assets/backgrounds/bg-subtle-1-dark-1440w.jpg');
|
||
|
|
--bg-image-subtle-2: url('/assets/backgrounds/bg-subtle-2-dark-1440w.jpg');
|
||
|
|
--bg-image-footer: url('/assets/backgrounds/bg-footer-dark-1440w.jpg');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.backgrounds {
|
||
|
|
min-height: 100%;
|
||
|
|
isolation: isolate;
|
||
|
|
background:
|
||
|
|
/*noise*/ url('/assets/backgrounds/noise.png') top center/220px repeat,
|
||
|
|
/*footer*/ var(--bg-image-footer) bottom center/var(--bg-gradient-size) no-repeat,
|
||
|
|
/*header1*/ var(--bg-image-main-curves) top center/var(--bg-gradient-size) no-repeat,
|
||
|
|
/*header2*/ var(--bg-image-main) top center/var(--bg-gradient-size) no-repeat,
|
||
|
|
/*base*/ var(--gray-999);
|
||
|
|
background-blend-mode: /*noise*/ overlay, /*footer*/ var(--bg-blend-mode),
|
||
|
|
/*header1*/ var(--bg-svg-blend-mode), /*header2*/ normal, /*base*/ normal;
|
||
|
|
}
|
||
|
|
@media (forced-colors: active) {
|
||
|
|
/* Deactivate custom backgrounds for high contrast users. */
|
||
|
|
.backgrounds {
|
||
|
|
background: none;
|
||
|
|
background-blend-mode: none;
|
||
|
|
--bg-gradient-size: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</body>
|
||
|
|
</html>
|