New home page :)

_layouts/2017/home.html

@@ -5,10 +5,23 @@ type: website
 
 {% include 2017/top-nav.html page=page %}
 
+<div class='SideAd'>
+  <script async src='//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=ricostacruzcom' id="_carbonads_js"></script>
+</div>
+
 <div class='body-area -slim'>
-  <form data-js-search-form class='search-box'>
+  <div class='site-header'>
+    <h1>
+      Rico's cheatsheets
+    </h1>
+    <p>
+      Hey! I'm <a href='https://ricostacruz.com'>@rstacruz</a> and this is a
+      modest collection of cheatsheets I've written.
+    </p>
+    <form data-js-search-form class='search-box search'>
       <input type='text' placeholder='Search...' autofocus data-js-search-input>
     </form>
+  </div>
 
   <div class='pages-list'>
     <h2 class='category item' id='{{ category | downcase | replace: " ", "-" }}' data-js-searchable-header>

_sass/2017/components/headline-ad.scss

@@ -12,6 +12,7 @@
 
 .HeadlineAd {
   @include font-size(-1);
+  @include carbon-style;
 
   & {
     display: inline-block;
@@ -36,44 +37,8 @@
     zoom: 1;
   }
 
-  .carbon-img,
-  .carbon-text,
-  .carbon-poweredby {
-    text-decoration: none;
-    display: block;
-  }
-
   .carbon-img {
     float: right;
     margin-left: 16px;
-    width: 130px;
-    height: 100px;
-    box-shadow: $shadow3;
-  }
-
-  .carbon-img > img {
-    border-radius: 3px;
-    background: white;
-  }
-
-  .carbon-img:hover {
-    transform: translate3d(0, -1px, 0);
-    box-shadow: $shadow6;
-  }
-
-  .carbon-text,
-  .carbon-text:visited {
-    color: $gray-text;
-  }
-
-  .carbon-poweredby,
-  .carbon-poweredby:visited {
-    color: lighten($gray-text, 20%);
-  }
-
-  .carbon-text:hover,
-  .carbon-poweredby:hover {
-    color: $base-a;
   }
 }
-

_sass/2017/components/search-box.scss

@@ -0,0 +1,26 @@
+.search-box {
+  background: $base-panel;
+  box-shadow: $shadow3;
+  display: flex;
+  height: 64px;
+
+  & > input {
+    @include font-size(2);
+    padding: 16px;
+    height: 64px;
+    background: transparent;
+    border: 0;
+    Flex: 1 0 auto;
+  }
+
+  &::before {
+    @include ion-icon('md-search');
+    font-size: 32px;
+    color: $base-head;
+    flex: 0 0 48px;
+    width: 48px;
+    line-height: 64px;
+    text-indent: 16px;
+    text-align: center;
+  }
+}

_sass/2017/components/side-ad.scss

@@ -0,0 +1,35 @@
+.SideAd {
+  @include font-size(-1);
+  @include carbon-style;
+
+  @media (min-width: 769px) {
+    position: absolute;
+    right: 32px;
+    top: 80px;
+
+    width: 130px;
+
+    .carbon-img {
+      margin-bottom: 16px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    & {
+      margin: 16px auto;
+      max-width: 300px;
+    }
+
+    &::after {
+      content: '';
+      display: table;
+      clear: both;
+      zoom: 1;
+    }
+
+    .carbon-img {
+      float: left;
+      margin-right: 16px;
+    }
+  }
+}

_sass/2017/components/site-header.scss

@@ -0,0 +1,27 @@
+.site-header {
+  margin: 32px 0;
+
+  & > p {
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    color: $base-mute;
+  }
+
+  & > p > a {
+    text-decoration: none;
+  }
+
+  & > h1 {
+    @include font-size(5);
+    margin: 0;
+    padding: 0;
+    color: $base-head;
+    font-weight: 300;
+    text-align: center;
+  }
+
+  & > .search {
+    margin-top: 32px;
+  }
+}

_sass/2017/style.scss

@@ -2,6 +2,7 @@
 @import './variables';
 @import '../vendor/modularscale/modularscale';
 @import '../vendor/iconfonts/ionicons@3';
+@import './utils/carbon-style';
 @import './utils/font-size';
 @import './utils/gutter';
 @import './utils/heading-style';
@@ -11,6 +12,7 @@
 @import './markdown/headings';
 @import './markdown/table';
 @import './markdown/ul';
+@import './components/attribute-peg';
 @import './components/body-area';
 @import './components/h2-section';
 @import './components/h3-section';
@@ -20,5 +22,7 @@
 @import './components/notice-box';
 @import './components/page-actions';
 @import './components/pages-list';
+@import './components/search-box';
+@import './components/side-ad';
+@import './components/site-header';
 @import './components/top-nav';
-@import './components/attribute-peg';

_sass/2017/utils/carbon-style.scss

@@ -0,0 +1,44 @@
+/*
+ * Base carbon ads style
+ */
+
+@mixin carbon-style {
+  .carbon-img,
+  .carbon-text,
+  .carbon-poweredby {
+    text-decoration: none;
+    display: block;
+  }
+
+  .carbon-img {
+    width: 130px;
+    height: 100px;
+    box-shadow: $shadow3;
+  }
+
+  .carbon-img > img {
+    border-radius: 3px;
+    background: white;
+  }
+
+  .carbon-img:hover {
+    transform: translate3d(0, -1px, 0);
+    box-shadow: $shadow6;
+  }
+
+  .carbon-text,
+  .carbon-text:visited {
+    color: $gray-text;
+  }
+
+  .carbon-poweredby,
+  .carbon-poweredby:visited {
+    color: lighten($gray-text, 20%);
+  }
+
+  .carbon-text:hover,
+  .carbon-poweredby:hover {
+    color: $base-a;
+  }
+}
+

index.md

@@ -1,6 +1,6 @@
 ---
 full_title: "Cheatsheets — for web development and more"
 description: "A collection of cheatsheets I've written."
-layout: home
+layout: 2017/home
 type: website
 ---

index@2017.md

@@ -1,6 +0,0 @@
----
-full_title: "Cheatsheets — for web development and more"
-description: "A collection of cheatsheets I've written."
-layout: 2017/home
-type: website
----