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 ----