more styling pass on layout and typography
MODIFY
src/assets/docs.scss
src/assets/docs.scss
.content-docs {
- @mixin h3 {
- font-size: var(--p-large);
line-height: 2rem;
- }
// Typography
h1,
h3,
.h3 {
- @include h3;
+ font-size: var(--p-large);
+ line-height: 2rem;
}
a {
margin: var(--micro) 0;
}
+ ol {
+ margin-left: 2rem;
+ list-style-type: decimal;
+ }
+
li + li {
margin-top: var(--macro);
}
// Code blocks
- code {
- min-height: 2rem;
- padding: 0 0.5rem;
+ :not(pre) > code {
+ padding: 0.35rem 0.5rem;
border-radius: 0.75rem;
background: var(--brand-light);
-
- &:not([class]) {
- display: inline-flex;
- align-items: center;
+ white-space: pre;
}
- &[class*="language"] {
+ pre {
overflow: auto;
display: block;
+ margin: var(--micro) 0;
padding: 1.25rem 1.5rem;
+ border-radius: 0.75rem;
background: var(--sand-dark);
- }
- &.language-Dockerfile {
+ &:not(.language-null) {
background: var(--off-white);
}
}
- pre {
- margin: var(--micro) 0;
- }
-
blockquote {
margin: 2rem 0;
padding: 1.5rem;

MODIFY
src/routes/docs/_layout.svelte
src/routes/docs/_layout.svelte
import Search from "../../components/docs/search.svelte";
</script>
-<div class="flex mx-auto max-w-row px-8 py-10 w-full">
+<div class="flex mx-auto max-w-row px-8 py-10 w-screen">
<div class="w-2/5 pt-20">
<Menu />
</div>

more styling pass on layout and typography