Welcome to little lamb

Code » qmdoc » commit 7e374bc

Tweak CSS: Use grid to align our TOC & page

author Olivier Brunel
2023-01-02 20:05:48 UTC
committer Olivier Brunel
2023-01-04 15:10:17 UTC
parent ce81c6207d12ccde1c0a52dd207772cbd6972966

Tweak CSS: Use grid to align our TOC & page

Didn't known about this whole grid business, but it seems pretty neat.
Allows to split the page into cells nicely, and adding a twist of sticky
position makes things nice and simpler than playing with margin, padding
and other issues.

dark.css +1 -1
light.css +1 -1
struct.css +13 -10

diff --git a/dark.css b/dark.css
index caf4887..5877e65 100644
--- a/dark.css
+++ b/dark.css
@@ -2,7 +2,7 @@
     :root {
         color-scheme: dark;
     }
-    main header {
+    main header section {
         background: #17679B;
     }
     main header section h1 {
diff --git a/light.css b/light.css
index bfd9860..ce73aba 100644
--- a/light.css
+++ b/light.css
@@ -1,7 +1,7 @@
 :root {
     color-scheme: light;
 }
-main header {
+main header section {
     background: #2980B9;
 }
 main header section h1 {
diff --git a/struct.css b/struct.css
index eb738e4..4687441 100644
--- a/struct.css
+++ b/struct.css
@@ -18,18 +18,23 @@ time, mark, audio, video {
 html, body {
     height: 100%;
 }
-main header {
-    position: fixed;
-    width: 300px;
+main {
+    display: grid;
+    grid-template-areas: "toc page";
+    grid-template-columns: 300px 1fr;
     height: 100%;
-    padding-top: 88px;
+}
+main header {
+    grid-area: toc;
+    overflow: scroll;
 }
 main header section {
+    position: sticky;
+    top: 0;
+    z-index: 1;
     height: 88px;
-    margin-top: -88px;
 }
 main header section h1 {
-    margin-top: 23px;
     text-align: center;
     font-size: 1.42em;
     font-weight: 800;
@@ -43,8 +48,7 @@ main header nav {
     position: relative;
     padding: 8px;
     padding-bottom: 42px; /* 23 (section h1 margin-top) + 19 */
-    height: 100%;
-    min-height: 100%;
+    min-height: calc(100% - 88px);
     overflow: hidden scroll;
     overscroll-behavior-y: contain;
 }
@@ -84,8 +88,8 @@ main header nav > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul
     padding-left: 72px;
 }
 main > section {
+    grid-area: page;
     position: relative;
-    margin-left: 300px;
     padding: 23px 42px 0 42px;
     min-height: 100%;
     overflow: hidden scroll;
@@ -153,7 +157,6 @@ main section h1 {
 }
 main header section h1 {
     text-transform: inherit;
-    padding-top: inherit;
     padding-bottom: inherit;
 }
 main section h2 {