102 lines
1.9 KiB
Svelte
102 lines
1.9 KiB
Svelte
<script>
|
|
import Page from "$lib/Page.svelte";
|
|
import { extractAnchors, toAnchor } from '$lib/anchors';
|
|
import Pages from "$lib/Pages.svelte";
|
|
export let page;
|
|
export let pages;
|
|
</script>
|
|
|
|
<style>
|
|
.stuff {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 1em;
|
|
}
|
|
.side {
|
|
min-width: 120px;
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 0;
|
|
height: max-content;
|
|
}
|
|
nav {
|
|
margin-top: 40px;
|
|
margin-bottom: 40px;
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
content {
|
|
padding: 8px;
|
|
min-width: 0;
|
|
}
|
|
.other {
|
|
color: #888;
|
|
margin-top: 2em;
|
|
max-width: 90%;
|
|
padding-left: 4em;
|
|
padding-right: 4em;
|
|
text-align: center;
|
|
padding-bottom: 1em;
|
|
margin-bottom: 1em;
|
|
border-bottom: 1px solid #888;
|
|
}
|
|
@media screen and (max-width: 1300px) {
|
|
.side {
|
|
display: none;
|
|
}
|
|
}
|
|
li {
|
|
padding-top: 0.1em;
|
|
padding-bottom: 0.1em;
|
|
}
|
|
li a {
|
|
text-decoration: none;
|
|
color: #444;
|
|
font-weight: 400;
|
|
transition: 0.1s font-weight;
|
|
}
|
|
li a:hover {
|
|
color: #111;
|
|
font-weight: 500;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
li a {
|
|
color: #eee;
|
|
}
|
|
li a:hover {
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<svelte:head>
|
|
<title>{page.name} - Guidebook</title>
|
|
<meta name="description" content="{page.description || 'A Guidebook guide!'}" />
|
|
</svelte:head>
|
|
|
|
<div class="stuff">
|
|
<div class="side">
|
|
<nav>
|
|
<el>
|
|
{#each extractAnchors(page.content) as anchor}
|
|
{#if anchor.level === 2}
|
|
<li style="margin-left: {Math.max(anchor.level - 2, 0) * 0.3}em">
|
|
<a href="#{toAnchor(anchor.name)}">
|
|
{anchor.name}
|
|
</a>
|
|
</li>
|
|
{/if}
|
|
{/each}
|
|
</el>
|
|
</nav>
|
|
</div>
|
|
<content>
|
|
<Page content={page.content}></Page>
|
|
</content>
|
|
</div>
|
|
|
|
{#if pages && pages.length > 0}
|
|
<div class="other">Other pages in this category:</div>
|
|
<br>
|
|
<Pages pages={pages.slice(0, 3)}/>
|
|
{/if} |