Archive page, with list of all posts

css/archive.css

@@ -0,0 +1,19 @@
+.archive__list {
+  margin-bottom: var(--space-sm);
+}
+
+.archive__list--sub-list {
+  margin-left: var(--space-sm);
+}
+
+.archive__heading {
+  font-family: var(--heading-font-family);
+  color: var(--color-dark-blue);
+  margin-bottom: var(--space-xs);
+}
+
+.archive__date {
+  display: inline-block;
+  font-style: italic;
+  min-width: 40px;
+}

css/article.css

@@ -4,22 +4,6 @@
   }
 }
 
-.article__title {
-  font-family: var(--heading-font-family);
-  color: var(--color-dark-blue);
-  margin-bottom: var(--space-sm);
-}
-
-.article__title a {
-  color: inherit;
-}
-
-@media (--viewport-lg) {
-  .article__title {
-    margin-bottom: var(--space-md);
-  }
-}
-
 .article__date {
   color: var(--color-grey);
   margin-bottom: var(--space-sm);
@@ -81,12 +65,12 @@
  * List styles
  */
 
-.article__content li {
+.article__content ul li {
   position: relative;
   padding: 0 0 var(--space-xs) var(--space-sm);
 }
 
-.article__content li:before {
+.article__content ul li:before {
   content: '';
   position: absolute;
   left: 4px;
@@ -214,3 +198,7 @@
 .article th {
   border-width: 0 0 2px;
 }
+
+.article iframe {
+  max-width: 100%;
+}

css/content.css

@@ -0,0 +1,6 @@
+.content {
+  border-bottom: 1px solid var(--color-light-grey);
+  margin-bottom: var(--space-md);
+  padding-bottom: var(--space-md);
+}
+

css/index.css

@@ -9,6 +9,7 @@
 @import "metadata";
 @import "search";
 @import "article";
+@import "content";
 @import "footer";
 @import "comments";
 @import "comment";
@@ -16,6 +17,8 @@
 @import "avatar";
 @import "link";
 @import "pagination";
+@import "title";
+@import "archive";
 
 :root {
   --color-black: #000;

css/page.css

@@ -42,6 +42,7 @@
     grid-row-start: 1;
   }
 
+  .page__content,
   .page__article {
     grid-column-start: 2;
     grid-row: span 2;

css/title.css

@@ -0,0 +1,16 @@
+.title {
+  font-family: var(--heading-font-family);
+  color: var(--color-dark-blue);
+  margin-bottom: var(--space-sm);
+}
+
+.title a {
+  color: inherit;
+}
+
+@media (--viewport-lg) {
+  .title {
+    margin-bottom: var(--space-md);
+  }
+}
+

theme/header.php

@@ -2,7 +2,7 @@
 <html <?php language_attributes(); ?>>
   <head>
     <meta charset="<?php bloginfo('charset'); ?>">
-    <title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' by'; } ?> <?php bloginfo('name'); ?></title>
+    <title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' &laquo; '; } ?> <?php bloginfo('name'); ?></title>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#4b88b6">
     <meta name="description" content="<?php bloginfo('description'); ?>">

theme/index.php

@@ -14,12 +14,12 @@
           <?php the_time(get_option('date_format')) ?>
         </span>
       </div>
-      <h1 class="article__title">
-        <a href="<?php the_permalink(); ?>">
-          <?php the_title(); ?>
-        </a>
-      </h1>
       <div class="article__content">
+        <h1 class="title">
+          <a href="<?php the_permalink(); ?>">
+            <?php the_title(); ?>
+          </a>
+        </h1>
         <?php the_content(__('Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys')); ?>
       </div>
     </article>

theme/page-archive.php

@@ -0,0 +1,25 @@
+<?php get_header(); the_post(); ?>
+<main class="page">
+  <section class="page__logo">
+    <?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(); ?>
+        </a>
+      </h1>
+      <?php the_content(); ?>
+      <?php get_template_part('partials/archive') ?>
+    </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.php

@@ -6,12 +6,12 @@
   <?php if (have_posts()): while (have_posts()) : the_post(); ?>
   <section class="page__article">
     <article class="article">
-      <h1 class="article__title">
-        <a href="<?php the_permalink(); ?>">
-          <?php the_title(); ?>
-        </a>
-      </h1>
       <div class="article__content">
+        <h1 class="title">
+          <a href="<?php the_permalink(); ?>">
+            <?php the_title(); ?>
+          </a>
+        </h1>
         <?php the_content(__('Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys')); ?>
       </div>
     </article>

theme/partials/archive.php

@@ -0,0 +1,62 @@
+<?php
+$posts = get_posts(array(
+  numberposts => -1,
+  order => 'ASC',
+));
+$archive = array();
+
+foreach ($posts as $post) {
+  $date = strtotime($post->post_date);
+  $year = date('Y', $date);
+  $month = date('F', $date);
+  $day = date('jS', $date);
+  $url = get_permalink($post->ID);
+  $comments = $post->comment_count === '1' ? '1 comment' : $post->comment_count . ' comments';
+  if ($post->post_status === 'publish') {
+    $archive[$year][$month][] = array(
+      title => $post->post_title,
+      slug => $post->post_name,
+      author => $post->post_author,
+      day => $day,
+      url => $url,
+      comments => $comments,
+    );
+  }
+}
+
+?>
+<div class="archive">
+  <ol class="archive__list">
+    <?php foreach ($archive as $year => $yearData) : ?>
+      <li class="archive__item">
+        <h2 class="archive__heading">
+          <?php echo $year ?>
+        </h2>
+        <ol class="archive__list archive__list--sub-list">
+          <?php foreach ($yearData as $month => $monthData) : ?>
+            <li class="archive__item">
+              <h3 class="archive__heading">
+                <?php echo $month ?>
+              </h3>
+              <ol class="archive__list archive__list--sub-list">
+                <?php foreach ($monthData as $post) : ?>
+                  <li class="archive__item">
+                    <span class="archive__date">
+                      <?php echo $post['day'] ?>
+                    </span>
+                    <a class="link" href="<?php echo $post['url'] ?>">
+                      <?php echo $post['title'] ?>
+                    </a>
+                    <span class="archive__comments">
+                      (<?php echo $post['comments'] ?>)
+                    </span>
+                  </li>
+                <?php endforeach; ?>
+              </ol>
+            </li>
+          <?php endforeach; ?>
+        </ol>
+      </li>
+    <?php endforeach; ?>
+  </ol>
+</div>

theme/single.php

@@ -14,10 +14,10 @@
           <?php the_time(get_option('date_format')) ?>
         </span>
       </div>
-      <h1 class="article__title">
-        <?php the_title(); ?>
-      </h1>
       <div class="article__content">
+        <h1 class="title">
+          <?php the_title(); ?>
+        </h1>
         <?php the_content(__('Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys')); ?>
       </div>
       <div class="article__comments">