Welcome to little lamb

Code » qmdoc » commit 7cc7ea6

struct.css: Put grid stuff under @support..

author Olivier Brunel
2023-01-02 20:52:14 UTC
committer Olivier Brunel
2023-01-04 15:10:17 UTC
parent 7e374bc0b9a179bb823c927f6766a8dd0337a458

struct.css: Put grid stuff under @support..

..and make it that with non-supporting browser it still looks good.

no-toc.css +4 -1
struct.css +22 -8

diff --git a/no-toc.css b/no-toc.css
index aa391df..833f47d 100644
--- a/no-toc.css
+++ b/no-toc.css
@@ -1,4 +1,7 @@
+main {
+    display: block;
+    height: initial;
+}
 main > section {
-    position: inherit;
     margin-left: inherit;
 }
diff --git a/struct.css b/struct.css
index 4687441..6b27b87 100644
--- a/struct.css
+++ b/struct.css
@@ -18,15 +18,29 @@ time, mark, audio, video {
 html, body {
     height: 100%;
 }
-main {
-    display: grid;
-    grid-template-areas: "toc page";
-    grid-template-columns: 300px 1fr;
-    height: 100%;
-}
 main header {
-    grid-area: toc;
-    overflow: scroll;
+    width: 300px;
+    float: left;
+}
+main > section {
+    margin-left: 300px;
+}
+@supports (display: grid) {
+    main {
+        display: grid;
+        grid-template-areas: "toc page";
+        grid-template-columns: 300px 1fr;
+        height: 100%;
+    }
+    main header {
+        grid-area: toc;
+        overflow: scroll;
+        width: inherit;
+        float: inherit;
+    }
+    main > section {
+        margin-left: inherit;
+    }
 }
 main header section {
     position: sticky;