CSS grid instead of flexbox

kennethlove · Oct 10, 2023 · 959bd68 · 959bd68
1 parent 0077d2f
commit 959bd68
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 59 deletions.
diff --git a/themes/editor/static/dist/kennethlove.css b/themes/editor/static/dist/kennethlove.css
diff --git a/themes/editor/static/dist/kennethlove.css.map b/themes/editor/static/dist/kennethlove.css.map
diff --git a/themes/editor/static/src/kennethlove.scss b/themes/editor/static/src/kennethlove.scss
@@ -27,38 +27,42 @@ body {
 }
 
 .container {
-    display: flex;
-    flex-flow: row wrap;
-    flex-wrap: wrap-reverse;
-    justify-content: space-evenly;
+    display: grid;
+    gap: 1rem;
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-columns: repeat(8, 1fr);
 }
 
 .container>* {
-    flex: 1 100%;
+    // flex: 1 100%;
 }
 
 @media all and (min-width: 600px) {
     .side {
-        flex: 1 auto;
+        // flex: 1 auto;
     }
 }
 
 @media all and (min-width: 800px) {
     .main {
-        flex: 3 0px;
+        // flex: 3 0px;
     }
 
     .side {
-        order: 1;
+        // order: 1;
     }
 
     .main {
-        order: 2;
+        // order: 2;
     }
 }
 
 .side {
-    padding: 1rem;
+    grid-column-start: 1;
+    grid-column-end: 3;
+    grid-row: 1;
+    padding-left: 1rem;
+
 
     h1 {
         font-size: inherit;
@@ -99,9 +103,9 @@ body {
 }
 
 .main {
-    flex-basis: 75%;
-    padding: 1rem;
-    max-width: 90%;
+    grid-column-start: 3;
+    grid-column-end: 8;
+    grid-row: 1;
 }
 
 h1,
@@ -257,27 +261,40 @@ strong {
 }
 
 .post-details {
-    margin-bottom: 1em;
-    max-width: 58em;
+    border-bottom: 1px solid $ff_darkyellow;
+    margin-bottom: 1rem;
+    max-width: 70vw;
+
+    ul {
+        max-width: fit-content;
+
+        li {
+            margin-right: 1rem;
+        }
+    }
 
     time {
         display: block;
-        padding-top: 1em;
+        padding-top: 1rem;
     }
 }
 
-.post-content figure img {
-    height: auto;
-    max-width: 58em;
-    width: 100%;
-}
-
 .post-content {
     .highlight {
         border: 1px solid $ff_lilac;
         margin-bottom: 1em;
     }
 
+    figure img {
+        height: auto;
+        max-width: 50vw;
+        width: 100%;
+    }
+
+    p {
+        max-width: 70vw;
+    }
+
     p code {
         background: $ff_lilac;
         color: $ff_purple;