diff options
Diffstat (limited to 'examples/portfolio/src/layouts/BaseLayout.astro')
| -rw-r--r-- | examples/portfolio/src/layouts/BaseLayout.astro | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/examples/portfolio/src/layouts/BaseLayout.astro b/examples/portfolio/src/layouts/BaseLayout.astro new file mode 100644 index 000000000..235599abd --- /dev/null +++ b/examples/portfolio/src/layouts/BaseLayout.astro @@ -0,0 +1,118 @@ +--- +// 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> |