Add Banner partial with social icons

css/article.css

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

css/grid.css

@@ -10,6 +10,17 @@
   padding: 0 var(--spaceSm);
 }
 
+.Grid-logo {
+  display: flex;
+  font-size: 0;
+  justify-content: center;
+}
+
+.Grid-banner {
+  display: none;
+  position: relative;
+}
+
 @media (--viewportLg) {
   .Grid {
     grid-template-columns: 224px 1fr;
@@ -17,6 +28,12 @@
     padding: 0 var(--spaceMd);
   }
 
+  .Grid-banner {
+    display: block;
+    grid-column-start: 2;
+    grid-row-start: 1;
+  }
+
   .Grid-article {
     grid-column-start: 2;
   }

css/icon.css

@@ -23,3 +23,7 @@
 .Icon--twitter {
   color: var(--colorTwitter);
 }
+
+.Icon--rss {
+  color: var(--colorRss);
+}

css/index.css

@@ -19,6 +19,7 @@ License URI: http://www.gnu.org/licenses/gpl-2.0.html
 @import "menu";
 @import "nav";
 @import "search";
+@import "social";
 @import "icon";
 
 :root {
@@ -29,6 +30,7 @@ License URI: http://www.gnu.org/licenses/gpl-2.0.html
   --colorLightGrey: #e0e0e0;
   --colorFacebook: #3e5a98;
   --colorTwitter: #1da1f2;
+  --colorRss: #ee802f;
   --spaceSm: 10px;
   --spaceMd: 30px;
   --spaceLg: 60px;

css/logo.css

@@ -1,11 +1,5 @@
 /** @define Logo */
 
-.Logo {
-  display: flex;
-  font-size: 0;
-  justify-content: center;
-}
-
 .Logo-image {
   filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
   max-width: 320px;

css/social.css

@@ -0,0 +1,11 @@
+/** @define Social */
+
+.Social {
+  position: absolute;
+  right: var(--spaceSm);
+  top: var(--spaceSm);
+}
+
+.Social-link {
+  display: inline-block;
+}

theme/icons.php

@@ -36,6 +36,17 @@
   12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857
   128z"></path>
 </symbol>
+<symbol id="icon-rss" viewBox="0 0 448 512">
+<path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49
+  48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51
+  0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm157.533
+  0h-34.335c-6.011 0-11.051-4.636-11.442-10.634-5.214-80.05-69.243-143.92-149.123-149.123-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535
+  5.468-11.777 11.994-11.425 110.546 5.974 198.997 94.536 204.964 204.964.352
+  6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038-5.598-136.535-115.204-246.161-251.76-251.76C68.882
+  152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432
+  167.83 6.025 302.21 141.191 308.205 308.205.232 6.449-4.978 11.787-11.432
+  11.787z"></path>
+</symbol>
 <symbol id="icon-twitter" viewBox="0 0 512 512">
 <path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0
   138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106

theme/index.php

@@ -1,9 +1,11 @@
 <?php get_header() ?>
 <main class="Grid">
-  <?php get_template_part('partials/logo') ?>
+  <section class="Grid-logo">
-  <?php while ( have_posts() ) : the_post() ?>
+    <?php get_template_part('partials/logo') ?>
+  </section>
+  <?php while ( have_posts() ) : the_post(); $index++; ?>
   <section class="Grid-article">
-    <article class="Article">
+    <article class="Article<?php echo ($index === 1 ? ' is-first' : '') ?>">
       <div class="Article-date">
         <svg class="Icon">
           <use href="#icon-calendar"></use>
@@ -26,6 +28,9 @@
     <?php get_template_part('partials/metadata') ?>
   </section>
   <?php endwhile; ?>
+  <section class="Grid-banner">
+    <?php get_template_part('partials/banner') ?>
+  </section>
   <section class="Grid-footer">
     <?php get_template_part('partials/footer') ?>
   </section>

theme/partials/banner.php

@@ -0,0 +1,18 @@
+<div class="Social">
+  <a class="Social-link" href="https://www.facebook.com/WindyCOYS/">
+    <svg class="Icon Icon--facebook">
+      <use href="#icon-facebook"></use>
+    </svg>
+  </a>
+  <a class="Social-link" href="https://twitter.com/windycoys/">
+    <svg class="Icon Icon--twitter">
+      <use href="#icon-twitter"></use>
+    </svg>
+  </a>
+  <a class="Social-link" href="/feed">
+    <svg class="Icon Icon--rss">
+      <use href="#icon-rss"></use>
+    </svg>
+  </a>
+</div>
+

theme/partials/logo.php

@@ -1,6 +1,6 @@
-<section class="Logo">
+<div class="Logo">
   <a class="Logo-link" href="<?php echo home_url(); ?>">
     <img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="Logo-image">
   </a>
-</section>
+</div>