docs/src/layouts/SplashLayout.astro


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

---
import HeadCommon from "../components/HeadCommon.astro";
import Header from '../components/Header/Header.astro';
import { SITE } from "../config.ts";

const { title } = Astro.props;
---

<html dir="ltr" lang="en-us" class="initial">
  <head>
    <HeadCommon />
    <title>{`${title} 🚀 ${SITE.title}`}</title>
    <style>
      body {
        width: 100%;
        display: grid;
        grid-template-rows: var(--theme-navbar-height) 1fr;
        --gutter: 0.5rem;
        --doc-padding: 2rem;
      }
      .layout {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: 
          minmax(var(--gutter), 1fr) 
          minmax(0, var(--max-width)) 
          minmax(var(--gutter), 1fr);
        overflow-x: hidden;
      }
      article {
        padding: var(--doc-padding) var(--gutter);
        grid-column: 2;
        display: flex;
        flex-direction: column;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <Header />
    <main class="layout splash-layout">
      <article>
        <slot />
      </article>
    </main>
  </body>
</html>