fix(demo): layout

davidenke · Oct 21, 2024 · 39474a8 · 39474a8
1 parent b7bf4b1
commit 39474a8
Showing 1 changed file with 21 additions and 9 deletions.
diff --git a/src/demo/demo.css b/src/demo/demo.css
@@ -24,22 +24,25 @@ header {
   display: grid;
   grid-template:
     'title nav'
-    'description .' / 1fr;
-  gap: 10px;
+    'desc desc' / 1fr;
+  gap: 5px 10px;
 
   h1 {
     grid-area: title;
+    align-self: end;
   }
 
   p {
-    grid-area: description;
+    grid-area: desc;
   }
 
   nav {
     grid-area: nav;
     display: flex;
-    flex-flow: row nowrap;
-    gap: 10px;
+    flex-flow: row wrap;
+    gap: 0 10px;
+    align-items: center;
+    justify-content: center;
 
     img {
       height: 2em;
@@ -118,7 +121,6 @@ legend {
 }
 
 #input > div,
-pre > div,
 code,
 textarea,
 pre {
@@ -150,11 +152,20 @@ pre {
     flex-direction: row;
   }
 
-  code {
+  > div {
     flex: 1 1 0;
+    height: 0;
+    width: 100%;
+
+    @media (orientation: portrait) {
+      height: 100%;
+      width: 0;
+    }
+  }
+
+  code {
     display: block;
     box-sizing: border-box;
-    max-height: 100%;
     padding: 10px;
     overflow: auto;
   }
@@ -230,7 +241,8 @@ pre {
     z-index: 2;
 
     display: flex;
-    flex-flow: row nowrap;
+    flex-flow: row wrap;
+    justify-content: end;
     gap: 10px;
   }
 }