diff options
Diffstat (limited to 'web/pw-server/src/routes/docs/__layout.svelte')
| -rw-r--r-- | web/pw-server/src/routes/docs/__layout.svelte | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/web/pw-server/src/routes/docs/__layout.svelte b/web/pw-server/src/routes/docs/__layout.svelte new file mode 100644 index 0000000..40c4317 --- /dev/null +++ b/web/pw-server/src/routes/docs/__layout.svelte @@ -0,0 +1,60 @@ +<script> + import TocEntry from "$lib/components/docs/TocEntry.svelte"; +</script> + +<div class="container"> + <div class="sidebar"> + <div class="sidebar-content"> + <h2>Docs</h2> + <div class="sidebar-nav-group"> + <TocEntry href="/docs/rules" text="Rules" /> + </div> + </div> + </div> + <div class="content-container"> + <div class="content"> + <slot /> + </div> + </div> +</div> + +<style lang="scss"> + @use "src/styles/variables"; + + .container { + display: flex; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, + "Open Sans", "Helvetica Neue", sans-serif; + } + + .sidebar { + width: 300px; + line-height: 20px; + border-right: 1px solid variables.$light-grey; + } + + .sidebar-content { + padding: 32px 16px; + position: sticky; + align-self: flex-start; + top: 0px; + } + + .sidebar-content h2 { + margin: 16px 0; + } + + .sidebar-nav-group { + padding: 0 8px; + } + + .content-container { + padding: 16px 0; + flex-grow: 1; + } + + .content { + max-width: 75%; + margin: 0 auto; + } +</style> |