Inital layout of home page

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;

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;
+  }
 }

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);
   }
 }

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>
   </section>
   <section class="page__banner">
     <?php get_template_part('partials/banner') ?>

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() ?>

theme/page-archive.php

@@ -4,7 +4,6 @@
     <?php get_template_part('partials/logo') ?>
   </section>
   <section class="page__content">
-    <div class="content">
     <h1 class="title">
       <a href="<?php the_permalink(); ?>">
         <?php the_title(); ?>
@@ -14,7 +13,6 @@
       <?php the_content(); ?>
     </div>
     <?php get_template_part('partials/archive') ?>
-    </div>
   </section>
   <section class="page__banner">
     <?php get_template_part('partials/banner') ?>

theme/page.php

@@ -5,21 +5,18 @@
   </section>
   <?php if (have_posts()): while (have_posts()) : the_post(); ?>
   <section class="page__content">
-    <div class="content">
     <h1 class="title">
       <?php the_title(); ?>
     </h1>
+    <div class="content">
       <?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>
   </section>
   <?php endif; ?>
   <section class="page__banner">

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>

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; ?>

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>
+    <?php endif; ?>
     <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>
+        <?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; ?>
+    <?php endwhile; endif; ?>
     </ol>
-    </div>
   </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>

theme/single.php

@@ -32,13 +32,9 @@
   </section>
   <?php endwhile; ?>
   <?php else: ?>
-  <section class="page__article is-first">
-    <article class="article">
+  <section class="page__content">
     <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>
+    <a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
   </section>
   <?php endif; ?>
   <section class="page__banner">

theme/tag.php

@@ -4,7 +4,6 @@
     <?php get_template_part('partials/logo') ?>
   </section>
   <section class="page__content">
-    <div class="content">
     <h1 class="title">
       <span class="title__icon">
         <svg class="icon" aria-hidden="true">
@@ -15,6 +14,7 @@
         <?php echo single_tag_title() ?>
       </span>
     </h1>
+    <div class="content">
       <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">
-    <div class="content">
     <h1 class="title">Sorry, no results found.</h1>
+    <div class="content">
       <a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
     </div>
   </section>