Responsive improvements

More reliable spacing using vmin for vertical rhythm, which automatically prevents issues at larger viewport sizes when using vw

assets/css/components/content.css

@@ -2,6 +2,7 @@
 
 /* Content grid
 /* ---------------------------------------------------------- */
+
 .gh-canvas {
     display: grid;
     grid-template-columns:
@@ -43,11 +44,11 @@
             [full-start]
             4vw
                 [wide-start]
-                    auto
+                    0
                         [main-start]
                             auto
                         [main-end]
-                    auto
+                    0
                 [wide-end]
             4vw
             [full-end]
@@ -72,18 +73,7 @@
 /* ---------------------------------------------------------- */
 
 .gh-content > * + * {
-    margin-top: 4vw;
+    margin-top: 4vmin;
-}
-
-@media (min-width: 600px) {
-    .gh-content > * + * {
-        margin-top: 3vw;
-    }
-}
-@media (min-width: 1100px) {
-    .gh-content > * + * {
-        margin-top: 4.2rem;
-    }
 }
 
 .gh-content > [id] + * {
@@ -117,11 +107,11 @@
 }
 
 .gh-content hr {
-    margin-top: 5vw;
+    margin-top: 6vmin;
 }
 
 .gh-content hr + * {
-    margin-top: 5vw !important;
+    margin-top: 6vmin !important;
 }
 
 .gh-content blockquote {
@@ -158,30 +148,11 @@
 /* ---------------------------------------------------------- */
 
 :not(.kg-card):not([id]) + .kg-card {
-    margin-top: 6vw;
+    margin-top: 6vmin;
 }
 
 .kg-card + :not(.kg-card):not([id]) {
-    margin-top: 6vw;
+    margin-top: 6vmin;
-}
-
-@media (min-width: 600px) {
-    :not(.kg-card):not([id]) + .kg-card {
-        margin-top: 6vw;
-    }
-
-    .kg-card + :not(.kg-card):not([id]) {
-        margin-top: 6vw;
-    }
-}
-@media (min-width: 1100px) {
-    :not(.kg-card):not([id]) + .kg-card {
-        margin-top: 6rem;
-    }
-
-    .kg-card + :not(.kg-card):not([id]) {
-        margin-top: 6rem;
-    }
 }
 
 .kg-card figcaption {
@@ -415,14 +386,3 @@
 .gh-content tbody tr:last-child {
     border-bottom: 1px solid rgba(0,0,0,.1);
 }
-
-
-/* Third Party
-/* ---------------------------------------------------------- */
-
-.kg-card iframe[src*="spotify.com"] {
-    width: 100%;
-    height: 25vw;
-    min-height: 200px;
-    max-height: 400px;
-}

assets/css/screen.css

@@ -45,6 +45,14 @@ html,
     padding: 0 4vw;
 }
 
+.gh-article {
+    padding: 8vmin 0;
+}
+
+.gh-postfeed {
+    padding: 8vmin 0;
+}
+
 .gh-container {
     width: 100%;
     max-width: 1200px;
@@ -74,8 +82,8 @@ html,
 /* Index
 /* ---------------------------------------------------------- */
 
-.gh-postcard {
+.gh-postcard:not(:first-child) {
-    margin: 0 auto 6vw;
+    margin: 8vmin auto 0;
 }
 
 .gh-postcard-link {
@@ -87,7 +95,7 @@ html,
     width: 100%;
     max-height: 700px;
     object-fit: cover;
-    margin-bottom: 2vw;
+    margin-bottom: 4vmin;
 }
 
 .gh-postcard-meta {
@@ -124,8 +132,7 @@ html,
 /* ---------------------------------------------------------- */
 
 .gh-header {
-    margin: 4vw 0 0;
+    padding: 0 0 8vmin 0;
-    padding: 0 0 4vw 0;
     text-align: center;
 }
 
@@ -141,7 +148,7 @@ html,
 .gh-feature-image {
     grid-column: wide-start / wide-end;
     width: 100%;
-    margin: 4vw 0 0;
+    margin: 8vmin 0 0;
 }
 
 .gh-post-footer {
@@ -153,13 +160,13 @@ html,
 /* ---------------------------------------------------------- */
 
 .gh-readmore {
-    padding: 4vw;
+    padding: 8vmin 4vw;
     font-size: 2.6rem;
 }
 
 .gh-readmore .gh-container {
     display: grid;
-    grid-gap: 4vw;
+    grid-gap: 8vmin;
     grid-template-columns: 1fr 1fr;
 }
 
@@ -241,12 +248,12 @@ html,
 .gh-error-stack {
     max-width: 600px;
     margin: 0 auto 0;
-    padding: 4vw 0;
+    padding: 8vmin 0;
     text-align: left;
 }
 
 .gh-error-stack-list {
-    margin: 2vw 0 0;
+    margin: 4vmin 0 0;
     font-size: 1.4rem;
 }
 
@@ -270,7 +277,7 @@ html,
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 4vw;
+    padding: 8vmin 4vw;
 }
 
 .gh-foot .gh-container {
@@ -297,7 +304,7 @@ html,
 }
 
 .gh-foot-menu .nav li {
-    margin: 0 0.75vw;
+    margin: 0 1.5vmin;
     padding: 0;
 }
 
@@ -319,8 +326,4 @@ html,
     .gh-foot-menu .nav {
         font-size: 1.6rem;
     }
-    .gh-foot-menu .nav li {
-        margin: 0 1rem;
-        padding: 0;
-    }
 }

index.hbs

@@ -3,7 +3,7 @@
 <div class="gh-page">
     <div class="gh-container">
 
-        <div class="post-feed">
+        <div class="gh-postfeed">
         {{#foreach posts}}
 
             {{> "postcard"}} {{!-- partials/postcard.hbs --}}

page.hbs

@@ -2,7 +2,7 @@
 
 {{#post}}
 
-<article class="{{post_class}}">
+<article class="gh-article {{post_class}}">
 
     <header class="gh-header gh-canvas">
         <h1 class="gh-title">{{title}}</h1>

post.hbs

@@ -1,7 +1,7 @@
 {{!< default}}
 
 {{#post}}
-<article class="{{post_class}}">
+<article class="gh-article {{post_class}}">
 
     <header class="gh-header gh-canvas">
         <span class="gh-post-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span>