canvas layout styling

assets/css/components/content.css

@@ -1,16 +1,15 @@
 
 /* Content grid
 /* ---------------------------------------------------------- */
-.gh-content {
+.gh-canvas {
     display: grid;
-    grid-row-gap: 1.5em;
     grid-template-columns:
     [full-start]
       minmax(calc(calc(100% - 720px) / 2), 1fr)
         [wide-start]
             1fr
                 [main-start]
-                      repeat(10, [col-start] 1fr)
+                    repeat(10, [col-start] 1fr)
                 [main-end]
             1fr
         [wide-end]
@@ -20,7 +19,7 @@
 }
 
 @media (max-width: 600px) {
-    .gh-content {
+    .gh-canvas {
         grid-template-columns:
             [full-start]
               minmax(calc(calc(100% - 720px) / 2), 1fr)
@@ -33,7 +32,7 @@
     }
 }
 
-.gh-content > * {
+.gh-canvas > * {
     grid-column: main-start / main-end;
 }
 
@@ -102,21 +101,28 @@ tfoot {
 /* Cards
 /* ---------------------------------------------------------- */
 
-.kg-card {
+.gh-content-body > * + * {
-    margin: 7vw 0;
+    margin-top: 1.5em;
+}
+.gh-content-body > h1 + *,
+.gh-content-body > h2 + *,
+.gh-content-body > h3 + *,
+.gh-content-body > h4 + *,
+.gh-content-body > h5 + *,
+.gh-content-body > h6 + * {
+    margin-top: 0;
 }
 
-/* Do we need this anymore?
+:not(.kg-card):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + .kg-card {
-.kg-embed-card {
+    margin-top: 7vw;
-    display: flex;
+}
-    flex-direction: column;
+
-    align-items: center;
+.kg-card + :not(.kg-card):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
-    width: 100%;
+    margin-top: 7vw;
 }
-*/
 
 .kg-card figcaption {
-    padding: 1.5rem;
+    padding: 1.5rem 1.5rem 0;
     font-size: 1.3rem;
     line-height: 1.4em;
     font-weight: 600;
@@ -125,13 +131,21 @@ tfoot {
     opacity: 0.4;
 }
 
-.gh-content > pre {
+.gh-canvas > pre {
     overflow: scroll;
     border-radius: 5px;
     box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);
     padding: 16px 20px;
 }
 
+
+.kg-embed-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
 /* Card captions
 /* ---------------------------------------------------------- */
 .kg-width-full.kg-card-hascaption {

page.hbs

@@ -1,9 +1,9 @@
 {{!< default}}
 
 {{#post}}
-<article class="post-content {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
+<article class="gh-page {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
 
-    <div class="post-content-body">
+    <div class="gh-content-body gh-canvas">
         {{content}}
     </div>
 

post.hbs

@@ -3,25 +3,25 @@
 {{#post}}
 <article class="gh-post {{post_class}}">
 
-    <header class="gh-post-header">
+    <header class="gh-post-header gh-canvas">
         <h1 class="gh-post-title">{{title}}</h1>
+
+        {{#if custom_excerpt}}
+            <p class="gh-post-excerpt">{{custom_excerpt}}</p>
+        {{/if}}
+
+        {{#if feature_image}}
+        <div class="gh-post-image">
+            <img class="kg-image" src="{{feature_image}}" alt="{{title}}" />
+        </div>
+        {{/if}}
     </header>
 
-    {{#if custom_excerpt}}
+    <div class="gh-content-body gh-canvas">
-        <p class="gh-post-excerpt">{{custom_excerpt}}</p>
-    {{/if}}
-
-    {{#if feature_image}}
-    <div class="gh-post-image">
-        <img class="kg-image" src="{{feature_image}}" alt="{{title}}" />
-    </div>
-    {{/if}}
-
-    <div class="gh-post-body">
         {{content}}
     </div>
 
-    <footer class="gh-post-footer">
+    <footer class="gh-post-footer gh-canvas">
 
         <div class="gh-post-authors">
             Written by {{#foreach authors}}<a href="{{url}}">{{name}}</a>{{/foreach}}
@@ -52,4 +52,4 @@ images.forEach(function (image) {
 </script>
 {{/contentFor}}
 
-{{!-- The #contentFor helper sends everything in it to the matching #block helper in default.hbs --}}
+{{!-- The #contentFor helper sends everything in it to the matching #block helper in default.hbs --}}