From e2876ea3b4180798fdce142e9a7077d5856e6076 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Wed, 14 Jul 2021 11:35:22 +0200 Subject: collapse chapters --- styles/layout.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) (limited to 'styles') diff --git a/styles/layout.css b/styles/layout.css index 70f94dc..96a3604 100644 --- a/styles/layout.css +++ b/styles/layout.css @@ -1,19 +1,23 @@ :root { - --nav-width: 200px; + --collapse-horizontal-gap: 0; + --nav-width: calc(200px * (1 - var(--collapse-horizontal-gap))) !important; --page-width: 700px; --page-margins: 24px; } .centeredPage { + transition-property: gap, max-width; + transition-duration: 500ms; + max-width: calc(var(--nav-width) + var(--page-width) + var(--page-margins)); margin: 0 auto; margin-top: 96px; padding: 0 var(--page-margins); display: grid; - gap: var(--page-margins); - grid-template-columns: var(--nav-width) 1fr; grid-auto-rows: auto; + + gap: var(--page-margins) calc((1 - var(--collapse-horizontal-gap)) * var(--page-margins)); } .titleWrapper { @@ -28,6 +32,10 @@ .navAreaWrapper { grid-column: 1; grid-row: 2; + + transition-property: width; + transition-duration: 500ms; + width: var(--nav-width); } .navAreaWrapper > .sticky { position: sticky; -- cgit v1.2.3