From 07e5436c4bc43b92087f946a9e901cce2c5ce56e Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Thu, 13 Dec 2018 21:56:06 +0000
Subject: [PATCH] Tags template

---
 css/{search-result.css => excerpt.css} | 18 +++---
 css/index.css                          |  2 +-
 css/title.css                          | 17 ++++--
 theme/functions.php                    |  2 +-
 theme/partials/banner.php              | 12 ++--
 theme/partials/metadata.php            | 12 ++--
 theme/search.php                       | 24 ++++----
 theme/tag.php                          | 77 ++++++++++++++++++++++++++
 8 files changed, 125 insertions(+), 39 deletions(-)
 rename css/{search-result.css => excerpt.css} (52%)
 create mode 100644 theme/tag.php

diff --git a/css/search-result.css b/css/excerpt.css
similarity index 52%
rename from css/search-result.css
rename to css/excerpt.css
index 9f55ce3..624c13b 100644
--- a/css/search-result.css
+++ b/css/excerpt.css
@@ -1,28 +1,28 @@
-.search-result {
+.excerpt {
   margin-bottom: var(--space-sm);
 }
 
-.search-result__head,
-.search-result__body,
-.search-result__title {
+.excerpt__head,
+.excerpt__body,
+.excerpt__title {
   margin-bottom: var(--space-xs);
 }
 
-.search-result__metadata {
+.excerpt__metadata {
   color: var(--color-grey);
   font-size: 12px;
 }
 
-.search-result__icon,
-.search-result__text {
+.excerpt__icon,
+.excerpt__text {
   display: inline-block;
   vertical-align: middle;
 }
 
-.search-result__icon {
+.excerpt__icon {
   height: 16px;
 }
 
-.search-result__text {
+.excerpt__text {
   margin: 0 15px 0 5px;
 }
diff --git a/css/index.css b/css/index.css
index 84a6ae5..935c683 100644
--- a/css/index.css
+++ b/css/index.css
@@ -19,7 +19,7 @@
 @import "pagination";
 @import "title";
 @import "archive";
-@import "search-result";
+@import "excerpt";
 
 :root {
   --color-black: #000;
diff --git a/css/title.css b/css/title.css
index 4b61d23..cb8b870 100644
--- a/css/title.css
+++ b/css/title.css
@@ -4,13 +4,22 @@
   margin-bottom: var(--space-sm);
 }
 
-.title a {
-  color: inherit;
-}
-
 @media (--viewport-lg) {
   .title {
     margin-bottom: var(--space-md);
   }
 }
 
+.title a {
+  color: inherit;
+}
+
+.title__icon,
+.title__text {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.title__text {
+  text-transform: capitalize;
+}
diff --git a/theme/functions.php b/theme/functions.php
index 5aeb900..cdf0415 100644
--- a/theme/functions.php
+++ b/theme/functions.php
@@ -61,7 +61,7 @@ function windycoys_the_tags() {
   if ($tags) {
     foreach($tags as $key=>$tag) {
       echo '<a class="metadata__categories-link" href="' .
-        home_url() . '/tags/' . $tag->name . '" rel="tag">' .
+        home_url() . '/tag/' . $tag->name . '" rel="tag">' .
         $tag->name . '</a>';
       if ($key < count($tags) - 1) {
         echo ', ';
diff --git a/theme/partials/banner.php b/theme/partials/banner.php
index 61e6165..dccc54c 100644
--- a/theme/partials/banner.php
+++ b/theme/partials/banner.php
@@ -1,16 +1,16 @@
 <div class="social">
-  <a class="social__link" href="https://www.facebook.com/WindyCOYS/">
-    <svg class="icon icon--facebook">
+  <a class="social__link" href="https://www.facebook.com/WindyCOYS/" aria-label="WindyCOYS on Facebook">
+    <svg class="icon icon--facebook" aria-hidden="true">
       <use href="#icon-facebook"></use>
     </svg>
   </a>
-  <a class="social__link" href="https://twitter.com/windycoys/">
-    <svg class="icon icon--twitter">
+  <a class="social__link" href="https://twitter.com/windycoys/" aria-label="WindyCOYS on Twitter">
+    <svg class="icon icon--twitter" aria-hidden="true">
       <use href="#icon-twitter"></use>
     </svg>
   </a>
-  <a class="social__link" href="/feed">
-    <svg class="icon icon--rss">
+  <a class="social__link" href="/feed" aria-label="WindyCOYS RSS Feed">
+    <svg class="icon icon--rss" aria-hidden="true">
       <use href="#icon-rss"></use>
     </svg>
   </a>
diff --git a/theme/partials/metadata.php b/theme/partials/metadata.php
index a47ed90..5630ff6 100644
--- a/theme/partials/metadata.php
+++ b/theme/partials/metadata.php
@@ -1,6 +1,6 @@
 <section class="metadata">
   <div class="metadata__date">
-    <svg class="icon">
+    <svg class="icon" aria-hidden="true">
       <use href="#icon-calendar"></use>
     </svg>
     <span class="metadata__date-text">
@@ -10,7 +10,7 @@
   <?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">
+      <svg class="icon" aria-hidden="true">
         <use href="#icon-edit"></use>
       </svg>
       <span class="metadata__editor-text">
@@ -21,7 +21,7 @@
   <?php endif; ?>
   <div class="metadata__comments">
     <a class="metadata__comments-link" href="<?php the_permalink() ?>#comments">
-      <svg class="icon">
+    <svg class="icon" aria-hidden="true">
         <use href="#icon-comments"></use>
       </svg>
       <span class="metadata__comments-text">
@@ -30,7 +30,7 @@
     </a>
   </div>
   <div class="metadata__categories">
-    <svg class="icon">
+    <svg class="icon" aria-hidden="true">
       <use href="#icon-hash"></use>
     </svg>
     <span class="metadata__categories-text">
@@ -39,12 +39,12 @@
   </div>
   <div class="metadata__share">
     <a class="metadata__share-link" href="#" aria-label="Facebook">
-      <svg class="icon icon--facebook">
+      <svg class="icon icon--facebook" aria-hidden="true">
         <use href="#icon-facebook"></use>
       </svg>
     </a>
     <a class="metadata__share-link" href="<?php windycoys_share_twitter_url() ?>" aria-label="Twitter">
-      <svg class="icon icon--twitter">
+      <svg class="icon icon--twitter" aria-hidden="true">
         <use href="#icon-twitter"></use>
       </svg>
     </a>
diff --git a/theme/search.php b/theme/search.php
index bd65ac7..dd5448b 100644
--- a/theme/search.php
+++ b/theme/search.php
@@ -14,36 +14,36 @@ get_header();
           echo $wp_query->found_posts.' results matching "' . $query . '" found.';
         ?>
       </h1>
-      <ol class="search-results">
+      <ol>
       <?php if (have_posts()): while (have_posts()) : the_post(); ?>
       <?php $username = get_the_author_meta('nickname') ?>
       <?php $date = get_the_date('jS F, Y', $id).' at '.get_the_date('H:i', $id) ?>
-        <li class="search-results__content">
-          <div class="search-result">
-            <div class="search-result__head">
-              <div class="search-result__title">
+        <li>
+          <div class="excerpt">
+            <div class="excerpt__head">
+              <div class="excerpt__title">
                 <a class="link" href="<?php the_permalink(); ?>">
                   <?php the_title(); ?>
                 </a>
               </div>
             </div>
-            <div class="search-result__body">
+            <div class="excerpt__body">
               <?php echo the_excerpt() ?>
             </div>
-            <div class="search-result__foot">
-              <p class="search-result__metadata">
-                <span class="search-result__icon">
+            <div class="excerpt__foot">
+              <p class="excerpt__metadata">
+                <span class="excerpt__icon">
                   <svg class="icon icon--extra-small" aria-hidden="true">
                     <use href="#icon-profile"></use>
                   </svg>
                 </span>
-                <span class="search-result__text"><?php echo $username ?></span>
-                <span class="search-result__icon">
+                <span class="excerpt__text"><?php echo $username ?></span>
+                <span class="excerpt__icon">
                   <svg class="icon icon--extra-small" aria-hidden="true">
                     <use href="#icon-calendar"></use>
                   </svg>
                 </span>
-                <span class="search-result__text"><?php echo $date ?></span>
+                <span class="excerpt__text"><?php echo $date ?></span>
               </p>
             </div>
           </div>
diff --git a/theme/tag.php b/theme/tag.php
new file mode 100644
index 0000000..e2b9c1b
--- /dev/null
+++ b/theme/tag.php
@@ -0,0 +1,77 @@
+<?php get_header() ?>
+<main class="page">
+  <section class="page__logo">
+    <?php get_template_part('partials/logo') ?>
+  </section>
+  <section class="page__content">
+    <div class="content">
+      <h1 class="title">
+        <span class="title__icon">
+          <svg class="icon icon--large" aria-hidden="true">
+            <use href="#icon-hash"></use>
+          </svg>
+        </span>
+        <span class="title__text">
+          <?php echo single_tag_title() ?>
+        </span>
+      </h1>
+      <ol>
+      <?php if (have_posts()): while (have_posts()) : the_post(); ?>
+      <?php $username = get_the_author_meta('nickname') ?>
+      <?php $date = get_the_date('jS F, Y', $id).' at '.get_the_date('H:i', $id) ?>
+        <li>
+          <div class="excerpt">
+            <div class="excerpt__head">
+              <div class="excerpt__title">
+                <a class="link" href="<?php the_permalink(); ?>">
+                  <?php the_title(); ?>
+                </a>
+              </div>
+            </div>
+            <div class="excerpt__body">
+              <?php echo the_excerpt() ?>
+            </div>
+            <div class="excerpt__foot">
+              <p class="excerpt__metadata">
+                <span class="excerpt__icon">
+                  <svg class="icon icon--extra-small" aria-hidden="true">
+                    <use href="#icon-profile"></use>
+                  </svg>
+                </span>
+                <span class="excerpt__text"><?php echo $username ?></span>
+                <span class="excerpt__icon">
+                  <svg class="icon icon--extra-small" aria-hidden="true">
+                    <use href="#icon-calendar"></use>
+                  </svg>
+                </span>
+                <span class="excerpt__text"><?php echo $date ?></span>
+              </p>
+            </div>
+          </div>
+        </li>
+      <?php endwhile; ?>
+      </ol>
+    </div>
+  </section>
+  <section class="page__pagination">
+    <?php get_template_part('partials/pagination') ?>
+  </section>
+  <?php else: ?>
+  <section class="page__article">
+    <article class="article">
+      <h1 class="article__title">Sorry, no results found.</h1>
+      <div class="article__content">
+        <a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
+      </div>
+    </article>
+  </section>
+  <?php endif; ?>
+  <section class="page__banner">
+    <?php get_template_part('partials/banner') ?>
+  </section>
+  <section class="page__footer">
+    <?php get_template_part('partials/footer') ?>
+  </section>
+</main>
+<?php get_template_part('partials/navigation') ?>
+<?php get_footer() ?>