diff --git a/_includes/2017/foot.html b/_includes/2017/foot.html index 9943ff0f8..308b1d01b 100644 --- a/_includes/2017/foot.html +++ b/_includes/2017/foot.html @@ -1,3 +1,2 @@ - diff --git a/_includes/2017/head.html b/_includes/2017/head.html index 0d58e1998..7655d6230 100644 --- a/_includes/2017/head.html +++ b/_includes/2017/head.html @@ -24,4 +24,3 @@ -
diff --git a/_includes/2017/top-nav.html b/_includes/2017/top-nav.html new file mode 100644 index 000000000..84a2fb4e9 --- /dev/null +++ b/_includes/2017/top-nav.html @@ -0,0 +1,9 @@ +
+ + Rico's cheatsheets + + +
+ {% include social-list.html class="social" page=include.page %} +
+
diff --git a/_layouts/2017/sheet.html b/_layouts/2017/sheet.html index d380dd050..3ded09b34 100644 --- a/_layouts/2017/sheet.html +++ b/_layouts/2017/sheet.html @@ -2,15 +2,22 @@ type: article --- {% include 2017/head.html %} -
-

{{ page.title }} cheatsheet

- {% if page.ads %} -
- -
- {% endif %} -
-
- {{ content }} + +{% include 2017/top-nav.html page=page %} + +
+
+

{{ page.title }} cheatsheet

+ {% if page.ads %} +
+ +
+ {% endif %} +
+ +
+ {{ content }} +
+ {% include 2017/foot.html %} diff --git a/_sass/2017/base/base.scss b/_sass/2017/base/base.scss index 2c7c8c752..86ac7403c 100644 --- a/_sass/2017/base/base.scss +++ b/_sass/2017/base/base.scss @@ -12,19 +12,8 @@ html, body { body { @include font-size(0); - padding: 8px; - margin: 0 auto; -} - -/* - * Layout - */ - -@media (min-width: 481px) { - body { - padding: 16px; - max-width: $column * 3 + 32px; - } + padding: 0; + margin: 0; } /* diff --git a/_sass/2017/components/body-area.scss b/_sass/2017/components/body-area.scss new file mode 100644 index 000000000..d17f6e604 --- /dev/null +++ b/_sass/2017/components/body-area.scss @@ -0,0 +1,9 @@ +.body-area { + max-width: $column * 3 + 32px; + margin: 0 auto; + padding: 8px; + + @media (min-width: 481px) { + padding: 16px; + } +} diff --git a/_sass/2017/components/top-nav.scss b/_sass/2017/components/top-nav.scss new file mode 100644 index 000000000..6fe0a1cd4 --- /dev/null +++ b/_sass/2017/components/top-nav.scss @@ -0,0 +1,31 @@ +.top-nav { + & { + border-bottom: solid 1px $dark-line-color; + height: 48px; + line-height: 48px; + text-align: center; + } + + & > .brand { + @include font-size(-1); + display: block; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 0.05em; + text-decoration: none; + + &, + &:visited { + color: $text-color; + } + + &:hover { + color: $baseA; + } + } + + & > .actions > .social { + // TODO + display: none; + } +} diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss index 8034c8987..6c12e6ad6 100644 --- a/_sass/2017/style.scss +++ b/_sass/2017/style.scss @@ -75,8 +75,10 @@ $modularscale: ( @import './markdown/code'; @import './markdown/headings'; @import './markdown/table'; +@import './components/body-area'; @import './components/h2-section'; @import './components/h3-section'; @import './components/h3-section-list'; @import './components/headline-ad'; @import './components/main-heading'; +@import './components/top-nav';