From 0abe53e3aaf80063601fe12673bc92f9fda86377 Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Sat, 15 Dec 2018 19:41:33 +0000
Subject: [PATCH] Improve metadata layout Improve link states

---
 css/article.css             | 22 +++----------
 css/comment-respond.css     | 20 +++---------
 css/comment.css             | 23 +++++---------
 css/index.css               |  1 +
 css/link.css                | 20 +++---------
 css/metadata.css            | 62 +++++++++++++++++++++++++++----------
 css/pagination.css          |  1 -
 theme/functions.php         |  2 +-
 theme/partials/metadata.php | 54 ++++++++++++++++++--------------
 9 files changed, 100 insertions(+), 105 deletions(-)

diff --git a/css/article.css b/css/article.css
index ab704c5..d4e7bce 100644
--- a/css/article.css
+++ b/css/article.css
@@ -87,19 +87,7 @@
 
 .article__content a {
   color: var(--color-light-blue);
-  position: relative;
-}
-
-.article__content a:after {
-  background-color: var(--color-light-blue);
-  bottom: -1px;
-  content: '';
-  left: 0;
-  height: 2px;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  transition: opacity var(--transition-md) ease-out;
+  transition: box-shadow var(--transition-md) ease-out;
 }
 
 .article__content a img {
@@ -112,8 +100,8 @@
  * Focus states
  */
 
-.article__content a:focus:after {
-  opacity: 1;
+.article__content a:focus {
+  box-shadow: var(--link-focus);
 }
 
 .article__content a:focus img {
@@ -125,8 +113,8 @@
  * Hover states
  */
 
-.article__content a:hover:after {
-  opacity: 1;
+.article__content a:hover {
+  box-shadow: var(--link-focus);
 }
 
 /**
diff --git a/css/comment-respond.css b/css/comment-respond.css
index 93f0fba..18e0f2d 100644
--- a/css/comment-respond.css
+++ b/css/comment-respond.css
@@ -51,23 +51,11 @@
 
 .comment-respond__cancel a,
 .comment-respond__cancel a:visited {
-  position: relative;
   color: var(--color-light-blue);
+  transition: box-shadow var(--transition-md) ease-out;
 }
 
-.comment-respond__cancel a:after {
-  background-color: var(--color-light-blue);
-  bottom: -1px;
-  content: '';
-  left: 0;
-  height: 2px;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  transition: opacity var(--transition-md) ease-out;
-}
-
-.comment-respond__cancel a:focus:after,
-.comment-respond__cancel a:hover:after {
-  opacity: 1;
+.comment-respond__cancel a:focus,
+.comment-respond__cancel a:hover {
+  box-shadow: var(--link-focus);
 }
diff --git a/css/comment.css b/css/comment.css
index 4a17dc7..c823f90 100644
--- a/css/comment.css
+++ b/css/comment.css
@@ -32,6 +32,10 @@
   display: none;
 }
 
+.comment__reply {
+  transition: color var(--transition-md) ease-out;
+}
+
 .comment__reply:focus,
 .comment__reply:hover {
   color: var(--color-light-blue);
@@ -48,21 +52,10 @@
   position: relative;
   font-size: 12px;
   vertical-align: middle;
+  transition: box-shadow var(--transition-md) ease-out;
 }
 
-.comment__reply-text:after {
-  background-color: var(--color-light-blue);
-  bottom: -1px;
-  content: '';
-  left: 0;
-  height: 2px;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  transition: opacity var(--transition-md) ease-out;
-}
-
-.comment__reply:focus .comment__reply-text:after,
-.comment__reply:hover .comment__reply-text:after {
-  opacity: 1;
+.comment__reply:focus .comment__reply-text,
+.comment__reply:hover .comment__reply-text {
+  box-shadow: var(--link-focus);
 }
diff --git a/css/index.css b/css/index.css
index 935c683..dbf6e4a 100644
--- a/css/index.css
+++ b/css/index.css
@@ -41,6 +41,7 @@
   --heading-font-family: 'Raleway', sans-serif;
   --body-font-family: 'Open Sans', sans-serif;
   --windy-svg: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQxNXB4IiBoZWlnaHQ9IjQxNXB4IiB2aWV3Qm94PSIwIDAgNDE1IDQxNSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCw0MTUpIHNjYWxlKDAuMSwtMC4xKSIgZmlsbD0iI2NjYyIgc3Ryb2tlPSJub25lIj48cGF0aCBkPSJNMTc4MCA0MTM0IGMtNTAzIC03MyAtOTc0IC0zMzMgLTEyOTEgLTcxMyBsLTgwIC05NiAtNzMgMCBjLTQ2IDAgLTc5IC01IC04OSAtMTMgLTE0IC0xMiAtMTIgLTE5IDIzIC02NCAyMiAtMjcgNDAgLTU0IDQwIC01OSAwIC00IC0yNSAtNTIgLTU1IC0xMDYgLTExNiAtMjA5IC0xOTkgLTQ1MyAtMjM1IC02OTggLTI1IC0xNjQgLTI3IC00MzYgLTQgLTU5NyAxMjggLTkyMyA4NDkgLTE2NDQgMTc3MyAtMTc3MiAxNjAgLTIzIDQzMiAtMjEgNTk2IDQgOTExIDEzNiAxNjIyIDg1NCAxNzQ5IDE3NjggMjEgMTQ4IDIxIDQyNiAwIDU3NCAtMzggMjc0IC0xMzkgNTYzIC0yNzQgNzg0IC0yMiAzNSAtNDAgNzEgLTQwIDc5IDAgOCAtMTYgMzMgLTM3IDU2IGwtMzYgNDAgMzMgOTcgYzI5IDg1IDM0IDExMyAzOCAyMjMgNyAyMDkgLTMxIDI4OSAtMTYzIDMzOCAtMTM0IDUxIC0yNTIgLTQgLTI4NSAtMTMxIC02IC0yMSAtMTUgLTU2IC0yMCAtNzggbC0xMSAtNDAgLTc3IDU0IGMtMjU3IDE4MCAtNTgzIDMwNyAtOTAwIDM1MSAtMTM5IDE5IC00NDggMTggLTU4MiAtMXogbTQ5OCAtMTE1IGMyMzUgLTI1IDQ2MCAtOTEgNjY3IC0xOTQgMTc4IC04OSAyNjkgLTE1MiAyNzMgLTE4NyAyIC0xNiAxIC0yOCAtMiAtMjggLTMgMCAtMzEgMTggLTYzIDQxIC0yMjIgMTU2IC01MTggMjcyIC04MDMgMzE1IC0xNDEgMjEgLTQxMyAyMCAtNTUwIC0xIC0yMTEgLTMzIC0zOTkgLTkzIC01ODEgLTE4NiAtMjEzIC0xMDggLTM2MSAtMjE5IC01MzEgLTM5OCAtOTggLTEwNCAtMTI4IC0xMjUgLTE0MyAtMTAyIC03IDEzIDEwMyAxMzggMTk3IDIyNiA0MTUgMzg1IDk4MiA1NzUgMTUzNiA1MTR6IG0tNTM5IC02MDEgYy00IC0yNCAtMTMgLTY5IC0xOSAtMTAwIC0xMSAtNTYgLTEyIC01OCAtNDMgLTU4IC01NCAwIC0yMjcgLTQ4IC0yNzQgLTc2IC0xMDkgLTYzIC0xNTcgLTEzNSAtMTMzIC0xOTUgMjAgLTQ3IDEwMyAtMTE0IDE4MyAtMTQ4IDQwIC0xNyA3MSAtMzYgNzEgLTQzIC0xIC03IC05IC00MCAtMTggLTczIC0yNyAtMTAwIC0zMiAtMjE3IC0xMiAtMjcwIDEwIC0yNSAyNyAtNTIgMzkgLTYwIDI1IC0xNyAxMTQgLTIwIDE2OSAtNSAzNiAxMCAzOSA5IDEwNyAtNDYgNjUgLTUyIDcwIC01OCA2NSAtODcgLTEzIC04MSAtMTIgLTc4IC00OSAtNzEgLTI5IDUgLTM5IDIgLTY1IC0yNCAtMzIgLTMzIC0zNyAtNjAgLTE5IC0xMTEgNiAtMTggOSAtMzUgNiAtMzggLTQgLTMgLTI4IDAgLTU0IDYgLTExNSAyOSAtMjA5IDkyIC0yNjQgMTgwIC0xNiAyNCAtNDkgOTggLTc1IDE2MyAtODIgMjEwIC0xOTggNDEzIC0zMjIgNTYzIGwtNTAgNTkgMzAgMzggYzgyIDEwNCAyNzMgMjUwIDQzMSAzMjkgNzIgMzcgMjY2IDEwOCAyOTMgMTA5IDggMCA5IC0xMyAzIC00MnogbTgzMyAtNyBjMTk3IC03NiAzODEgLTE5NSA1MTYgLTMzNCBsNTMgLTU0IC0xNiAtNjIgYy04MSAtMzEzIC0yMzEgLTU4MSAtNDU0IC04MTQgLTcwIC03MiAtODkgLTg3IC0xMDcgLTgzIC0xMyA0IC0yNSAyIC0yOCAtMyAtNyAtMTEgLTgzIC01MSAtOTcgLTUxIC01IDAgLTI3IDEyIC00OSAyNiAtMjggMTkgLTQwIDM0IC00MCA1MSAwIDM4IC0yNiA3NyAtNjQgOTggLTIwIDExIC0zNiAyNCAtMzYgMzAgMCA1IC0zIDIwIC02IDMyIC01IDE4IDEgMjUgMzggNDQgMjMgMTIgNjAgMzUgODEgNTEgMzYgMjkgNDAgMzAgODIgMTkgNjEgLTE1IDEwMSAtMTQgMTQxIDUgNjcgMzIgOTIgMTA3IDk2IDI5MiBsMyAxMTMgNjkgMjQgYzMyMSAxMTIgMjM0IDI5OSAtMTk2IDQxOSAtNDggMTQgLTU3IDIwIC02MiA0NCAtNiAyNyAtMjUgMTYwIC0yNiAxNzUgMCAxMyAyNCA4IDEwMiAtMjJ6IG0tMjIwNyAtNDkyIGMtMTkxIC0zNzggLTI0NiAtODYzIC0xNDYgLTEyODAgODkgLTM3NCAzMDkgLTc0MCA1OTQgLTk5MCA3NjIgLTY2OCAxODk1IC02MzMgMjYwOCA4MCAyODAgMjgwIDQ2MiA2MjcgNTM0IDEwMTggMjMgMTE5IDMxIDQyNSAxNiA1NTAgLTI0IDE5NSAtOTIgNDM2IC0xNjAgNTcyIC0zMCA1OCAtNDEgMTI0IC0yMiAxMzUgMTIgOCA5OCAtMTgxIDE0MSAtMzE0IDIwMyAtNjE4IDkyIC0xMjgyIC0zMDIgLTE4MDMgLTgwIC0xMDYgLTI2MCAtMjg2IC0zNjcgLTM2NiAtNzA2IC01MzQgLTE2NjcgLTUzMyAtMjM3NCAxIC0xMDYgODAgLTI4NiAyNjAgLTM2NiAzNjcgLTE4OSAyNDkgLTMxNiA1MzkgLTM3MyA4NTEgLTMxIDE2NiAtMzEgNTA0IDAgNjcwIDM3IDIwNCAxMjUgNDU3IDIwOCA1OTcgbDI4IDQ4IDkgLTMxIGM4IC0yNiAzIC00MiAtMjggLTEwNXogbTUyNCAtNTcwIGM5MyAtNDYgMTMwIC0xMTcgMTMxIC0yNDYgMCAtNzAgMTggLTE0OCA0NSAtMjAzIDIyIC00MyAxMDMgLTEyOCAxNTMgLTE2MCAyNCAtMTUgMjMgLTE2IC03MiAtNzggLTEwNCAtNjkgLTE5MyAtMTM5IC0yNzIgLTIxNCBsLTUxIC00OSAtNDAgODggYy01MSAxMTAgLTg5IDIyOCAtMTEwIDM0NyAtMjEgMTE0IC0yMyAzNTIgLTQgNDY0IGwxMyA4MiA3MyAwIGM2MCAwIDgyIC01IDEzNCAtMzF6IG0yNjA4IC0zMDMgYy0xNCAtMzUyIC0xMjIgLTYzNCAtMzQzIC04OTYgLTkzIC0xMTAgLTI1NyAtMjUxIC0yNzQgLTIzNCAtNSA1IC0yOCA3NyAtNTAgMTU5IC0yMyA4MyAtNTIgMTg0IC02NCAyMjUgLTEzIDQxIC0yNiA5NSAtMjkgMTIwIGwtNiA0NiA1OSAzMyBjMTk3IDEwOCA1NTIgNDU5IDY3NiA2NjkgMzEgNTMgMzcgMjcgMzEgLTEyMnoiLz48L2c+PC9zdmc+Cg==");
+  --link-focus: 0 3px 0 0 var(--color-light-blue);
 }
 
 @custom-media --viewport-md (min-width: 640px);
diff --git a/css/link.css b/css/link.css
index 92c1852..f3975b0 100644
--- a/css/link.css
+++ b/css/link.css
@@ -2,23 +2,11 @@
 .link:hover,
 .link:focus,
 .link:visited {
-  position: relative;
   color: var(--color-light-blue);
+  transition: box-shadow var(--transition-md) ease-out;
 }
 
-.link:after {
-  background-color: var(--color-light-blue);
-  bottom: -1px;
-  content: '';
-  left: 0;
-  height: 2px;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  transition: opacity var(--transition-md) ease-out;
-}
-
-.link:focus:after,
-.link:hover:after {
-  opacity: 1;
+.link:focus,
+.link:hover {
+  box-shadow: var(--link-focus);
 }
diff --git a/css/metadata.css b/css/metadata.css
index 4a58819..6046a80 100644
--- a/css/metadata.css
+++ b/css/metadata.css
@@ -1,46 +1,75 @@
 .metadata {
+  display: flex;
+  flex-flow: row wrap;
   border-bottom: 1px solid var(--color-light-grey);
   font-size: 14px;
   margin-bottom: var(--space-md);
 }
 
+.metadata__item {
+  margin: 0 var(--space-sm) var(--space-sm) 0;
+}
+
 @media (--viewport-lg) {
   .metadata {
+    flex-flow: column wrap;
     border-bottom: none;
   }
 
-  .metadata.is-locked {
-    position: fixed;
+  .metadata__item {
+    margin-right: 0;
   }
 }
 
-.metadata__date {
+.metadata__item--light {
   color: var(--color-grey);
   display: none;
   margin-bottom: var(--space-sm);
 }
 
 @media (--viewport-lg) {
-  .metadata__date {
+  .metadata__item--light {
     display: block;
   }
 }
 
-.metadata__comments,
-.metadata__categories,
-.metadata__editor,
-.metadata__share {
-  margin-bottom: var(--space-sm);
+.metadata__icon {
+  display: inline-block;
+  vertical-align: middle;
 }
 
-.metadata__comments-text,
-.metadata__categories-text,
-.metadata__editor-text,
-.metadata__date-text {
-  line-height: 2.3;
+.metadata__text {
   margin-left: 10px;
   text-transform: capitalize;
-  vertical-align: top;
+  vertical-align: middle;
+  transition: box-shadow var(--transition-md) ease-out;
+}
+
+.metadata__link {
+  display: inline-block;
+  transition: color var(--transition-md) ease-out;
+}
+
+.metadata__link:hover,
+.metadata__link:focus {
+  color: var(--color-light-blue);
+}
+
+.metadata__link:hover .metadata__text,
+.metadata__link:focus .metadata__text {
+  box-shadow: var(--link-focus);
+}
+
+.metadata__tag-link {
+  transition:
+    box-shadow var(--transition-md) ease-out,
+    color var(--transition-md) ease-out;
+}
+
+.metadata__tag-link:hover,
+.metadata__tag-link:focus {
+  color: var(--color-light-blue);
+  box-shadow: var(--link-focus);
 }
 
 .metadata__share-link {
@@ -60,7 +89,7 @@
 
 /**
  * Link styles
- */
+ *
 
 .metadata__comments-text,
 .metadata__categories-link,
@@ -99,3 +128,4 @@
 .metadata__editor-link:hover .metadata__editor-text:after {
   opacity: 1;
 }
+*/
diff --git a/css/pagination.css b/css/pagination.css
index ce5d63d..988e4ea 100644
--- a/css/pagination.css
+++ b/css/pagination.css
@@ -39,7 +39,6 @@
 .pagination__link:focus,
 .pagination__link:visited {
   display: block;
-  position: relative;
   color: var(--color-light-blue);
   transition: transform var(--transition-md) ease-out;
 }
diff --git a/theme/functions.php b/theme/functions.php
index cdf0415..842f9ec 100644
--- a/theme/functions.php
+++ b/theme/functions.php
@@ -60,7 +60,7 @@ function windycoys_the_tags() {
   }
   if ($tags) {
     foreach($tags as $key=>$tag) {
-      echo '<a class="metadata__categories-link" href="' .
+      echo '<a class="metadata__tag-link" href="' .
         home_url() . '/tag/' . $tag->name . '" rel="tag">' .
         $tag->name . '</a>';
       if ($key < count($tags) - 1) {
diff --git a/theme/partials/metadata.php b/theme/partials/metadata.php
index 5630ff6..c906918 100644
--- a/theme/partials/metadata.php
+++ b/theme/partials/metadata.php
@@ -1,43 +1,51 @@
 <section class="metadata">
-  <div class="metadata__date">
-    <svg class="icon" aria-hidden="true">
-      <use href="#icon-calendar"></use>
-    </svg>
-    <span class="metadata__date-text">
+  <div class="metadata__item metadata__item--light">
+    <span class="metadata__icon">
+      <svg class="icon" aria-hidden="true">
+        <use 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__editor">
-    <a class="metadata__editor-link" href="<?php echo get_edit_post_link() ?>">
-      <svg class="icon" aria-hidden="true">
-        <use href="#icon-edit"></use>
-      </svg>
-      <span class="metadata__editor-text">
+  <div class="metadata__item">
+    <a class="metadata__link" href="<?php echo get_edit_post_link() ?>">
+      <span class="metadata__icon">
+        <svg class="icon" aria-hidden="true">
+          <use href="#icon-edit"></use>
+        </svg>
+      </span>
+      <span class="metadata__text">
         Edit post
       </span>
     </a>
   </div>
   <?php endif; ?>
-  <div class="metadata__comments">
-    <a class="metadata__comments-link" href="<?php the_permalink() ?>#comments">
-    <svg class="icon" aria-hidden="true">
-        <use href="#icon-comments"></use>
-      </svg>
-      <span class="metadata__comments-text">
+  <div class="metadata__item">
+    <a class="metadata__link" href="<?php the_permalink() ?>#comments">
+      <span class="metadata__icon">
+        <svg class="icon" aria-hidden="true">
+          <use href="#icon-comments"></use>
+        </svg>
+      </span>
+      <span class="metadata__text">
         <?php comments_number(); ?>
       </span>
     </a>
   </div>
-  <div class="metadata__categories">
-    <svg class="icon" aria-hidden="true">
-      <use href="#icon-hash"></use>
-    </svg>
-    <span class="metadata__categories-text">
+  <div class="metadata__item">
+    <span class="metadata__icon">
+      <svg class="icon" aria-hidden="true">
+        <use href="#icon-hash"></use>
+      </svg>
+    </span>
+    <span class="metadata__text">
       <?php windycoys_the_tags() ?>
     </span>
   </div>
-  <div class="metadata__share">
+  <div class="metadata__item">
     <a class="metadata__share-link" href="#" aria-label="Facebook">
       <svg class="icon icon--facebook" aria-hidden="true">
         <use href="#icon-facebook"></use>