This commit is contained in:
Rico Sta. Cruz 2017-08-25 14:32:11 +08:00
parent 3614dc8a73
commit 0b5feb83a2
No known key found for this signature in database
GPG Key ID: CAAD38AE2962619A
11 changed files with 335 additions and 139 deletions

View File

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

View File

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

View File

@ -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;
}

View File

@ -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);
} }
} }

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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';

View File

@ -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;
}
}

View File

@ -2,6 +2,7 @@
title: React.js title: React.js
category: React category: React
layout: 2017/sheet layout: 2017/sheet
ads: true
--- ---
{%raw%} {%raw%}