From 14de3f46ad39687930d6d49f3e1b7bea025d0225 Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Fri, 11 Jan 2019 16:13:11 +0000
Subject: [PATCH] Improve metadata markup

---
 css/content.css             |   1 +
 css/excerpt.css             |  44 +++++++++---
 css/metadata.css            |  41 +++++++-----
 theme/partials/excerpt.php  |  56 +++++++++-------
 theme/partials/metadata.php | 130 ++++++++++++++++++------------------
 theme/partials/podcast.php  |  46 +++++++------
 6 files changed, 183 insertions(+), 135 deletions(-)

diff --git a/css/content.css b/css/content.css
index b736561..a23e93e 100644
--- a/css/content.css
+++ b/css/content.css
@@ -6,6 +6,7 @@
 .content h6 {
   font-family: var(--heading-font-family);
   margin-bottom: var(--space-sm);
+  color: var(--color-dark-blue);
 }
 
 .content h1 {
diff --git a/css/excerpt.css b/css/excerpt.css
index d32e8be..cfb5855 100644
--- a/css/excerpt.css
+++ b/css/excerpt.css
@@ -28,24 +28,23 @@
   }
 }
 
-.excerpt__title,
-.excerpt__subtitle {
+.excerpt__title {
   font-size: var(--size-heading-6);
 }
 
-.excerpt__subtitle {
-  margin-top: var(--space-sm);
-}
-
-.excerpt__metadata {
+.excerpt__list {
   color: var(--color-grey);
   font-size: var(--size-body-extra-small);
   margin-bottom: var(--space-sm);
 }
 
+.excerpt__list-item {
+  display: inline-block;
+  margin-bottom: var(--space-xs);
+}
+
 .excerpt__icon,
 .excerpt__text {
-  display: inline-block;
   vertical-align: middle;
 }
 
@@ -54,14 +53,39 @@
 }
 
 .excerpt__text {
-  margin: 0 15px 0 5px;
+  margin: 0 var(--space-sm) 0 var(--space-xxs);
 }
 
 .excerpt__audio {
-  display: block;
   margin-bottom: var(--space-sm);
 }
 
 .excerpt__image {
   height: 200px;
+  margin-bottom: var(--space-sm);
+}
+
+.excerpt__links {
+  font-size: var(--size-body-extra-small);
+  margin-bottom: var(--space-sm);
+}
+
+.excerpt__link {
+  display: inline;
+}
+
+.excerpt__link:not(:last-child) {
+  position: relative;
+  margin-right: var(--space-xs);
+  padding-right: var(--space-xs);
+}
+
+.excerpt__link:not(:last-child):after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  right: 1px;
+  width: 2px;
+  background-color: var(--color-light-blue);
 }
diff --git a/css/metadata.css b/css/metadata.css
index 75860d8..82f8f5d 100644
--- a/css/metadata.css
+++ b/css/metadata.css
@@ -1,18 +1,9 @@
 .metadata {
-  display: flex;
-  flex-flow: row wrap;
   font-size: var(--size-body-extra-small);
   margin-bottom: var(--space-sm);
   border-bottom: 1px solid var(--color-light-grey);
 }
 
-.metadata__item {
-  display: flex;
-  align-items: center;
-  margin: 0 var(--space-sm) var(--space-sm) 0;
-  color: var(--color-dark-blue);
-}
-
 @media (--viewport-md) {
   .metadata {
     margin-bottom: var(--space-md);
@@ -21,13 +12,8 @@
 
 @media (--viewport-lg) {
   .metadata {
-    flex-flow: column wrap;
     border-bottom: none;
   }
-
-  .metadata__item {
-    margin-right: 0;
-  }
 }
 
 @media (--viewport-lg) and (min-height: 540px) {
@@ -36,14 +22,37 @@
   }
 }
 
-.metadata__item--light {
+.metadata__list {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+@media (--viewport-lg) {
+  .metadata__list {
+    flex-flow: column wrap;
+  }
+}
+
+.metadata__list-item {
+  display: flex;
+  align-items: center;
+  margin: 0 var(--space-sm) var(--space-sm) 0;
+}
+
+@media (--viewport-lg) {
+  .metadata__list-item {
+    margin-right: 0;
+  }
+}
+
+.metadata__list-item--light {
   color: var(--color-grey);
   display: none;
   margin-bottom: var(--space-sm);
 }
 
 @media (--viewport-lg) {
-  .metadata__item--light {
+  .metadata__list-item--light {
     display: block;
   }
 }
diff --git a/theme/partials/excerpt.php b/theme/partials/excerpt.php
index b7112dc..2f282de 100644
--- a/theme/partials/excerpt.php
+++ b/theme/partials/excerpt.php
@@ -13,30 +13,36 @@ global $excerpt;
     <?php echo $excerpt['content'] ?>
   </div>
   <div class="excerpt__foot">
-    <p class="excerpt__metadata">
-      <span class="excerpt__icon">
-        <svg class="icon icon--extra-small" aria-hidden="true">
-          <use xlink:href="#icon-profile"></use>
-        </svg>
-      </span>
-      <span class="excerpt__text"><?php echo $excerpt['author'] ?></span>
-      <span class="excerpt__icon">
-        <svg class="icon icon--extra-small" aria-hidden="true">
-          <use xlink:href="#icon-calendar"></use>
-        </svg>
-      </span>
-      <span class="excerpt__text"><?php echo $excerpt['date'] ?></span>
-      <span class="excerpt__icon">
-        <svg class="icon icon--extra-small" aria-hidden="true">
-          <use xlink:href="#icon-comments"></use>
-        </svg>
-      </span>
-      <span class="excerpt__text">
-        <?php
-          $number = $excerpt['comments'];
-          echo $number === '1' ? '1 comment' : $number . ' comments';
-        ?>
-      </span>
-    </p>
+    <ul class="excerpt__list">
+      <li class="excerpt__list-item">
+        <span class="excerpt__icon">
+          <svg class="icon icon--extra-small" aria-hidden="true">
+            <use xlink:href="#icon-profile"></use>
+          </svg>
+        </span>
+        <span class="excerpt__text"><?php echo $excerpt['author'] ?></span>
+      </li>
+      <li class="excerpt__list-item">
+        <span class="excerpt__icon">
+          <svg class="icon icon--extra-small" aria-hidden="true">
+            <use xlink:href="#icon-calendar"></use>
+          </svg>
+        </span>
+        <span class="excerpt__text"><?php echo $excerpt['date'] ?></span>
+      </li>
+      <li class="excerpt__list-item">
+        <span class="excerpt__icon">
+          <svg class="icon icon--extra-small" aria-hidden="true">
+            <use xlink:href="#icon-comments"></use>
+          </svg>
+        </span>
+        <span class="excerpt__text">
+          <?php
+            $number = $excerpt['comments'];
+            echo $number === '1' ? '1 comment' : $number . ' comments';
+          ?>
+        </span>
+      </li>
+    </ul>
   </div>
 </div>
diff --git a/theme/partials/metadata.php b/theme/partials/metadata.php
index 44421af..2ac4e17 100644
--- a/theme/partials/metadata.php
+++ b/theme/partials/metadata.php
@@ -1,74 +1,76 @@
 <section class="metadata">
-  <div class="metadata__item metadata__item--light">
-    <span class="metadata__icon">
-      <svg class="icon" aria-hidden="true">
-        <use xlink:href="#icon-calendar"></use>
-      </svg>
-    </span>
-    <span class="metadata__text">
-      <?php the_time(get_option('date_format')) ?>
-    </span>
-  </div>
-  <?php if (is_user_logged_in()): ?>
-  <div class="metadata__item">
-    <a class="metadata__link" href="<?php echo get_edit_post_link() ?>">
+  <ul class="metadata__list">
+    <li class="metadata__list-item metadata__list-item--light">
       <span class="metadata__icon">
         <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-edit"></use>
+          <use xlink:href="#icon-calendar"></use>
         </svg>
       </span>
       <span class="metadata__text">
-        Edit post
+        <?php the_time(get_option('date_format')) ?>
       </span>
-    </a>
-  </div>
-  <?php endif; ?>
-  <div class="metadata__item">
-    <a class="metadata__link" href="<?php the_permalink() ?>#comments">
-      <span class="metadata__icon">
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-comments"></use>
-        </svg>
-      </span>
-      <span class="metadata__text">
-        <?php comments_number(); ?>
-      </span>
-    </a>
-  </div>
-  <div class="metadata__item">
-    <span class="metadata__icon">
-      <svg class="icon" aria-hidden="true">
-        <use xlink:href="#icon-tag"></use>
-      </svg>
-    </span>
-    <span class="metadata__text">
-      <?php windycoys_the_tags() ?>
-    </span>
-  </div>
-  <div class="metadata__item">
-    <div
-      class="fb-share-button"
-      data-href="<?php echo get_the_permalink() ?>"
-      data-layout="box_count"
-      data-size="small"
-      data-mobile-iframe="false"
-    >
-      <a
-        target="_blank"
-        href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse"
-        class="fb-xfbml-parse-ignore"
-      >
-        Share
+    </li>
+    <?php if (is_user_logged_in()): ?>
+    <li class="metadata__list-item">
+      <a class="metadata__link" href="<?php echo get_edit_post_link() ?>">
+        <span class="metadata__icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-edit"></use>
+          </svg>
+        </span>
+        <span class="metadata__text">
+          Edit post
+        </span>
       </a>
+    </li>
+    <?php endif; ?>
+    <li class="metadata__list-item">
+      <a class="metadata__link" href="<?php the_permalink() ?>#comments">
+        <span class="metadata__icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-comments"></use>
+          </svg>
+        </span>
+        <span class="metadata__text">
+          <?php comments_number(); ?>
+        </span>
+      </a>
+    </li>
+    <li class="metadata__list-item">
+      <span class="metadata__icon">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-tag"></use>
+        </svg>
+      </span>
+      <span class="metadata__text">
+        <?php windycoys_the_tags() ?>
+      </span>
     </div>
-  </div>
-  <div class="metadata__item">
-    <a
-      class="twitter-share-button"
-      href="<?php echo windycoys_get_twitter_share_url() ?>"
-      data-url="<?php echo get_the_permalink() ?>"
-    >
-      Tweet
-    </a>
-  </div>
+    <li class="metadata__list-item">
+      <div
+        class="fb-share-button"
+        data-href="<?php echo get_the_permalink() ?>"
+        data-layout="box_count"
+        data-size="small"
+        data-mobile-iframe="false"
+      >
+        <a
+          target="_blank"
+          href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse"
+          class="fb-xfbml-parse-ignore"
+        >
+          Share
+        </a>
+      </div>
+    </li>
+    <li class="metadata__list-item">
+      <a
+        class="twitter-share-button"
+        href="<?php echo windycoys_get_twitter_share_url() ?>"
+        data-url="<?php echo get_the_permalink() ?>"
+      >
+        Tweet
+      </a>
+    </li>
+  </ul>
 </section>
diff --git a/theme/partials/podcast.php b/theme/partials/podcast.php
index 5a1f35e..27f6724 100644
--- a/theme/partials/podcast.php
+++ b/theme/partials/podcast.php
@@ -8,7 +8,7 @@ $artwork = get_template_directory_uri().'/images/'.$podcast['id'].'.png';
       class="excerpt__image"
       title="<?php echo $podcast['podcast_title'] ?>"
       src="<?php echo $artwork ?>">
-    <h3 class="excerpt__subtitle">
+    <h3 class="excerpt__title">
       <a class="link" href="<?php echo $podcast['url'] ?>">
         <?php echo $podcast['title'] ?>
       </a>
@@ -21,24 +21,30 @@ $artwork = get_template_directory_uri().'/images/'.$podcast['id'].'.png';
     <audio class="excerpt__audio" src="<?php echo $podcast['audio'] ?>" controls="true">
       Your browser does not support the <code>audio</code> element.
     </audio>
-    <p class="excerpt__metadata">
-      <a
-        class="link"
-        href="<?php echo $podcast['audio'] ?>"
-        title="Download the MP3">
-        Download MP3
-      </a> |
-      <a class="link" href="<?php echo $podcast['podcast_episodes'] ?>">
-        More episodes
-      </a>
-    </p>
-    <p class="excerpt__metadata">
-      <span class="excerpt__icon">
-        <svg class="icon icon--extra-small" aria-hidden="true">
-          <use xlink:href="#icon-calendar"></use>
-        </svg>
-      </span>
-      <span class="excerpt__text"><?php echo $podcast['date'] ?></span>
-    </p>
+    <ul class="excerpt__links">
+      <li class="excerpt__link">
+        <a
+          class="link"
+          href="<?php echo $podcast['audio'] ?>"
+          title="Download the MP3">
+          Download MP3
+        </a>
+      </li>
+      <li class="excerpt__link">
+        <a class="link" href="<?php echo $podcast['podcast_episodes'] ?>">
+          More episodes
+        </a>
+      </li>
+    </ul>
+    <ul class="excerpt__list">
+      <li class="excerpt__list-item">
+        <span class="excerpt__icon">
+          <svg class="icon icon--extra-small" aria-hidden="true">
+            <use xlink:href="#icon-calendar"></use>
+          </svg>
+        </span>
+        <span class="excerpt__text"><?php echo $podcast['date'] ?></span>
+      </li>
+    </ul>
   </div>
 </div>