diff --git a/Readme.md b/Readme.md
index 6df3738cb..e1d24cffa 100644
--- a/Readme.md
+++ b/Readme.md
@@ -17,3 +17,13 @@ H3's support these:
Tables support these:
{: .-shortcuts}
+
+Each sheet supports these metadata:
+
+```yml
+title: React.js
+category: React
+layout: 2017/sheet # 'default' | '2017/sheet'
+ads: true # Add this for ads
+---
+```
diff --git a/_layouts/2017/sheet.html b/_layouts/2017/sheet.html
index 54851ac5d..d380dd050 100644
--- a/_layouts/2017/sheet.html
+++ b/_layouts/2017/sheet.html
@@ -2,7 +2,14 @@
type: article
---
{% include 2017/head.html %}
-{{ page.title }}
+
+
{{ page.title }} cheatsheet
+ {% if page.ads %}
+
+
+
+ {% endif %}
+
{{ content }}
diff --git a/_sass/2017/base/base.scss b/_sass/2017/base/base.scss
index 662b38193..2c7c8c752 100644
--- a/_sass/2017/base/base.scss
+++ b/_sass/2017/base/base.scss
@@ -16,6 +16,10 @@ body {
margin: 0 auto;
}
+/*
+ * Layout
+ */
+
@media (min-width: 481px) {
body {
padding: 16px;
@@ -23,6 +27,10 @@ body {
}
}
+/*
+ * Code
+ */
+
pre, code {
font-family: $monospace-font;
letter-spacing: -0.03em;
@@ -32,7 +40,27 @@ pre {
font-size: 0.92em;
}
+/*
+ * Antialias
+ */
+
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
+
+/*
+ * Links
+ */
+
+a {
+ color: $baseB;
+}
+
+a:visited {
+ color: $baseB7;
+}
+
+a:hover {
+ color: $baseB3;
+}
diff --git a/_sass/2017/components/h3-section.scss b/_sass/2017/components/h3-section.scss
index 88ff6cefd..6d7efa9ca 100644
--- a/_sass/2017/components/h3-section.scss
+++ b/_sass/2017/components/h3-section.scss
@@ -10,16 +10,13 @@
& {
background: white;
- box-shadow:
- 0 6px 8px rgba(80, 100, 150, 0.02),
- 0 1px 2px rgba(80, 100, 150, 0.20);
+ box-shadow: $shadow3;
}
/* Collapse/flush */
@media (max-width: 480px) {
margin: 0 -16px;
- box-shadow:
- 0 1px 1px rgba(80, 100, 150, 0.30);
+ box-shadow: $shadow2;
}
/* Border radius */
@@ -114,8 +111,6 @@
.h3-section.-prime > .body {
@media (min-width: 481px) {
border-radius: 2px;
- box-shadow:
- 0 8px 12px rgba($baseB3, 0.1),
- 0 2px 3px rgba($baseB, 0.18);
+ box-shadow: $shadow6;
}
}
diff --git a/_sass/2017/components/headline-ad.scss b/_sass/2017/components/headline-ad.scss
new file mode 100644
index 000000000..273b6f5d4
--- /dev/null
+++ b/_sass/2017/components/headline-ad.scss
@@ -0,0 +1,79 @@
+/*
+ * Carbon ads
+ *
+ * .headline-ad
+ * #carbonads
+ * span
+ * span.carbon-wrap
+ * a.carbon-img > img
+ * a.carbon-text {description}
+ * a.carbon-poweredby {powered by Carbon}
+ */
+
+.HeadlineAd {
+ @include font-size(-1);
+
+ & {
+ display: inline-block;
+ }
+
+ &,
+ & > div > span {
+ min-width: 130px + 16px + 64px;
+ max-width: 400px;
+ height: 100px;
+ }
+
+ & > div > span {
+ display: inline-block;
+ text-align: right;
+ }
+
+ & > div > span::after {
+ content: '';
+ display: table;
+ clear: both;
+ 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: $baseB3;
+ }
+}
+
diff --git a/_sass/2017/components/main-heading.scss b/_sass/2017/components/main-heading.scss
new file mode 100644
index 000000000..c7e5d9992
--- /dev/null
+++ b/_sass/2017/components/main-heading.scss
@@ -0,0 +1,40 @@
+/*
+ * The top-level heading
+ */
+
+.main-heading {
+ @include heading-style;
+
+ & > h1 {
+ @include font-size(6);
+ font-weight: 300;
+ font-family: $body-font;
+ margin: 0;
+ padding: 0;
+ }
+
+ & > h1 > em {
+ font-style: normal;
+ color: lighten($gray-text, 20%);
+ }
+}
+
+/*
+ * With ads
+ */
+
+.main-heading.-with-ads {
+ & {
+ display: flex;
+ align-items: flex-end; // bottom alighn
+ }
+
+ & > h1 {
+ flex: 1 0 auto;
+ }
+
+ // Advertisement
+ & > .ad {
+ flex: 0 1 auto;
+ }
+}
diff --git a/_sass/2017/markdown/code.scss b/_sass/2017/markdown/code.scss
new file mode 100644
index 000000000..dd1fdd596
--- /dev/null
+++ b/_sass/2017/markdown/code.scss
@@ -0,0 +1,94 @@
+.MarkdownBody code {
+ color: $gray-text;
+ font-size: 0.86em;
+}
+
+.MarkdownBody pre,
+.MarkdownBody code {
+ font-family: $monospace-font;
+}
+
+/*
+ * Undo prism theme crap
+ */
+
+.MarkdownBody {
+ pre {
+ box-shadow: none;
+ border-left: 0;
+ overflow: hidden;
+ overflow-x: auto;
+ background: white;
+ }
+
+ pre > code {
+ color: $text-color;
+ max-height: auto;
+ padding: 0;
+ background: transparent;
+ overflow: visible;
+ font-size: 1em;
+ }
+
+ // Line highlight
+ .line-highlight {
+ background: linear-gradient(
+ to right,
+ rgba($baseB, 0.05) 75%,
+ rgba($baseB, 0));
+ }
+
+ // Line highlight ranges
+ .line-highlight[data-end] {
+ margin-top: 0;
+ }
+
+ .line-highlight::before,
+ .line-highlight::after {
+ display: none;
+ }
+}
+
+/*
+ * Syntax kighlight
+ */
+
+.token {
+ $cA: $baseB;
+ $cA-3: adjust-color($cA, $lightness: 15%, $hue: -10deg);
+ $cA-7: adjust-color($cA, $lightness: -15%, $hue: 10deg);
+
+ $cB: $baseC;
+ $cB-3: adjust-color($cB, $lightness: 15%, $hue: -10deg);
+
+ $cM: #aaa; // Mute
+
+ &.tag,
+ &.keyword {
+ color: $cA;
+ }
+
+ &.tag {
+ color: $cA-7;
+ }
+
+ &.value,
+ &.string,
+ &.number,
+ &.attr-value,
+ &.boolean,
+ &.regex {
+ color: $cB;
+ }
+
+ &.function,
+ &.attr-name {
+ color: $cA-3;
+ }
+
+ &.comment,
+ &.punctuation,
+ &.operator {
+ color: $cM;
+ }
+}
diff --git a/_sass/2017/markdown/headings.scss b/_sass/2017/markdown/headings.scss
index 06bb571af..1543f793f 100644
--- a/_sass/2017/markdown/headings.scss
+++ b/_sass/2017/markdown/headings.scss
@@ -2,43 +2,14 @@
* MarkdownBody context
*/
-.main-heading,
-.MarkdownBody h1,
.MarkdownBody h2 {
+ @include heading-style;
+ @include font-size(5);
font-weight: 300;
font-family: $body-font;
- margin: $gutter / 2;
- padding: 0;
- margin-bottom: 16px;
- padding-bottom: 16px;
- margin-top: 64px;
- border-bottom: solid 1px $line-color;
-
- @media (max-width: 768px) {
- margin: $gutter / 2;
- margin-bottom: 8px;
- margin-top: 32px;
- padding-bottom: 8px;
- }
-
- @media (max-width: 480px) {
- margin: $gutter / 4;
- margin-bottom: 8px;
- margin-top: 32px;
- padding-bottom: 8px;
- }
-}
-
-.main-heading,
-.MarkdownBody h1 {
- @include font-size(6);
margin-top: 0;
}
-.MarkdownBody h2 {
- @include font-size(5);
-}
-
.MarkdownBody h3 {
margin: 0;
padding: 0;
@@ -71,98 +42,3 @@
width: 100%;
}
}
-
-.MarkdownBody code {
- color: $gray-text;
- font-size: 0.86em;
-}
-
-.MarkdownBody pre,
-.MarkdownBody code {
- font-family: $monospace-font;
-}
-
-/*
- * Undo prism theme crap
- */
-
-.MarkdownBody {
- pre {
- box-shadow: none;
- border-left: 0;
- overflow: hidden;
- overflow-x: auto;
- background: white;
- }
-
- pre > code {
- color: $text-color;
- max-height: auto;
- padding: 0;
- background: transparent;
- overflow: visible;
- font-size: 1em;
- }
-
- // Line highlight
- .line-highlight {
- background: linear-gradient(
- to right,
- rgba($baseB, 0.05) 75%,
- rgba($baseB, 0));
- }
-
- // Line highlight ranges
- .line-highlight[data-end] {
- margin-top: 0;
- }
-
- .line-highlight::before,
- .line-highlight::after {
- display: none;
- }
-}
-
-/*
- * Syntax kighlight
- */
-
-.token {
- $cA: $baseB;
- $cA-3: adjust-color($cA, $lightness: 15%, $hue: -10deg);
- $cA-7: adjust-color($cA, $lightness: -15%, $hue: 10deg);
-
- $cB: $baseC;
- $cB-3: adjust-color($cB, $lightness: 15%, $hue: -10deg);
-
- $cM: #aaa; // Mute
-
- &.tag,
- &.keyword {
- color: $cA;
- }
-
- &.tag {
- color: $cA-7;
- }
-
- &.value,
- &.string,
- &.number,
- &.attr-value,
- &.boolean,
- &.regex {
- color: $cB;
- }
-
- &.function,
- &.attr-name {
- color: $cA-3;
- }
-
- &.comment,
- &.punctuation,
- &.operator {
- color: $cM;
- }
-}
diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss
index 96c930334..9852e908a 100644
--- a/_sass/2017/style.scss
+++ b/_sass/2017/style.scss
@@ -1,26 +1,62 @@
+/*
+ * Metrics
+ */
+
$gutter: 32px;
$column: 400px;
+/*
+ * Fonts
+ */
+
$system-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
$body-font: $system-font;
$heading-font: 'Helvetica Neue', $system-font;
-$monospace-font: 'fira mono', Consolas, menlo, 'Andale Mono', 'Ubuntu Mono', monospace;
+$monospace-font: 'Fira Mono', Consolas, menlo, 'Andale Mono', 'Ubuntu Mono', monospace;
+
+/*
+ * Base colors
+ */
$baseA: #8370bd; // indigo
$baseB: #2b72a2; // blue
$baseC: #17c694; // teal
$baseM: #667788; // gray
+$baseB3: adjust-color($baseB, $lightness: 20%, $hue: -20deg);
+$baseB7: adjust-color($baseB, $lightness: -20%, $hue: 20deg);
+$baseM3: adjust-color($baseM, $lightness: -20%);
+$baseM4: adjust-color($baseM, $lightness: -10%);
+$baseM6: adjust-color($baseM, $lightness: 10%);
+$baseM7: adjust-color($baseM, $lightness: 20%);
+
$body-bg: #f1f3f5;
$gray-bg: #fcfcfc;
$gray-text: $baseM;
$text-color: #345;
-$baseB3: adjust-color($baseB, $lightness: 20%, $hue: -20deg);
-
$line-color: rgba(50, 80, 150, 0.05);
$dark-line-color: rgba(50, 80, 150, 0.14);
+//
+// Shadows
+//
+
+$shadow2:
+ 0 1px 1px rgba($baseM, 0.30);
+
+$shadow3:
+ 0 6px 8px rgba($baseM, 0.02),
+ 0 1px 2px rgba($baseM, 0.20);
+
+$shadow6:
+ 0 8px 12px rgba($baseB3, 0.1),
+ 0 2px 3px rgba($baseB, 0.18);
+
+/*
+ * Mod scale
+ */
+
$modularscale: (
base: 14px, ratio: 1.2,
480px: (base: 13px, ratio: 1.15),
@@ -28,11 +64,19 @@ $modularscale: (
1280px: (base: 14px, ratio: 1.2)
);
+/*
+ * Imports
+ */
+
@import './utils/modularscale';
@import './utils/font-size';
+@import './utils/heading-style';
@import './base/base';
+@import './markdown/code';
@import './markdown/headings';
@import './markdown/table';
@import './components/h2-section';
-@import './components/h3-section-list';
@import './components/h3-section';
+@import './components/h3-section-list';
+@import './components/headline-ad';
+@import './components/main-heading';
diff --git a/_sass/2017/utils/heading-style.scss b/_sass/2017/utils/heading-style.scss
new file mode 100644
index 000000000..0eb70826c
--- /dev/null
+++ b/_sass/2017/utils/heading-style.scss
@@ -0,0 +1,22 @@
+@mixin heading-style {
+ margin: $gutter / 2;
+ padding: 0;
+ margin-bottom: 16px;
+ padding-bottom: 16px;
+ margin-top: 64px;
+ border-bottom: solid 1px $line-color;
+
+ @media (max-width: 768px) {
+ margin: $gutter / 2;
+ margin-bottom: 8px;
+ margin-top: 32px;
+ padding-bottom: 8px;
+ }
+
+ @media (max-width: 480px) {
+ margin: $gutter / 4;
+ margin-bottom: 8px;
+ margin-top: 32px;
+ padding-bottom: 8px;
+ }
+}
diff --git a/react.md b/react.md
index fd070f022..845021110 100644
--- a/react.md
+++ b/react.md
@@ -2,6 +2,7 @@
title: React.js
category: React
layout: 2017/sheet
+ads: true
---
{%raw%}