fix(layout): dim meta content

partials/awards.hbs

@@ -6,6 +6,7 @@
         <article>
           <header>
             <h4>{{title}}</h4>
+            <div class="meta">
               {{#awarder}}
                 <div>
                   Awarded by <strong>{{.}}</strong>
@@ -14,6 +15,7 @@
               {{#date}}
                 <time datetime="{{.}}">{{formatDate .}}</time>
               {{/date}}
+            </div>
           </header>
           {{#summary}}
             {{{markdown .}}}

partials/certificates.hbs

@@ -6,6 +6,7 @@
         <article>
           <header>
             <h4>{{> link}}</h4>
+            <div class="meta">
               {{#issuer}}
                 <div>
                   Issued by <strong>{{.}}</strong>
@@ -14,6 +15,7 @@
               {{#date}}
                 <time datetime="{{.}}">{{formatDate .}}</time>
               {{/date}}
+            </div>
           </header>
         </article>
       {{/each}}

partials/education.hbs

@@ -6,6 +6,7 @@
         <article>
           <header>
             <h4>{{> link name=institution}}</h4>
+            <div class="meta">
               {{#area}}
                 <strong>{{.}}</strong>
               {{/area}}
@@ -13,6 +14,7 @@
                 <time datetime="{{startDate}}">{{formatDate startDate}}</time> –
                 {{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}}
               </div>
+            </div>
           </header>
           {{#studyType}}
             {{{markdown .}}}

partials/projects.hbs

@@ -6,6 +6,7 @@
         <article>
           <header>
             <h4>{{> link}}</h4>
+            <div class="meta">
               <div>
                 {{#if roles}}
                   <strong>{{join roles}}</strong>
@@ -18,6 +19,7 @@
                 <time datetime="{{startDate}}">{{formatDate startDate}}</time> –
                 {{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}}
               </div>
+            </div>
           </header>
           {{#description}}
             {{{markdown .}}}

partials/publications.hbs

@@ -6,6 +6,7 @@
         <article>
           <header>
             <h4>{{> link}}</h4>
+            <div class="meta">
               {{#publisher}}
                 <div>
                   Published by <strong>{{.}}</strong>
@@ -14,6 +15,7 @@
               {{#releaseDate}}
                 <time datetime="{{.}}">{{formatDate .}}</time>
               {{/releaseDate}}
+            </div>
           </header>
           {{#summary}}
             {{{markdown .}}}

partials/volunteer.hbs

@@ -6,11 +6,13 @@
         <article>
           <header>
             <h4>{{position}}</h4>
+            <div class="meta">
               <strong>{{> link name=organization}}</strong>
               <div>
                 <time datetime="{{startDate}}">{{formatDate startDate}}</time> –
                 {{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}}
               </div>
+            </div>
           </header>
           {{#summary}}
             {{{markdown .}}}

partials/work.hbs

@@ -6,6 +6,7 @@
         <article>
           <header>
             <h4>{{position}}</h4>
+            <div class="meta">
               <div>
                 <strong>{{> link}}</strong>
                 {{#description}}
@@ -19,6 +20,7 @@
               {{#location}}
                 <div>{{.}}</div>
               {{/location}}
+            </div>
           </header>
           {{#summary}}
             {{{markdown .}}}

style.css

@@ -173,6 +173,10 @@ blockquote > * + * {
   margin-top: 0.6em;
 }
 
+.meta {
+  color: var(--color-secondary);
+}
+
 .stack {
   display: grid;
   gap: 1.5em;

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

@@ -189,6 +189,10 @@ blockquote > * + * {
   margin-top: 0.6em;
 }
 
+.meta {
+  color: var(--color-secondary);
+}
+
 .stack {
   display: grid;
   gap: 1.5em;
@@ -299,6 +303,7 @@ blockquote > * + * {
             <article>
               <header>
                 <h4>CEO/President</h4>
+                <div class="meta">
                   <div>
                     <strong><a href="http://piedpiper.example.com">Pied Piper</a></strong>
                       <span class="bullet-item">Awesome compression company</span>
@@ -308,6 +313,7 @@ blockquote > * + * {
                     <time datetime="2014-12-01">Dec 2014</time>
                   </div>
                     <div>Palo Alto, CA</div>
+                </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>
                 <ul>
@@ -324,11 +330,13 @@ blockquote > * + * {
             <article>
               <header>
                 <h4>Teacher</h4>
+                <div class="meta">
                   <strong><a href="http://coderdojo.example.com/">CoderDojo</a></strong>
                   <div>
                     <time datetime="2012-01-01">Jan 2012</time> –
                     <time datetime="2013-01-01">Jan 2013</time>
                   </div>
+                </div>
               </header>
                 <p>Global movement of free coding clubs for young people.</p>
                 <ul>
@@ -343,11 +351,13 @@ blockquote > * + * {
             <article>
               <header>
                 <h4><a href="https://www.ou.edu/">University of Oklahoma</a></h4>
+                <div class="meta">
                     <strong>Information Technology</strong>
                   <div>
                     <time datetime="2011-06-01">Jun 2011</time> –
                     <time datetime="2014-01-01">Jan 2014</time>
                   </div>
+                </div>
               </header>
                 <p>Bachelor</p>
                 <h5>Courses</h5>
@@ -364,6 +374,7 @@ blockquote > * + * {
             <article>
               <header>
                 <h4><a href="missdirection.example.com">Miss Direction</a></h4>
+                <div class="meta">
                   <div>
                       <strong>Team lead and Designer</strong>
                       at <strong>Smoogle</strong>
@@ -372,6 +383,7 @@ blockquote > * + * {
                     <time datetime="2016-08-24">Aug 2016</time> –
                     <time datetime="2016-08-24">Aug 2016</time>
                   </div>
+                </div>
               </header>
                 <p>A mapping engine that misguides you</p>
                 <ul>
@@ -388,10 +400,12 @@ blockquote > * + * {
             <article>
               <header>
                 <h4>Digital Compression Pioneer Award</h4>
+                <div class="meta">
                     <div>
                       Awarded by <strong>Techcrunch</strong>
                     </div>
                     <time datetime="2014-11-01">Nov 2014</time>
+                </div>
               </header>
                 <p>There is no spoon.</p>
             </article>
@@ -403,10 +417,12 @@ blockquote > * + * {
             <article>
               <header>
                 <h4><a href="http://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)">Video compression for 3d media</a></h4>
+                <div class="meta">
                     <div>
                       Published by <strong>Hooli</strong>
                     </div>
                     <time datetime="2014-10-01">Oct 2014</time>
+                </div>
               </header>
                 <p>Innovative middle-out compression algorithm that changes the way we store data.</p>
             </article>