You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
2.2 KiB
109 lines
2.2 KiB
<script lang="ts">
|
|
import './styles.css';
|
|
import type { Snippet } from 'svelte';
|
|
import Topbar from './_components/Topbar.svelte';
|
|
import Sidebar from './_components/Sidebar.svelte';
|
|
import Toc from './_components/Toc.svelte';
|
|
import { nav } from './_data/nav';
|
|
|
|
let { children }: { children: Snippet } = $props();
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Active — Documentation</title>
|
|
<meta name="description" content="Documentation for the Active framework: runtime artifacts, composition, identity, data, validation and UI." />
|
|
<meta name="color-scheme" content="light dark" />
|
|
<link rel="preconnect" href="https://rsms.me/" />
|
|
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
|
</svelte:head>
|
|
|
|
<div class="shell">
|
|
<Topbar />
|
|
<div class="frame">
|
|
<aside class="rail rail-left" aria-label="Sidebar">
|
|
<Sidebar {nav} />
|
|
</aside>
|
|
<main class="content">
|
|
{@render children()}
|
|
</main>
|
|
<aside class="rail rail-right" aria-label="On this page">
|
|
<Toc />
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.shell {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.frame {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: var(--size-sidebar) minmax(0, 1fr) var(--size-toc);
|
|
max-width: 1440px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.rail {
|
|
position: sticky;
|
|
top: var(--size-topbar);
|
|
max-height: calc(100vh - var(--size-topbar));
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.rail-left {
|
|
border-right: 1px solid var(--c-border);
|
|
}
|
|
|
|
.rail-right {
|
|
padding: 2rem 1rem 2rem 1.5rem;
|
|
}
|
|
|
|
.content {
|
|
min-width: 0;
|
|
padding: 2.5rem 3rem 4rem;
|
|
max-width: 100%;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.frame {
|
|
grid-template-columns: var(--size-sidebar) minmax(0, 1fr);
|
|
}
|
|
.rail-right {
|
|
display: none;
|
|
}
|
|
.content {
|
|
padding-right: 2rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.frame {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
.rail-left {
|
|
display: none;
|
|
}
|
|
.content {
|
|
padding: 1.5rem 1.25rem 3rem;
|
|
}
|
|
}
|
|
|
|
/* Pretty scrollbars on the rails */
|
|
.rail::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
.rail::-webkit-scrollbar-thumb {
|
|
background: var(--c-border);
|
|
border-radius: 8px;
|
|
}
|
|
.rail::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
</style>
|