Ads
This commit is contained in:
parent
3614dc8a73
commit
0b5feb83a2
10
Readme.md
10
Readme.md
|
@ -17,3 +17,13 @@ H3's support these:
|
||||||
Tables support these:
|
Tables support these:
|
||||||
|
|
||||||
{: .-shortcuts}
|
{: .-shortcuts}
|
||||||
|
|
||||||
|
Each sheet supports these metadata:
|
||||||
|
|
||||||
|
```yml
|
||||||
|
title: React.js
|
||||||
|
category: React
|
||||||
|
layout: 2017/sheet # 'default' | '2017/sheet'
|
||||||
|
ads: true # Add this for ads
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
|
@ -2,7 +2,14 @@
|
||||||
type: article
|
type: article
|
||||||
---
|
---
|
||||||
{% include 2017/head.html %}
|
{% include 2017/head.html %}
|
||||||
<h1 class='main-heading'>{{ page.title }}</h1>
|
<div class='main-heading {% if page.ads %}-with-ads{% endif %}'>
|
||||||
|
<h1 class='h1'>{{ page.title }} <em>cheatsheet</em></h1>
|
||||||
|
{% if page.ads %}
|
||||||
|
<div class='HeadlineAd ad'>
|
||||||
|
<script async src='//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=ricostacruzcom' id="_carbonads_js"></script>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
<div class='post-content MarkdownBody' data-js-main-body>
|
<div class='post-content MarkdownBody' data-js-main-body>
|
||||||
{{ content }}
|
{{ content }}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -16,6 +16,10 @@ body {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Layout
|
||||||
|
*/
|
||||||
|
|
||||||
@media (min-width: 481px) {
|
@media (min-width: 481px) {
|
||||||
body {
|
body {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
@ -23,6 +27,10 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Code
|
||||||
|
*/
|
||||||
|
|
||||||
pre, code {
|
pre, code {
|
||||||
font-family: $monospace-font;
|
font-family: $monospace-font;
|
||||||
letter-spacing: -0.03em;
|
letter-spacing: -0.03em;
|
||||||
|
@ -32,7 +40,27 @@ pre {
|
||||||
font-size: 0.92em;
|
font-size: 0.92em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Antialias
|
||||||
|
*/
|
||||||
|
|
||||||
* {
|
* {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Links
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $baseB;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: $baseB7;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: $baseB3;
|
||||||
|
}
|
||||||
|
|
|
@ -10,16 +10,13 @@
|
||||||
|
|
||||||
& {
|
& {
|
||||||
background: white;
|
background: white;
|
||||||
box-shadow:
|
box-shadow: $shadow3;
|
||||||
0 6px 8px rgba(80, 100, 150, 0.02),
|
|
||||||
0 1px 2px rgba(80, 100, 150, 0.20);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Collapse/flush */
|
/* Collapse/flush */
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
margin: 0 -16px;
|
margin: 0 -16px;
|
||||||
box-shadow:
|
box-shadow: $shadow2;
|
||||||
0 1px 1px rgba(80, 100, 150, 0.30);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Border radius */
|
/* Border radius */
|
||||||
|
@ -114,8 +111,6 @@
|
||||||
.h3-section.-prime > .body {
|
.h3-section.-prime > .body {
|
||||||
@media (min-width: 481px) {
|
@media (min-width: 481px) {
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
box-shadow:
|
box-shadow: $shadow6;
|
||||||
0 8px 12px rgba($baseB3, 0.1),
|
|
||||||
0 2px 3px rgba($baseB, 0.18);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -2,43 +2,14 @@
|
||||||
* MarkdownBody context
|
* MarkdownBody context
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.main-heading,
|
|
||||||
.MarkdownBody h1,
|
|
||||||
.MarkdownBody h2 {
|
.MarkdownBody h2 {
|
||||||
|
@include heading-style;
|
||||||
|
@include font-size(5);
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-family: $body-font;
|
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;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.MarkdownBody h2 {
|
|
||||||
@include font-size(5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.MarkdownBody h3 {
|
.MarkdownBody h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -71,98 +42,3 @@
|
||||||
width: 100%;
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,26 +1,62 @@
|
||||||
|
/*
|
||||||
|
* Metrics
|
||||||
|
*/
|
||||||
|
|
||||||
$gutter: 32px;
|
$gutter: 32px;
|
||||||
$column: 400px;
|
$column: 400px;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Fonts
|
||||||
|
*/
|
||||||
|
|
||||||
$system-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
$system-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
$body-font: $system-font;
|
$body-font: $system-font;
|
||||||
$heading-font: 'Helvetica Neue', $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
|
$baseA: #8370bd; // indigo
|
||||||
$baseB: #2b72a2; // blue
|
$baseB: #2b72a2; // blue
|
||||||
$baseC: #17c694; // teal
|
$baseC: #17c694; // teal
|
||||||
$baseM: #667788; // gray
|
$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;
|
$body-bg: #f1f3f5;
|
||||||
$gray-bg: #fcfcfc;
|
$gray-bg: #fcfcfc;
|
||||||
$gray-text: $baseM;
|
$gray-text: $baseM;
|
||||||
$text-color: #345;
|
$text-color: #345;
|
||||||
|
|
||||||
$baseB3: adjust-color($baseB, $lightness: 20%, $hue: -20deg);
|
|
||||||
|
|
||||||
$line-color: rgba(50, 80, 150, 0.05);
|
$line-color: rgba(50, 80, 150, 0.05);
|
||||||
$dark-line-color: rgba(50, 80, 150, 0.14);
|
$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: (
|
$modularscale: (
|
||||||
base: 14px, ratio: 1.2,
|
base: 14px, ratio: 1.2,
|
||||||
480px: (base: 13px, ratio: 1.15),
|
480px: (base: 13px, ratio: 1.15),
|
||||||
|
@ -28,11 +64,19 @@ $modularscale: (
|
||||||
1280px: (base: 14px, ratio: 1.2)
|
1280px: (base: 14px, ratio: 1.2)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Imports
|
||||||
|
*/
|
||||||
|
|
||||||
@import './utils/modularscale';
|
@import './utils/modularscale';
|
||||||
@import './utils/font-size';
|
@import './utils/font-size';
|
||||||
|
@import './utils/heading-style';
|
||||||
@import './base/base';
|
@import './base/base';
|
||||||
|
@import './markdown/code';
|
||||||
@import './markdown/headings';
|
@import './markdown/headings';
|
||||||
@import './markdown/table';
|
@import './markdown/table';
|
||||||
@import './components/h2-section';
|
@import './components/h2-section';
|
||||||
@import './components/h3-section-list';
|
|
||||||
@import './components/h3-section';
|
@import './components/h3-section';
|
||||||
|
@import './components/h3-section-list';
|
||||||
|
@import './components/headline-ad';
|
||||||
|
@import './components/main-heading';
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue