aboutsummaryrefslogtreecommitdiff
path: root/styles
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2021-07-14 11:35:22 +0200
committerlonkaars <loek@pipeframe.xyz>2021-07-14 11:35:22 +0200
commite2876ea3b4180798fdce142e9a7077d5856e6076 (patch)
tree04c2f6f4f3cef2bde451521ba7f1525be3ab96ef /styles
parentbe8c032b14910979338f226f19b787378cb3e7a8 (diff)
collapse chapters
Diffstat (limited to 'styles')
-rw-r--r--styles/layout.css14
1 files changed, 11 insertions, 3 deletions
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;