Responsive layout was awful

andy-preston · Jul 4, 2024 · 92d760a · 92d760a
1 parent 1c1a6af
commit 92d760a
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 22 deletions.
diff --git a/style/_display.css b/style/_display.css
@@ -42,6 +42,6 @@ img {
 }
 
 hr {
-    margin-top: 2lh;
-    margin-bottom: 2lh;
+    margin-top: 1lh;
+    margin-bottom: 1lh;
 }
diff --git a/style/_front-page.css b/style/_front-page.css
@@ -0,0 +1,20 @@
+h1 span, p.tag-line span {
+    display: inline-block;
+}
+
+.front-page h1 {
+    margin-top: 1em;
+}
+
+#cover-pic {
+    margin-top: 1lh;
+    margin-bottom: 1lh;
+
+    & img {
+        max-height: 70vh;
+        max-width: 35vw;
+        width: auto;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
diff --git a/style/_index.css b/style/_index.css
diff --git a/style/_section_article_aside.css b/style/_section_article_aside.css
@@ -1,24 +1,18 @@
 section {
     display: grid;
     gap: 1em;
+    grid-template-columns: repeat(auto-fit, minmax(max(45vw, 30em), 1fr));
+
+    & article {
+        max-width: max(45vw, 30em)
+    }
 
     &.front-page {
-        grid-template-columns: repeat(
-            auto-fit,
-            minmax(max(45vw, 23em), 1fr)
-        );
+        row-gap: 5lh;
     }
 
     &:not(.front-page) {
-        grid-template-columns: repeat(
-            auto-fit,
-            minmax(max(45vw, 30em), 1fr)
-        );
         margin-bottom: 2lh;
-
-        > article {
-            max-width: max(45vw, 30em);
-        }
     }
 }
 

diff --git a/style/style.css b/style/style.css
@@ -1,6 +1,6 @@
 @import "./_colours.css";
 @import "./_text.css";
 @import "./_display.css";
-@import "./_index.css";
+@import "./_front-page.css";
 @import "./_section_article_aside.css";
 @import "./_code.css";