diff --git a/_layouts/2017/home.html b/_layouts/2017/home.html
index 239154e8e..5904be7e7 100644
--- a/_layouts/2017/home.html
+++ b/_layouts/2017/home.html
@@ -5,10 +5,23 @@ type: website
{% include 2017/top-nav.html page=page %}
+
-
+
diff --git a/_sass/2017/components/headline-ad.scss b/_sass/2017/components/headline-ad.scss
index 8c005353e..29e7d7e2c 100644
--- a/_sass/2017/components/headline-ad.scss
+++ b/_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;
}
}
-
diff --git a/_sass/2017/components/search-box.scss b/_sass/2017/components/search-box.scss
new file mode 100644
index 000000000..ccba7f178
--- /dev/null
+++ b/_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;
+ }
+}
diff --git a/_sass/2017/components/side-ad.scss b/_sass/2017/components/side-ad.scss
new file mode 100644
index 000000000..47915a68f
--- /dev/null
+++ b/_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;
+ }
+ }
+}
diff --git a/_sass/2017/components/site-header.scss b/_sass/2017/components/site-header.scss
new file mode 100644
index 000000000..cddd19c88
--- /dev/null
+++ b/_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;
+ }
+}
diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss
index 81b6d2526..d0e704100 100644
--- a/_sass/2017/style.scss
+++ b/_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';
diff --git a/_sass/2017/utils/carbon-style.scss b/_sass/2017/utils/carbon-style.scss
new file mode 100644
index 000000000..7887e4680
--- /dev/null
+++ b/_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;
+ }
+}
+
diff --git a/index.md b/index.md
index 47b169f7d..716c5b115 100644
--- a/index.md
+++ b/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
---
diff --git a/index@2017.md b/index@2017.md
deleted file mode 100644
index 716c5b115..000000000
--- a/index@2017.md
+++ /dev/null
@@ -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
----