From e8f563b1965598ed732a1de6a906e2f6bce4eef2 Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Sun, 6 Jan 2019 13:29:25 +0000
Subject: [PATCH] Inital layout of home page

---
 css/excerpt.css               | 11 ++++++
 css/page.css                  | 16 +++++++-
 css/title.css                 |  2 +
 theme/404.php                 |  6 +--
 theme/front-page.php          | 42 ++++++++++++++++++++
 theme/page-archive.php        | 16 ++++----
 theme/page.php                | 13 +++----
 theme/partials/excerpt.php    | 42 ++++++++++++++++++++
 theme/partials/pagination.php |  2 +
 theme/search.php              | 73 ++++++++++++-----------------------
 theme/single.php              | 10 ++---
 theme/tag.php                 | 22 +++++------
 12 files changed, 167 insertions(+), 88 deletions(-)
 create mode 100644 theme/front-page.php
 create mode 100644 theme/partials/excerpt.php

diff --git a/css/excerpt.css b/css/excerpt.css
index 2d88193..07f2ec8 100644
--- a/css/excerpt.css
+++ b/css/excerpt.css
@@ -1,10 +1,13 @@
 .excerpt {
+  border-bottom: 1px solid var(--color-light-grey);
   margin-bottom: var(--space-sm);
+  padding-bottom: var(--space-sm);
 }
 
 @media (--viewport-md) {
   .excerpt {
     margin-bottom: var(--space-md);
+    padding-bottom: var(--space-md);
   }
 }
 
@@ -14,6 +17,14 @@
   margin-bottom: var(--space-xs);
 }
 
+@media (--viewport-md) {
+  .excerpt__head,
+  .excerpt__body,
+  .excerpt__title {
+    margin-bottom: var(--space-sm);
+  }
+}
+
 .excerpt__metadata {
   color: var(--color-grey);
   font-size: 12px;
diff --git a/css/page.css b/css/page.css
index 1c21d60..5b024dd 100644
--- a/css/page.css
+++ b/css/page.css
@@ -83,7 +83,21 @@
 
 @media (--viewport-xl) {
   .page {
-    grid-template-columns: 224px 1fr 1fr;
+    grid-template-columns: 224px 1fr;
     grid-template-rows: 32px 162px 1fr;
   }
+
+  .page__content--2col {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: var(--space-md);
+  }
+
+  .page__content-item {
+    display: flex;
+  }
+
+  .page__content-item--full-width {
+    grid-column: 1 / -1;
+  }
 }
diff --git a/css/title.css b/css/title.css
index b0902d7..d3d7205 100644
--- a/css/title.css
+++ b/css/title.css
@@ -1,11 +1,13 @@
 .title {
   font-family: var(--heading-font-family);
+  font-size: 1.8rem;
   color: var(--color-dark-blue);
   margin-bottom: var(--space-sm);
 }
 
 @media (--viewport-md) {
   .title {
+    font-size: 2.4rem;
     margin-bottom: var(--space-md);
   }
 }
diff --git a/theme/404.php b/theme/404.php
index b8371e7..7ee1783 100644
--- a/theme/404.php
+++ b/theme/404.php
@@ -4,10 +4,8 @@
     <?php get_template_part('partials/logo') ?>
   </section>
   <section class="page__content">
-    <div class="content">
-      <h1 class="title">404 - Page not found</h1>
-      <a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
-    </div>
+    <h1 class="title">404 - Page not found</h1>
+    <a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
   </section>
   <section class="page__banner">
     <?php get_template_part('partials/banner') ?>
diff --git a/theme/front-page.php b/theme/front-page.php
new file mode 100644
index 0000000..ffe63aa
--- /dev/null
+++ b/theme/front-page.php
@@ -0,0 +1,42 @@
+<?php get_header() ?>
+<main class="page">
+  <section class="page__logo">
+    <?php get_template_part('partials/logo') ?>
+  </section>
+  <section class="page__content page__content--2col">
+    <div class="page__content-item page__content-item--full-width">
+      <h2 class="title">Latest articles</h2>
+    </div>
+    <?php
+      $posts = get_posts(array(
+        numberposts => 4,
+      ));
+      foreach ($posts as $post) {
+        $date = strtotime($post->post_date);
+        $year = date('Y', $date);
+        $month = date('F', $date);
+        $day = date('jS', $date);
+        $date = get_the_date('jS F, Y', $post->ID).' at '.get_the_date('H:i', $post->ID);
+        $excerpt = array(
+          title => $post->post_title,
+          url => get_permalink($post->ID),
+          content => $post->post_excerpt,
+          author => get_the_author_meta('nickname', $post->post_author),
+          comments => $post->comment_count,
+          date => $date,
+        );
+        echo '<div class="page__content-item">';
+        get_template_part('partials/excerpt');
+        echo '</div>';
+      }
+    ?>
+  </section>
+  <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() ?>
diff --git a/theme/page-archive.php b/theme/page-archive.php
index 6918768..af1e058 100644
--- a/theme/page-archive.php
+++ b/theme/page-archive.php
@@ -4,17 +4,15 @@
     <?php get_template_part('partials/logo') ?>
   </section>
   <section class="page__content">
+    <h1 class="title">
+      <a href="<?php the_permalink(); ?>">
+        <?php the_title(); ?>
+      </a>
+    </h1>
     <div class="content">
-      <h1 class="title">
-        <a href="<?php the_permalink(); ?>">
-          <?php the_title(); ?>
-        </a>
-      </h1>
-      <div class="content">
-        <?php the_content(); ?>
-      </div>
-      <?php get_template_part('partials/archive') ?>
+      <?php the_content(); ?>
     </div>
+    <?php get_template_part('partials/archive') ?>
   </section>
   <section class="page__banner">
     <?php get_template_part('partials/banner') ?>
diff --git a/theme/page.php b/theme/page.php
index 35766e6..d4170d7 100644
--- a/theme/page.php
+++ b/theme/page.php
@@ -5,21 +5,18 @@
   </section>
   <?php if (have_posts()): while (have_posts()) : the_post(); ?>
   <section class="page__content">
+    <h1 class="title">
+      <?php the_title(); ?>
+    </h1>
     <div class="content">
-      <h1 class="title">
-        <?php the_title(); ?>
-      </h1>
       <?php the_content(); ?>
-      </div>
     </div>
   </section>
   <?php endwhile; ?>
   <?php else: ?>
   <section class="page__content">
-    <div class="content">
-      <h1 class="title">Sorry, there is no article to display</h1>
-      <a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
-    </div>
+    <h1 class="title">Sorry, there is no article to display</h1>
+    <a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
   </section>
   <?php endif; ?>
   <section class="page__banner">
diff --git a/theme/partials/excerpt.php b/theme/partials/excerpt.php
new file mode 100644
index 0000000..b7112dc
--- /dev/null
+++ b/theme/partials/excerpt.php
@@ -0,0 +1,42 @@
+<?php
+global $excerpt;
+?>
+<div class="excerpt">
+  <div class="excerpt__head">
+    <div class="excerpt__title">
+      <a class="link" href="<?php echo $excerpt['url'] ?>">
+        <?php echo $excerpt['title'] ?>
+      </a>
+    </div>
+  </div>
+  <div class="excerpt__body">
+    <?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>
+  </div>
+</div>
diff --git a/theme/partials/pagination.php b/theme/partials/pagination.php
index a1cf101..dad11ab 100644
--- a/theme/partials/pagination.php
+++ b/theme/partials/pagination.php
@@ -40,6 +40,7 @@ function format_link($link) {
   return $link;
 }
 
+if (count($links) > 1) :
 ?>
 <div class="pagination">
   <?php if ($current > 1) : ?>
@@ -71,3 +72,4 @@ function format_link($link) {
     </div>
   <?php endif; ?>
 </div>
+<?php endif; ?>
diff --git a/theme/search.php b/theme/search.php
index a4a0e17..2e6b2d8 100644
--- a/theme/search.php
+++ b/theme/search.php
@@ -1,68 +1,45 @@
 <?php
 global $wp_query;
 get_header();
+$query = $_GET['s'];
+$results = $wp_query->found_posts;
 ?>
 <main class="page">
   <section class="page__logo">
     <?php get_template_part('partials/logo') ?>
   </section>
   <section class="page__content">
-    <div class="content">
+    <?php if ($results === 0) : ?>
+      <h1 class="title">Sorry, no results found.</h1>
+      <a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
+    <?php else : ?>
       <h1 class="title">
         <?php
-          $query = $_GET['s'];
-          echo $wp_query->found_posts.' results matching "' . $query . '" found.';
+          echo $results.' result'.($results !== '1' ? 's' : '').' matching "' . $query . '" found.';
         ?>
       </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 xlink: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 xlink:href="#icon-calendar"></use>
-                  </svg>
-                </span>
-                <span class="excerpt__text"><?php echo $date ?></span>
-              </p>
-            </div>
-          </div>
-        </li>
-      <?php endwhile; ?>
-      </ol>
-    </div>
+    <?php endif; ?>
+    <ol>
+    <?php if (have_posts()): while (have_posts()) : the_post(); ?>
+      <li>
+        <?php
+          $excerpt = array(
+            title => get_the_title(),
+            url => get_the_permalink(),
+            content => get_the_excerpt(),
+            author => get_the_author_meta('nickname'),
+            comments => get_comments_number(),
+            date => get_the_date('jS F, Y', $id) . ' at ' . get_the_date('H:i', $id),
+          );
+          get_template_part('partials/excerpt')
+        ?>
+      </li>
+    <?php endwhile; endif; ?>
+    </ol>
   </section>
   <section class="page__pagination">
     <?php get_template_part('partials/pagination') ?>
   </section>
-  <?php else: ?>
-  <section class="page__content">
-    <div class="content">
-      <h1 class="title">Sorry, no results found.</h1>
-      <a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
-    </div>
-  </section>
-  <?php endif; ?>
   <section class="page__banner">
     <?php get_template_part('partials/banner') ?>
   </section>
diff --git a/theme/single.php b/theme/single.php
index 07aa7ed..405ddb7 100644
--- a/theme/single.php
+++ b/theme/single.php
@@ -32,13 +32,9 @@
   </section>
   <?php endwhile; ?>
   <?php else: ?>
-  <section class="page__article is-first">
-    <article class="article">
-      <h1 class="title">Sorry, there is no article to display</h1>
-      <div class="article__content">
-        <a class="link" href="<?php get_site_url() ?>/">Go back home</a>
-      </div>
-    </article>
+  <section class="page__content">
+    <h1 class="title">Sorry, there is no article to display</h1>
+    <a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
   </section>
   <?php endif; ?>
   <section class="page__banner">
diff --git a/theme/tag.php b/theme/tag.php
index 9cf0f93..aff4cc6 100644
--- a/theme/tag.php
+++ b/theme/tag.php
@@ -4,17 +4,17 @@
     <?php get_template_part('partials/logo') ?>
   </section>
   <section class="page__content">
+    <h1 class="title">
+      <span class="title__icon">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-tag"></use>
+        </svg>
+      </span>
+      <span class="title__text">
+        <?php echo single_tag_title() ?>
+      </span>
+    </h1>
     <div class="content">
-      <h1 class="title">
-        <span class="title__icon">
-          <svg class="icon" aria-hidden="true">
-            <use xlink:href="#icon-tag"></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') ?>
@@ -58,8 +58,8 @@
   </section>
   <?php else: ?>
   <section class="page__content">
+    <h1 class="title">Sorry, no results found.</h1>
     <div class="content">
-      <h1 class="title">Sorry, no results found.</h1>
       <a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
     </div>
   </section>