Update

_sass/2017/base/base.scss

@@ -3,7 +3,7 @@
  */
 
 html, body {
-  background: #fcfcfc;
+  background: $body-bg;
   font-family: $body-font;
   font-size: 14px;
   line-height: 1.6;
@@ -11,11 +11,22 @@ html, body {
 }
 
 body {
-  padding: 16px;
+  padding: 8px;
-  max-width: $column * 3 + 32px;
   margin: 0 auto;
 }
 
+@media (min-width: 481px) {
+  body {
+    padding: 16px;
+    max-width: $column * 3 + 32px;
+  }
+}
+
 pre, code {
   font-family: $monospace-font;
 }
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

_sass/2017/components/h3-section-list.scss

@@ -19,35 +19,13 @@
   // Each section
   & > .h3-section {
     float: left;
-    padding: $gutter / 2;
+    padding: $gutter / 4;
     width: 100%;
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 481px) {
     & > .h3-section {
-      width: 50%;
+      padding: $gutter / 2;
-    }
-
-    & > .h3-section.-wide {
-      width: 100%;
-    }
-
-    & > .h3-section.-halfwide {
-      width: 100%;
-    }
-  }
-
-  @media (min-width: 960px) {
-    & > .h3-section {
-      width: 33.33%;
-    }
-
-    & > .h3-section.-wide {
-      width: 66.67%;
-    }
-
-    & > .h3-section.-halfwide {
-      width: 50%;
     }
   }
 }
@@ -58,7 +36,7 @@
 
 .h3-section-list,
 .h3-section-list.-two-column {
-  @media (min-width: 768px) {
+  @media (min-width: 769px) {
     & > .h3-section {
       width: 50%;
     }
@@ -80,13 +58,13 @@
  */
 
 .h3-section-list.-three-column {
-  @media (min-width: 768px) {
+  @media (min-width: 769px) {
     & > .h3-section {
       width: 50%;
     }
   }
 
-  @media (min-width: 960px) {
+  @media (min-width: 961px) {
     & > .h3-section {
       width: 33.33%;
     }
@@ -98,13 +76,13 @@
  */
 
 .h3-section-list.-left-reference {
-  @media (min-width: 768px) {
+  @media (min-width: 769px) {
     & > .h3-section {
       width: 50%;
     }
   }
 
-  @media (min-width: 960px) {
+  @media (min-width: 961px) {
     & > .h3-section {
       width: 66.67%;
     }

_sass/2017/components/h3-section.scss

@@ -12,10 +12,11 @@
   & {
     background: white;
     box-shadow:
-      0 4px 5px rgba(80, 100, 150, 0.05),
+      0 4px 8px rgba(80, 100, 150, 0.05),
       0 2px 3px rgba(80, 100, 150, 0.1);
   }
 
+  /* Lists */
   & > ul {
     margin: 0;
     padding: 0;
@@ -23,8 +24,8 @@
   }
 
   & > ul > li {
-    padding: 8px 16px;
+    padding: 16px;
-    padding-left: 32px;
+    padding-left: 32px + 4px;
     position: relative;
   }
 
@@ -32,12 +33,12 @@
     content: '';
     position: absolute;
     display: inline-block;
-    width: 8px;
+    width: 4px;
-    height: 8px;
+    height: 4px;
-    background: #666;
+    background: $gray-text;
     border-radius: 50%;
     left: 16px;
-    top: 16px;
+    top: 24px + 2px;
   }
 
   & > ul > li + li {

_sass/2017/markdown/headings.scss

@@ -61,6 +61,11 @@
   font-size: 0.86em;
 }
 
+.MarkdownBody pre,
+.MarkdownBody code {
+  font-family: $monospace-font;
+}
+
 /*
  * Undo prism theme crap
  */

_sass/2017/markdown/table.scss

@@ -13,12 +13,13 @@
 
   /* Horizontal lines */
   & tbody + tbody {
-    border-top: solid 1px $dark-line-color;
+    border-top: solid 4px $line-color;
   }
 
   & td,
   & th {
     padding: 8px 16px;
+    vertical-align: top;
   }
 
   & tr td:last-child {
@@ -52,7 +53,7 @@
     font-size: 1em;
     padding: 5px 6px;
     padding-left: 8px; // compensation
-    background: #fafafa;
+    background: $gray-bg;
     border-radius: 3px;
     margin-right: 2px;
     letter-spacing: 0.2em;

_sass/2017/style.scss

@@ -2,17 +2,19 @@ $gutter: 32px;
 $column: 400px;
 
 $body-font: roboto, sans-serif;
-$monospace-font: menlo, monospace;
+$monospace-font: 'fira mono', Consolas, menlo, 'Andale Mono', 'Ubuntu Mono', monospace;
 
+$body-bg: #f8f8fb;
 $gray-bg: #fcfcfc;
 $gray-text: #678;
 $text-color: #333;
 $baseA-400: #53a;
 $baseB-400: #35a;
-$line-color: #f5f5f5;
+$line-color: rgba(50, 80, 150, 0.1);
-$dark-line-color: #ccc;
+$dark-line-color: rgba(50, 80, 150, 0.2);
 
 @import url('https://unpkg.com/sanitize.css@5.0.0/sanitize.css');
+@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400');
 
 @import './base/base';
 @import './markdown/headings';

assets/2017/script.js

@@ -64,8 +64,6 @@ function groupify ($this, { tag, wrapper, body }) {
   function wrap ($pivot, $first, $sibs) {
     const $wrap = $(wrapper)
     $wrap.addClass($pivot.attr('class'))
-    console.log($pivot[0])
-    console.log('addclass', $pivot.attr('class'))
     $pivot.before($wrap)
 
     const $body = $(body)

react.md

@@ -87,24 +87,6 @@ class Info extends React.Component {
 Nest components to separate concerns. See: [multiple components](http://facebook.github.io/react/docs/multiple-components.html)
 
 
-### Component API
-
-```jsx
-this.forceUpdate()
-```
-
-```jsx
-this.setState({ ... })
-this.replaceState({ ... })
-```
-
-```jsx
-this.state
-this.props
-```
-
-These methods and properies are available for `Component` instances. See [Component API](http://facebook.github.io/react/docs/component-api.html).
-
 ### Properties
 
 ```html
@@ -136,7 +118,7 @@ render () {
 ```
 
 Use states (`this.state`) to manage dynamic data.
-See [States](https://facebook.github.io/react/docs/tutorial.html#reactive-state).
+See: [States](https://facebook.github.io/react/docs/tutorial.html#reactive-state)
 
 ### Setting default props
 
@@ -146,7 +128,7 @@ Hello.defaultProps = {
 }
 ```
 
-See [defaultProps](https://facebook.github.io/react/docs/react-component.html#defaultprops).
+See: [defaultProps](https://facebook.github.io/react/docs/react-component.html#defaultprops)
 
 ### Setting default state
 
@@ -159,16 +141,36 @@ class Hello extends React.Component {
 }
 ```
 
+### Component API
+
+```jsx
+this.forceUpdate()
+```
+
+```jsx
+this.setState({ ... })
+```
+
+```jsx
+this.state
+this.props
+```
+
+These methods and properies are available for `Component` instances. See: [Component API](http://facebook.github.io/react/docs/component-api.html)
+
 Lifecycle
 ---------
 {: .-two-column}
 
 ### Mounting
 
+| Method | Description |
+| --- | --- |
 | `constructor` _(props)_ | Before rendering [#](https://facebook.github.io/react/docs/react-component.html#constructor) |
 | `componentWillMount()` | _Don't use this_ [#](https://facebook.github.io/react/docs/react-component.html#componentwillmount) |
 | `render()` | Render  [#](https://facebook.github.io/react/docs/react-component.html#render) |
 | `componentDidMount()` | After rendering (DOM available) [#](https://facebook.github.io/react/docs/react-component.html#componentdidmount) |
+| --- | --- |
 | `componentWillUnmount()` | Before DOM removal [#](https://facebook.github.io/react/docs/react-component.html#componentwillunmount) |
 
 Set initial the state on `constructor()`.
@@ -176,13 +178,15 @@ Add DOM event handlers, timers (etc) on `componentDidMount()`, then remove them
 
 ### Updating
 
+| Method | Description |
+| --- | --- |
 | `componentWillReceiveProps` *(newProps)* | Use `setState()` here |
 | `shouldComponentUpdate` *(newProps, newState)* | Skips `render()` if returns false |
 | `componentWillUpdate` *(newProps, newState)* | Can't use `setState()` here |
 | `render()` | Render |
 | `componentDidUpdate` *(prevProps, prevState)* | Operate on the DOM here |
 
-Called when parents change properties and `.setState()`. These are not called for initial renders. See [reference](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops).
+Called when parents change properties and `.setState()`. These are not called for initial renders. See: [Reference](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops).
 
 DOM nodes
 ---------
@@ -205,7 +209,7 @@ this.input.focus()
 this.input.value()
 ```
 
-Allows access to DOM nodes. See [Refs and the DOM](https://facebook.github.io/react/docs/refs-and-the-dom.html).
+Allows access to DOM nodes. See: [Refs and the DOM](https://facebook.github.io/react/docs/refs-and-the-dom.html)
 
 ### DOM Events
 
@@ -221,50 +225,54 @@ handleChange: function(event) {
 }
 ```
 
-Add attributes like `onChange`. See [events](https://facebook.github.io/react/docs/events.html).
+Add attributes like `onChange`. See: [Events](https://facebook.github.io/react/docs/events.html)
 
 Property validation
 -------------------
 {: .-three-column}
 
-### React.PropTypes
+### PropTypes
 
-| PropType                  | Description   |
+```js
-| ---                       | ---           |
+import PropTypes from 'prop-types'
-| `any`                     | Anything      |
+```
-| ---                       | ---           |
-| `string`                  |               |
-| `number`                  |               |
-| `func`                    | Function      |
-| `bool`                    | True or false |
-| ---                       | ---           |
-| `oneOf`_(any)_            | Enum types    |
-| `oneOfType`_(type array)_ | Union         |
-| ---                       | ---           |
-| `array`                   |               |
-| `arrayOf`_(...)_          |               |
-| ---                       | ---           |
-| `object`                  |               |
-| `objectOf`_(...)_         |               |
-| `instanceOf`_(...)_       |               |
-| `shape`_(...)_            |               |
-| ---                       | ---           |
-| `element`                 | React element |
-| `node`                    | DOM node      |
-| ---                       | ---           |
-| `.isRequired`             | Required      |
 
-See [propTypes](http://facebook.github.io/react/docs/reusable-components.html#prop-validation).
+See: [Typechecking with PropTypes](https://facebook.github.io/react/docs/typechecking-with-proptypes.html)
+
+| PropType                  | Description                          |
+| ---                       | ---                                  |
+| `any`                     | Anything                             |
+| ---                       | ---                                  |
+| `string`                  |                                      |
+| `number`                  |                                      |
+| `func`                    | Function                             |
+| `bool`                    | True or false                        |
+| ---                       | ---                                  |
+| `oneOf`_(any)_            | Enum types                           |
+| `oneOfType`_(type array)_ | Union                                |
+| ---                       | ---                                  |
+| `array`                   |                                      |
+| `arrayOf`_(...)_          |                                      |
+| ---                       | ---                                  |
+| `object`                  |                                      |
+| `objectOf`_(...)_         | Object with values of a certain type |
+| `instanceOf`_(...)_       | Instance of a class                  |
+| `shape`_(...)_            |                                      |
+| ---                       | ---                                  |
+| `element`                 | React element                        |
+| `node`                    | DOM node                             |
+| ---                       | ---                                  |
+| `.isRequired`             | Required                             |
 
 ### Basic types
 
 ```jsx
 MyComponent.propTypes = {
-  email:      React.PropTypes.string,
+  email:      PropTypes.string,
-  seats:      React.PropTypes.number,
+  seats:      PropTypes.number,
-  callback:   React.PropTypes.func,
+  callback:   PropTypes.func,
-  isClosed:   React.PropTypes.bool,
+  isClosed:   PropTypes.bool,
-  any:        React.PropTypes.any
+  any:        PropTypes.any
 }
 ```
 
@@ -272,7 +280,7 @@ MyComponent.propTypes = {
 
 ```jsx
 MyCo.propTypes = {
-  name:  React.PropTypes.string.isRequired
+  name:  PropTypes.string.isRequired
 }
 ```
 
@@ -281,10 +289,10 @@ MyCo.propTypes = {
 ```jsx
 MyCo.propTypes = {
   // React element
-  element: React.PropTypes.element,
+  element: PropTypes.element,
 
   // num, string, element, or an array of those
-  node: React.PropTypes.node
+  node: PropTypes.node
 }
 ```
 
@@ -292,7 +300,7 @@ MyCo.propTypes = {
 
 ```jsx
 MyCo.propTypes = {
-  direction: React.PropTypes.oneOf([
+  direction: PropTypes.oneOf([
     'left', 'right'
   ])
 }
@@ -302,15 +310,19 @@ MyCo.propTypes = {
 
 ```jsx
 MyCo.propTypes = {
-  array:    React.PropTypes.array,
+  list: PropTypes.array,
-  arrayOf:  React.PropTypes.arrayOf(React.PropTypes.number),
+  ages: PropTypes.arrayOf(PropTypes.number),
-  object:   React.PropTypes.object,
+  user: PropTypes.object,
-  objectOf: React.PropTypes.objectOf(React.PropTypes.number),
+  user: PropTypes.objectOf(PropTypes.number),
-  message:  React.PropTypes.instanceOf(Message),
+  message: PropTypes.instanceOf(Message)
+}
+```
 
-  object2:  React.PropTypes.shape({
+```jsx
-    color:  React.PropTypes.string,
+MyCo.propTypes = {
-    size:   React.PropTypes.number
+  user: PropTypes.shape({
+    name: PropTypes.string,
+    age:  PropTypes.number
   })
 }
 ```
@@ -376,7 +388,11 @@ var style = { height: 10 }
 return <div style={style}></div>
 ```
 
-See [inline styles](https://facebook.github.io/react/tips/inline-styles.html).
+```jsx
+return <div style={{ margin: 0, padding: 0 }}></div>
+```
+
+See: [Inline styles](https://facebook.github.io/react/tips/inline-styles.html)
 
 ### Inner HTML
 
@@ -385,7 +401,7 @@ function markdownify() { return "<p>...</p>"; }
 <div dangerouslySetInnerHTML={{__html: markdownify()}} />
 ```
 
-See [dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html).
+See: [Dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html)
 
 ### Lists