diff --git a/themes/starless/assets/css/starless.css b/themes/starless/assets/css/starless.css index 3d02b95..d6feaae 100644 --- a/themes/starless/assets/css/starless.css +++ b/themes/starless/assets/css/starless.css @@ -101,7 +101,7 @@ width: 100%; max-width: 80rem; margin-inline: auto; - padding: var(--space-16) var(--space-8); + padding: 0 var(--space-8); display: flex; gap: var(--space-16); } @@ -110,17 +110,23 @@ flex: 1; min-width: 0; max-width: 48rem; - padding-top: var(--space-2); + padding-block: calc(var(--space-16) + var(--space-2)) var(--space-16); } .site-sidebar { width: 18rem; flex-shrink: 0; + position: sticky; + top: 0; + height: 100vh; + height: 100dvh; display: flex; flex-direction: column; gap: var(--space-12); + padding-block: var(--space-16); padding-right: var(--space-8); border-right: 1px solid var(--line); + overflow: hidden; color: var(--text-muted); } @@ -133,7 +139,11 @@ .site-nav { display: flex; flex-direction: column; + flex: 1; + min-height: 0; gap: var(--space-1); + overflow-y: auto; + padding-right: var(--space-3); font-size: 14px; } } @@ -163,11 +173,6 @@ color: var(--primary); } - .page-link .material-symbols-outlined { - margin-left: var(--space-1); - font-size: 18px; - } - .rule { border: 0; border-top: 1px solid var(--line); @@ -277,7 +282,7 @@ } .tree-link--nested { - padding-block: 0.125rem; + padding-block: 0; } .tree-link--nested:not(.tree-link--current):hover { @@ -286,7 +291,7 @@ .tree-link--leaf { display: block; - padding-block: 0.125rem; + padding-block: 0; font-style: italic; } @@ -314,7 +319,7 @@ margin: var(--space-1) 0 var(--space-2) var(--space-6); display: flex; flex-direction: column; - gap: var(--space-1); + gap: 0.125rem; color: var(--text-muted); font-size: 13px; } @@ -482,6 +487,12 @@ } } +.page-link .material-symbols-outlined { + margin-left: var(--space-1); + font-size: 16px; + font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20; +} + @layer prose { .content :where(h1, h2, h3, h4) { color: var(--text); @@ -660,14 +671,27 @@ .site-sidebar { width: auto; + position: static; + top: auto; + height: auto; + padding-block: 0; padding-right: 0; padding-bottom: var(--space-8); border-right: 0; border-bottom: 1px solid var(--line); + overflow: visible; } .site-main { max-width: none; + padding-block: 0; + } + + .site-nav { + flex: none; + min-height: auto; + overflow: visible; + padding-right: 0; } .search-dialog {