css updates

kennethlove · Oct 10, 2023 · 5cbf2ac · 5cbf2ac
1 parent 959bd68
commit 5cbf2ac
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 28 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
@@ -28,39 +28,82 @@ body {
 
 .container {
     display: grid;
-    gap: 1rem;
-    grid-auto-rows: minmax(100px, auto);
-    grid-template-columns: repeat(8, 1fr);
+    gap: 0.5rem;
 }
 
 .container>* {
     // flex: 1 100%;
 }
 
-@media all and (min-width: 600px) {
+@media all and (min-width: 960px) {
+    .container {
+        grid-template-columns: repeat(8, 1fr);
+    }
+
     .side {
-        // flex: 1 auto;
+        grid-column-start: 1;
+        grid-column-end: 3;
+    }
+
+    .main {
+        grid-column-start: 3;
+        grid-column-end: 8;
     }
 }
 
-@media all and (min-width: 800px) {
+@media screen and (min-width: 1100px) {
+    .container {
+        grid-template-columns: 1fr 2fr;
+    }
+
+    .side {
+        grid-column-start: 1;
+        grid-column-end: 2;
+    }
+
     .main {
-        // flex: 3 0px;
+        grid-column-start: 2;
+        grid-column-end: 3;
+    }
+
+}
+
+@media screen and (min-width: 1400px) {
+    .container {
+        grid-template-columns: repeat(6, 1fr);
     }
 
     .side {
-        // order: 1;
+        grid-column-start: 2;
+        grid-column-end: 3;
     }
 
     .main {
-        // order: 2;
+        grid-column-start: 3;
+        grid-column-end: 6;
+    }
+}
+
+@media all and (max-width: 960px) {
+    .container {
+        grid-template-columns: 1fr;
+    }
+
+    .side {
+        grid-row-start: 2;
+        grid-row-end: 3;
+    }
+
+    .main {
+        grid-row-start: 1;
+        grid-row-end: 2;
+        grid-column-start: 1;
+        grid-column-end: 2;
+        padding-left: 1rem;
     }
 }
 
 .side {
-    grid-column-start: 1;
-    grid-column-end: 3;
-    grid-row: 1;
     padding-left: 1rem;
 
 
@@ -103,9 +146,7 @@ body {
 }
 
 .main {
-    grid-column-start: 3;
-    grid-column-end: 8;
-    grid-row: 1;
+    padding-right: 1rem;
 }
 
 h1,
@@ -179,6 +220,15 @@ table {
     max-width: 80vw;
 }
 
+@media screen and (max-width: 960px) {
+
+    blockquote,
+    p,
+    table {
+        max-width: 95vw;
+    }
+}
+
 blockquote {
     background-color: #625c7b;
     margin-left: 0;
@@ -195,7 +245,7 @@ table {
     border-collapse: separate;
 
     th {
-        border-bottom: 1px solid yellow;
+        border-bottom: 2px solid $ff_lightyellow;
         padding-bottom: 0.5rem;
         font-weight: bold;
         letter-spacing: 0.1rem;