From 4d7af5d276c4c7b09f54624b4fcbab76341f8174 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Fri, 25 Aug 2017 16:10:51 +0800
Subject: [PATCH] Update

---
 Readme.md                               |  4 ++++
 _sass/2017/components/main-heading.scss |  2 ++
 _sass/2017/markdown/code.scss           |  4 ++++
 _sass/2017/utils/heading-style.scss     |  2 +-
 react.md                                | 13 +++++++++----
 sh.md                                   |  1 +
 6 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/Readme.md b/Readme.md
index e1d24cffa..291d5f1f3 100644
--- a/Readme.md
+++ b/Readme.md
@@ -18,6 +18,10 @@ Tables support these:
 
     {: .-shortcuts}
 
+Pre's support these:
+
+    {: .-setup}
+
 Each sheet supports these metadata:
 
 ```yml
diff --git a/_sass/2017/components/main-heading.scss b/_sass/2017/components/main-heading.scss
index 388199ca7..522ac0cb3 100644
--- a/_sass/2017/components/main-heading.scss
+++ b/_sass/2017/components/main-heading.scss
@@ -28,6 +28,7 @@
     display: flex;
   }
 
+  // Desktop
   @media (min-width: 541px) {
     & {
       align-items: flex-end; // bottom alighn
@@ -40,6 +41,7 @@
     // Advertisement
     & > .ad {
       flex: 0 1 auto;
+      margin-bottom: 16px;
     }
   }
 
diff --git a/_sass/2017/markdown/code.scss b/_sass/2017/markdown/code.scss
index dd1fdd596..746d221c2 100644
--- a/_sass/2017/markdown/code.scss
+++ b/_sass/2017/markdown/code.scss
@@ -49,6 +49,10 @@
   }
 }
 
+.MarkdownBody pre.-setup {
+  background: $gray-bg;
+}
+
 /*
  * Syntax kighlight
  */
diff --git a/_sass/2017/utils/heading-style.scss b/_sass/2017/utils/heading-style.scss
index 0eb70826c..b557d1c79 100644
--- a/_sass/2017/utils/heading-style.scss
+++ b/_sass/2017/utils/heading-style.scss
@@ -4,7 +4,7 @@
   margin-bottom: 16px;
   padding-bottom: 16px;
   margin-top: 64px;
-  border-bottom: solid 1px $line-color;
+  border-bottom: solid 1px $dark-line-color;
 
   @media (max-width: 768px) {
     margin: $gutter / 2;
diff --git a/react.md b/react.md
index 845021110..7ef41f633 100644
--- a/react.md
+++ b/react.md
@@ -18,6 +18,7 @@ Components
 import React from 'react'
 import ReactDOM from 'react-dom'
 ```
+{: .-setup}
 
 ```jsx
 class Hello extends React.Component {
@@ -41,6 +42,7 @@ Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hack
 ```html
 <Video fullscreen={true} />
 ```
+{: .-setup}
 
 ```jsx
 render () {
@@ -140,7 +142,7 @@ class AlertBox extends React.Component {
 
 ```jsx
 <AlertBox>
-<h1>You have pending notifications</h1>
+  <h1>You have pending notifications</h1>
 </AlertBox>
 ```
 
@@ -243,6 +245,7 @@ Property validation
 ```js
 import PropTypes from 'prop-types'
 ```
+{: .-setup}
 
 See: [Typechecking with PropTypes](https://facebook.github.io/react/docs/typechecking-with-proptypes.html)
 
@@ -355,6 +358,7 @@ MyCo.propTypes = {
 ```html
 <VideoPlayer src="video.mp4" />
 ```
+{: .-setup}
 
 ```jsx
 class VideoPlayer extends React.Component {
@@ -425,6 +429,7 @@ class TodoList extends React.Component {
   }
 }
 ```
+{: data-line="6-7"}
 
 Always supply a `key` property.
 
@@ -432,9 +437,9 @@ Always supply a `key` property.
 
 ```jsx
 <div>
-{showPopup
-  ? <Popup />
-  : null}
+  {showPopup
+    ? <Popup />
+    : null}
 </div>
 ```
 
diff --git a/sh.md b/sh.md
index 4b41d83d3..c817831a9 100644
--- a/sh.md
+++ b/sh.md
@@ -2,6 +2,7 @@
 title: Bash scripting
 category: CLI
 layout: 2017/sheet
+ads: true
 ---
 
 Getting started