Redo Grid CSS

Add single page template

css/article.css

@@ -4,11 +4,6 @@
   .Article {
     border-bottom: 1px solid var(--colorLightGrey);
   }
-
-  /** Pull up first article */
-  .Article.is-first {
-    margin-top: -166px;
-  }
 }
 
 .Article-title {

css/grid.css

@@ -24,10 +24,15 @@
 @media (--viewportLg) {
   .Grid {
     grid-template-columns: 224px 1fr;
+    grid-template-rows: 60px 134px;
     grid-gap: var(--spaceMd);
     padding: 0 var(--spaceMd);
   }
 
+  .Grid-logo {
+    grid-row: span 2;
+  }
+
   .Grid-banner {
     display: block;
     grid-column-start: 2;
@@ -36,10 +41,16 @@
 
   .Grid-article {
     grid-column-start: 2;
+    grid-row: span 2;
   }
 
   .Grid-metadata {
     grid-column-start: 1;
+    grid-row: span 2;
+  }
+
+  .Grid-metadata.is-first {
+    grid-row: span 1;
   }
 
   .Grid-footer {

theme/index.php

@@ -5,7 +5,7 @@
   </section>
   <?php while ( have_posts() ) : the_post(); $index++; ?>
   <section class="Grid-article">
-    <article class="Article<?php echo ($index === 1 ? ' is-first' : '') ?>">
+    <article class="Article">
       <div class="Article-date">
         <svg class="Icon">
           <use href="#icon-calendar"></use>
@@ -24,7 +24,7 @@
       </div>
     </article>
   </section>
-  <section class="Grid-metadata">
+  <section class="Grid-metadata<?php echo ($index === 1 ? ' is-first' : '') ?>">
     <?php get_template_part('partials/metadata') ?>
   </section>
   <?php endwhile; ?>

theme/single.php

@@ -1,14 +1,49 @@
 <?php get_header(); ?>
-<main>
+<main class="Grid">
+  <section class="Grid-logo">
+    <?php get_template_part('partials/logo') ?>
+  </section>
   <?php if (have_posts()): while (have_posts()) : the_post(); ?>
-    <article>
-      <h1><?php the_title(); ?></h1>
+  <section class="Grid-article">
+    <article class="Article">
+      <div class="Article-date">
+        <svg class="Icon">
+          <use href="#icon-calendar"></use>
+        </svg>
+        <span class="Article-dateText">
+          <?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">
+        <?php the_content( __( 'Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys' )  ); ?>
+      </div>
     </article>
+  </section>
+  <section class="Grid-metadata is-first">
+    <?php get_template_part('partials/metadata') ?>
+  </section>
   <?php endwhile; ?>
-
   <?php else: ?>
-    <article>
-      <h1>Sorry, nothing to display</h1>
+  <section class="Grid-article">
+    <article class="Article">
+      <h1 class="Article-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>
   <?php endif; ?>
+  <section class="Grid-banner">
+    <?php get_template_part('partials/banner') ?>
+  </section>
+  <section class="Grid-footer">
+    <?php get_template_part('partials/footer') ?>
+  </section>
 </main>
+<?php get_template_part('partials/navigation') ?>
+<?php get_footer() ?>