Update more sheets

Readme.md

@@ -37,8 +37,11 @@ Each sheet supports these metadata:
 title: React.js
 category: React
 layout: 2017/sheet   # 'default' | '2017/sheet'
-ads: false           # Add this to disable ads
+
+# Optional:
 updated: 201708      # To show in the updated list (update _config.yml)
+ads: false           # Add this to disable ads
+weight: -5           # lower number = higher in related posts list
 ---
 ```
 

_drafts/deprecated/cinema4d.md

@@ -0,0 +1,7 @@
+---
+title: Cinema4d
+category: Apps
+---
+
+    E R T   : Move/rotate/scale
+    P       : snapping

_drafts/deprecated/eslint.md

@@ -0,0 +1,18 @@
+---
+title: eslint
+category: JavaScript libraries
+---
+
+```js
+// "comma-dangle": "always" ("always-multiline", "never")
+var foo = {
+    bar: "baz",
+    qux: "quux",
+};
+var arr = [1,2,];
+```
+
+```
+// "yoda": "always" ("never")
+if ("red" === color)
+```

_sass/2017/markdown/code.scss

@@ -50,7 +50,9 @@
   }
 }
 
-.MarkdownBody pre.-setup {
+.MarkdownBody pre.-setup,
+.MarkdownBody p.-setup,
+.MarkdownBody ul.-setup {
   background: $gray-bg;
 }
 

css-flexbox.md

@@ -1,135 +1,194 @@
 ---
 title: CSS flexbox
 category: CSS
+layout: 2017/sheet
+updated: 201708.29
+weight: -3
 ---
 
-    .container {
+### Simple example
-      display: flex;
-    }
 
-    .container.vertical {
+```css
-      flex-direction: column;
+.container {
-    }
+  display: flex;
+}
+```
 
-    .container > div {
+```css
-      flex: /* grow, shrink, basis */;
+.container > div {
-      flex: 0 0 40px; /* fixed width */
+  flex: 1 1 auto;
-      flex: 0 1 auto; /* dynamic width */
+}
+```
 
-      order: 1;
+### Container
-    }
 
-### Full reference
+```css
+.container {
+```
+{: .-setup}
 
-    .container {
+```css
-      display: flex;
+  display: flex;
-      display: inline-flex;
+  display: inline-flex;
+```
 
-      flex-direction: row;            /* ltr - default */
+```css
-      flex-direction: row-reverse;    /* rtl */
+  flex-direction: row;            /* ltr - default */
-      flex-direction: column;         /* top-bottom */
+  flex-direction: row-reverse;    /* rtl */
-      flex-direction: column-reverse; /* bottom-top */
+  flex-direction: column;         /* top-bottom */
+  flex-direction: column-reverse; /* bottom-top */
+```
 
-      flex-wrap: nowrap; /* one-line */
+```css
-      flex-wrap: wrap;   /* multi-line */
+  flex-wrap: nowrap; /* one-line */
+  flex-wrap: wrap;   /* multi-line */
+```
 
-      align-items: flex-start; /* vertical-align to top */
+```css
-      align-items: flex-end;   /* vertical-align to bottom */
+  align-items: flex-start; /* vertical-align to top */
-      align-items: center;     /* vertical-align to center */
+  align-items: flex-end;   /* vertical-align to bottom */
-      align-items: stretch;    /* same height on all (default) */
+  align-items: center;     /* vertical-align to center */
+  align-items: stretch;    /* same height on all (default) */
+```
 
-      justify-content: flex-start; /* horizontal alignment - default */
+```css
-      justify-content: flex-end;
+  justify-content: flex-start; /* horizontal alignment - default */
-      justify-content: center;
+  justify-content: flex-end;
-    }
+  justify-content: center;
+```
 
-    .container > div {
+```css
-      flex: 1 0 0;
+}
-      order: 1;
+```
-      flex-grow: 0;
+{: .-setup}
+
+### Child
+
+```css
+.container > div {
+```
+{: .-setup}
+
+```css
+  /* This: */
+  flex: 1 0 auto;
+
+  /* Is equivalent to this: */
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: auto;
+```
+
+```css
+  order: 1;
+```
+
+```css
+  align-self: flex-start;  /* left */
+  margin-left: auto;       /* right */
+```
+
+```css
+}
+```
+{: .-setup}
 
-      align-self: flex-start;  /* left */
-      margin-left: auto;       /* right */
-    }
 
 ## Tricks
 
 ### Vertical center
 
-    .container {
+```css
-      display: flex;
+.container {
-    }
+  display: flex;
+}
 
-    .container > div {
+.container > div {
-      width: 100px;
+  width: 100px;
-      height: 100px;
+  height: 100px;
-      margin: auto;
+  margin: auto;
-    }
+}
+```
 
 ### Vertical center (2)
 
-    .container {
+```css
-      display: flex;
+.container {
-      align-items: center;     /* vertical */
+  display: flex;
-      justify-content: center; /* horizontal */
+  align-items: center;     /* vertical */
-    }
+  justify-content: center; /* horizontal */
+}
+```
 
 ### Reordering
 
-    .container > .top {
+```css
-     order: 1;
+.container > .top {
-    }
+ order: 1;
+}
 
-    .container > .bottom {
+.container > .bottom {
-     order: 2;
+ order: 2;
-    }
+}
+```
 
 ### Mobile layout
 
-A fixed-heighttop bar and a dynamic-height content area.
 
-    .container {
+```css
-      display: flex;
+.container {
-      flex-direction: column;
+  display: flex;
-    }
+  flex-direction: column;
+}
 
-    .container > .top {
+.container > .top {
-      flex: 0 0 100px;
+  flex: 0 0 100px;
-    }
+}
 
-    .container > .content {
+.container > .content {
-      height: 100px;
+  height: 100px;
-      flex: 1 0 auto;
+  flex: 1 0 auto;
-    }
+}
+```
+
+A fixed-height top bar and a dynamic-height content area.
 
 ### Table-like
 
+```css
+.container {
+  display: flex;
+}
+
+/* the 'px' values here are just suggested percentages */
+.container > .checkbox { flex: 1 0 20px; }
+.container > .subject  { flex: 1 0 400px; }
+.container > .date     { flex: 1 0 120px; }
+```
+
 This creates columns that have different widths, but size accordingly according
 to the circumstances.
 
-    .container {
-      display: flex;
-    }
-
-    /* the 'px' values here are just suggested percentages */
-    .container > .checkbox { flex: 1 0 20px; }
-    .container > .subject  { flex: 1 0 400px; }
-    .container > .date     { flex: 1 0 120px; }
-
 ### Vertical
 
+
+```css
+.container {
+  align-items: center;
+}
+```
+
 Vertically-center all items.
 
-    .container {
-      align-items: center;
-    }
-
 ### Left and right
 
-    .menu > .left  { align-self: flex-start; }
+```css
-    .menu > .right { align-self: flex-end; }
+.menu > .left  { align-self: flex-start; }
+.menu > .right { align-self: flex-end; }
+```
 
-### References
+## References
+{: .-one-column}
 
  * [MDN: Using CSS flexbox](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
  * [Ultimate flexbox cheatsheet](http://www.sketchingwithcss.com/samplechapter/cheatsheet.html)

css-system-font-stack.md

@@ -1,8 +1,11 @@
 ---
-title: "CSS: System font stack"
+title: "CSS system font stack"
 category: CSS
+layout: 2017/sheet
 ---
 
+### System fonts
+
 ```css
 font-family: -apple-system, BlinkMacSystemFont,
     "Segoe UI", "Roboto", "Oxygen",
@@ -10,6 +13,10 @@ font-family: -apple-system, BlinkMacSystemFont,
     "Droid Sans", "Helvetica Neue", sans-serif;
 ```
 
+This uses whatever system font is available. See: [System shock - Designing Medium](https://medium.design/system-shock-6b1dc6d6596f?gi=90078e194544) _(medium.com)_
+
+### Explanation
+
 | Font                 | OS                      |
 | ----                 | --                      |
 | `-apple-system`      | OS X (10.11+), iOS (9+) |
@@ -23,4 +30,7 @@ font-family: -apple-system, BlinkMacSystemFont,
 | `Droid Sans`         | Android (until 3.2)     |
 | `Helvetica Neue`     | OS X (10.9)             |
 
-Reference: <https://medium.com/design/system-shock-6b1dc6d6596f>
+## Reference
+{: .-one-column}
+
+- <https://medium.com/design/system-shock-6b1dc6d6596f>

flowtype.md

@@ -0,0 +1,4 @@
+---
+title: Flow
+redirect_to: /flow
+---

gh-pages.md

@@ -4,9 +4,9 @@ category: Jekyll
 layout: 2017/sheet
 ---
 
-## Setting up a domain
+## Custom domains
 
-### Update your repo
+### Custom domains
 
 ```sh
 $ echo "foobar.com" > CNAME
@@ -15,6 +15,8 @@ $ git commit && git push
 
 Create a `CNAME` file with your domain on it.
 
+See: [Setting up a custom domain](https://help.github.com/articles/quick-start-setting-up-a-custom-domain/) _(github.com)_
+
 ### Set up your domain
 
 Subdomain (like www):
@@ -30,7 +32,8 @@ Apex domains:
 Apex domains (alternative):
 {: .-setup}
 
-    A => 192.30.252.153, 192.30.252.154
+    A => 192.30.252.153
+    A => 192.30.252.154
 
 ## References
 {: .-one-column}

sh.md

@@ -0,0 +1,5 @@
+---
+title: Shell scripting
+category: CLI
+redirect_to: /bash
+---