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