mtd/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

docs: Improve header + sidebar

Browse Source 
docs: Create workflows
lib: Start pagination
This commit is contained in:
venashial
2022-03-12 01:34:09 -08:00
parent de536d7305
commit b69ff6ca8a
28 changed files with 445 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/routes/__layout.svelte
View File

@@ -1,12 +1,14 @@
<script lang="ts">
import "$lib/styles/variables.postcss"
import "$lib/styles/themes.postcss"
import "./_docs/styles/prism-one-dark.css"
import "./_docs/styles/gh-markdown.css"
import Sidebar from "./_docs/Sidebar.svelte"
import "./_internal/styles/prism-one-dark.css"
import "./_internal/styles/gh-markdown.css"
import Sidebar from "./_internal/components/Sidebar.svelte"
import Header from './_internal/components/Header.svelte'
</script>
<div class="app">
<Header />
<Sidebar />
<main class="app__content">
<slot />
@@ -18,28 +20,34 @@
margin: 0;
font-size: var(--body-font-size);
font-family: var(--body-font);
overflow-y: scroll;
--accent-color: hsl(331, 60%, 45%);
--accent-color-transparent: hsla(331, 60%, 45%, 0.15);
}
.app {
display: grid;
min-height: 100vh;
--sidebar-size: 250px;
padding-left: var(--sidebar-size);
overflow: hidden;
--sidebar-width: 250px;
--header-height: 56px;
@media (width <= 500px) {
display: flex;
flex-direction: column;
}
overflow: hidden;
:global(a) {
color: var(--accent-color);
&:hover {
text-decoration: underline;
}
}
&__content {
padding: 5rem max(8vw, 1rem);
max-width: 100%;
padding: var(--header-height) 0 0 var(--sidebar-width);
overflow-x: hidden;
overflow-y: auto;
:global(a) {
color: hsl(216, 50%, 50%);
}
background-color: hsl(220, 13%, 91%);
:global(h1) {
font-size: 54px;