Improve article children spacing

partials/awards.hbs

@@ -4,6 +4,7 @@
     <div class="stack">
       {{#each resume.awards}}
         <article>
+          <header>
             <div class="spaced-list">
               <h4>{{title}}</h4>
               {{#date}}
@@ -17,6 +18,7 @@
                 </div>
               {{/awarder}}
             </div>
+          </header>
           {{#summary}}
             <p>{{.}}</p>
           {{/summary}}

partials/education.hbs

@@ -4,6 +4,7 @@
     <div class="stack">
       {{#each resume.education}}
         <article>
+          <header>
             <div class="spaced-list">
               <h4>{{institution}}</h4>
               <span>
@@ -19,6 +20,7 @@
                 <a href="{{.}}">{{.}}</a>
               {{/url}}
             </div>
+          </header>
           {{#studyType}}
             <p>{{.}}</p>
           {{/studyType}}

partials/header.hbs

@@ -1,4 +1,4 @@
-<header>
+<header class="masthead">
   {{#name}}
     <h1>{{.}}</h1>
   {{/name}}

partials/projects.hbs

@@ -4,6 +4,7 @@
     <div class="stack">
       {{#each resume.projects}}
         <article>
+          <header>
             <div class="spaced-list">
               <h4>{{name}}</h4>
               <span>
@@ -24,6 +25,7 @@
                 <a href="{{.}}">{{.}}</a>
               {{/url}}
             </div>
+          </header>
           {{#description}}
             <p>{{.}}</p>
           {{/description}}

partials/publications.hbs

@@ -4,6 +4,7 @@
     <div class="stack">
       {{#each resume.publications}}
         <article>
+          <header>
             <div class="spaced-list">
               <h4>{{name}}</h4>
               {{#releaseDate}}
@@ -20,6 +21,7 @@
                 <a href="{{.}}">{{.}}</a>
               {{/url}}
             </div>
+          </header>
           {{#summary}}
             <p>{{.}}</p>
           {{/summary}}

partials/volunteer.hbs

@@ -4,6 +4,7 @@
     <div class="stack">
       {{#each resume.volunteer}}
         <article>
+          <header>
             <div class="spaced-list">
               <h4>{{organization}}</h4>
               <span>
@@ -19,6 +20,7 @@
                 <a href="{{.}}">{{.}}</a>
               {{/url}}
             </div>
+          </header>
           {{#summary}}
             <p>{{.}}</p>
           {{/summary}}

partials/work.hbs

@@ -4,6 +4,7 @@
     <div class="stack">
       {{#each resume.work}}
         <article>
+          <header>
             <div class="spaced-list">
               <h4>{{name}}</h4>
               <span>
@@ -19,6 +20,7 @@
                 <a href="{{.}}">{{.}}</a>
               {{/url}}
             </div>
+          </header>
           {{#summary}}
             <p>{{.}}</p>
           {{/summary}}

style.css

@@ -116,14 +116,6 @@ h6 {
   font-size: var(--scale0);
 }
 
-p:not(:first-child) {
-  margin-top: 1em;
-}
-
-p:not(:last-child) {
-  margin-bottom: 1em;
-}
-
 blockquote {
   border-left: 0.2em solid var(--mutedColor);
   padding-left: 1em;
@@ -138,7 +130,7 @@ cite::before {
   content: '— ';
 }
 
-header {
+.masthead {
   background: var(--mutedColor);
   display: inherit;
   gap: inherit;
@@ -148,11 +140,16 @@ header {
   row-gap: 0;
 }
 
-header > *,
+.masthead > *,
 section {
   grid-column: main;
 }
 
+article > * + *,
+blockquote > * + * {
+  margin-top: 0.6em;
+}
+
 .stack {
   display: grid;
   gap: 1.5em;
@@ -200,7 +197,7 @@ section {
     margin-bottom: inherit;
   }
 
-  header > *,
+  .masthead > *,
   section {
     grid-column: content;
   }

tap-snapshots/test-render.js-TAP.test.js

@@ -132,14 +132,6 @@ h6 {
   font-size: var(--scale0);
 }
 
-p:not(:first-child) {
-  margin-top: 1em;
-}
-
-p:not(:last-child) {
-  margin-bottom: 1em;
-}
-
 blockquote {
   border-left: 0.2em solid var(--mutedColor);
   padding-left: 1em;
@@ -154,7 +146,7 @@ cite::before {
   content: '— ';
 }
 
-header {
+.masthead {
   background: var(--mutedColor);
   display: inherit;
   gap: inherit;
@@ -164,11 +156,16 @@ header {
   row-gap: 0;
 }
 
-header > *,
+.masthead > *,
 section {
   grid-column: main;
 }
 
+article > * + *,
+blockquote > * + * {
+  margin-top: 0.6em;
+}
+
 .stack {
   display: grid;
   gap: 1.5em;
@@ -216,7 +213,7 @@ section {
     margin-bottom: inherit;
   }
 
-  header > *,
+  .masthead > *,
   section {
     grid-column: content;
   }
@@ -232,7 +229,7 @@ section {
 </style>
   </head>
   <body>
-      <header>
+      <header class="masthead">
           <h1>Richard Hendriks</h1>
           <h2>Programmer</h2>
       </header>
@@ -277,6 +274,7 @@ section {
         <h3>Work</h3>
         <div class="stack">
             <article>
+              <header>
                 <div class="spaced-list">
                   <h4>Pied Piper</h4>
                   <span>
@@ -288,6 +286,7 @@ section {
                     <strong>CEO/President</strong>
                     <a href="http://piedpiper.example.com">http://piedpiper.example.com</a>
                 </div>
+              </header>
                 <p>Pied Piper is a multi-platform technology based on a proprietary universal compression algorithm that has consistently fielded high Weisman Scores™ that are not merely competitive, but approach the theoretical limit of lossless compression.</p>
                 <h5>Highlights</h5>
                 <ul>
@@ -302,6 +301,7 @@ section {
         <h3>Volunteer</h3>
         <div class="stack">
             <article>
+              <header>
                 <div class="spaced-list">
                   <h4>CoderDojo</h4>
                   <span>
@@ -313,6 +313,7 @@ section {
                     <strong>Teacher</strong>
                     <a href="http://coderdojo.example.com/">http://coderdojo.example.com/</a>
                 </div>
+              </header>
                 <p>Global movement of free coding clubs for young people.</p>
                 <h5>Highlights</h5>
                 <ul>
@@ -325,6 +326,7 @@ section {
         <h3>Education</h3>
         <div class="stack">
             <article>
+              <header>
                 <div class="spaced-list">
                   <h4>University of Oklahoma</h4>
                   <span>
@@ -336,6 +338,7 @@ section {
                     <strong>Information Technology</strong>
                     <a href="https://www.ou.edu/">https://www.ou.edu/</a>
                 </div>
+              </header>
                 <p>Bachelor</p>
                 <h5>Courses</h5>
                 <ul>
@@ -349,6 +352,7 @@ section {
         <h3>Projects</h3>
         <div class="stack">
             <article>
+              <header>
                 <div class="spaced-list">
                   <h4>Miss Direction</h4>
                   <span>
@@ -363,6 +367,7 @@ section {
                   </span>
                     <a href="missdirection.example.com">missdirection.example.com</a>
                 </div>
+              </header>
                 <p>A mapping engine that misguides you</p>
                 <h5>Highlights</h5>
                 <ul>
@@ -377,6 +382,7 @@ section {
         <h3>Awards</h3>
         <div class="stack">
             <article>
+              <header>
                 <div class="spaced-list">
                   <h4>Digital Compression Pioneer Award</h4>
                     <time datetime="2014-11-01">Nov 2014</time>
@@ -386,6 +392,7 @@ section {
                       Awarded by <strong>Techcrunch</strong>
                     </div>
                 </div>
+              </header>
                 <p>There is no spoon.</p>
             </article>
         </div>
@@ -394,6 +401,7 @@ section {
         <h3>Publications</h3>
         <div class="stack">
             <article>
+              <header>
                 <div class="spaced-list">
                   <h4>Video compression for 3d media</h4>
                     <time datetime="2014-10-01">Oct 2014</time>
@@ -404,6 +412,7 @@ section {
                     </span>
                     <a href="http://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)">http://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)</a>
                 </div>
+              </header>
                 <p>Innovative middle-out compression algorithm that changes the way we store data.</p>
             </article>
         </div>