Update

_config.yml

@@ -52,6 +52,7 @@ category_names:
   - HTML
   - JavaScript
   - JavaScript libraries
+  - Jekyll
   - Ledger
   - Markup
   - Node.js

_includes/2017/pages-list-item.html

@@ -1,5 +1,10 @@
 <a class='article item' href="{{base}}{{ include.page.url | remove: '.html' }}">
   <code class='slug'>{{ include.page.url | remove: '.html' | remove: '/' }}</code>
+
+  {% if include.page.layout == '2017/sheet' %}
+  <abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
+  {% endif %}
+
   {% if include.page.title | downcase != include.page.url | remove: '.html' | remove: '/' %}
     <span class='title'>{{ include.page.title }}</span>
   {% endif %}

_includes/2017/top-nav.html

@@ -1,5 +1,9 @@
 <div class='top-nav'>
   <div class='container'>
+    <div class='left'>
+      <a class='home' href='{{base}}'></a>
+    </div>
+
     <a class='brand' href='{{base}}'>
       Rico's cheatsheets
     </a>

_sass/2017/components/attribute-peg.scss

@@ -0,0 +1,17 @@
+.attribute-peg {
+  & {
+    display: inline-block;
+    height: 12px;
+    width: 20px;
+    background: rgba(white, 0.1);
+    text-align: center;
+  }
+
+  & > span {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background: saturate(lighten(#5a8, 16%), 24%);
+    border-radius: 50%;
+  }
+}

_sass/2017/components/top-nav.scss

@@ -1,13 +1,29 @@
 .top-nav {
   & {
-    border-bottom: solid 1px $dark-line-color;
+    height: 64px;
-    height: 48px;
+    line-height: 64px;
-    line-height: 48px;
     text-align: center;
-    overflow: hidden;
+    position: relative;
   }
 
-  >.container {
+  // Horiz line
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 40%;
+    right: 40%;
+    bottom: 0;
+    height: 1px;
+    background: $dark-line-color;
+
+    @media (max-width: 480px) {
+      left: 0;
+      right: 0;
+    }
+  }
+
+  > .container {
     @include gutter(padding-left);
     @include gutter(padding-right);
     max-width: $area-width;
@@ -19,6 +35,12 @@
   & {
     display: flex;
     align-items: center;
+    position: relative;
+  }
+
+  & > .left {
+    flex: 0 0 auto;
+    line-height: 32px;
   }
 
   & > .brand {
@@ -48,8 +70,37 @@
     }
   }
 
-  & > .actions > .social {
+  @media (min-width: 481px) {
+    & > .actions {
+      position: absolute;
+      @include gutter(right);
+      top: (64px - 32px) / 2;
+    }
+
+    & > .left {
+      position: absolute;
+      @include gutter(left);
+      top: (64px - 32px) / 2;
+    }
+  }
+
+  // Home link
+  & > .left > .home {
+    text-decoration: none;
+
+    &,
+    &:visited {
+      color: $base-mute;
+    }
+
+    &:hover,
+    &:focus {
+      color: $base-a;
+    }
+  }
+
+  & > .left > .home::before {
+    @include ion-icon('md-arrow-back');
+    font-size: 16px;
   }
 }
-
-// page-actions.scss

_sass/2017/style.scss

@@ -21,3 +21,4 @@
 @import './components/page-actions';
 @import './components/pages-list';
 @import './components/top-nav';
+@import './components/attribute-peg';

_sass/2017/utils/heading-style.scss

@@ -4,7 +4,19 @@
   margin-bottom: 16px + 8px;
   padding-bottom: 16px + 8px;
   margin-top: 64px;
-  border-bottom: solid 1px $dark-line-color;
+  position: relative;
+
+  // Line
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(to right, $dark-line-color 50%, transparent);
+  }
 
   @media (max-width: 768px) {
     margin-bottom: 8px;

_sass/2017/variables.scss

@@ -43,7 +43,7 @@ $gray-bg: mix($base-body, $base-panel, 50%);
 $gray-text: $base-mute;
 
 $line-color: rgba($base-mute, 0.05);
-$dark-line-color: rgba($base-mute, 0.14);
+$dark-line-color: rgba($base-mute, 0.2);
 
 //
 // Shadows

elixir.md

@@ -1,6 +1,6 @@
 ---
 title: Elixir
-category: Development
+category: Elixir
 layout: 2017/sheet
 ---
 

gh-pages.md

@@ -1,6 +1,6 @@
 ---
 title: GitHub pages
-category: Git
+category: Jekyll
 ---
 
     $ echo "foobar.com" > CNAME

homebrew.md

@@ -1,6 +1,7 @@
 ---
 title: Homebrew
 layout: 2017/sheet
+tags: [Featured]
 ---
 
 ### Commands

html-meta.md

@@ -1,33 +1,48 @@
 ---
 title: Meta tags
 category: HTML
+layout: 2017/sheet
 ---
 
+### Meta tags
+
 ```html
 <meta charset='utf-8'>
+```
 
+```html
 <!-- title -->
 <title>...</title>
 <meta property='og:title'  content='...'>
 <meta name='twitter:title' content='...'>
+```
 
+```html
 <!-- url -->
 <meta property='og:url'  content='http://...'>
 <meta name='twitter:url' content='http://...'>
 <link rel='canonical'       href='http://...'>
+```
 
+```html
 <!-- desc -->
 <meta name='description'         content='...'>
 <meta property='og:description'  content='...'>
 <meta name='twitter:description' content='...'>
+```
 
+```html
 <!-- image -->
 <meta property="og:image"  content="http://...">
 <meta name="twitter:image" content="http://...">
+```
 
+```html
 <!-- ua -->
 <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
+```
 
+```html
 <!-- viewport -->
 <meta name='viewport' content='width=device-width'>
 <meta name='viewport' content='width=1024'>
@@ -38,24 +53,26 @@ category: HTML
 ```html
 <meta property="og:site_name" content="...">
 <meta property="og:type" content="website">
+```
 
+```html
 <meta property="fb:app_id" content="...">
 <meta property="fb:admins" content="UID1,UID2"> <!-- unless there's app_id -->
+```
 
+```html
 <meta property="og:audio" content="http://.../theme.mp3">
 <meta property="og:video" content="http://.../trailer.swf">
 ```
 
 ### Opengraph for articles
 
-```html
+- `article:published_time`
-article:published_time
+- `article:modified_time`
-article:modified_time
+- `article:expiration_time`
-article:expiration_time
+- `article:author`
-article:author
+- `article:section`
-article:section
+- `article:tag`
-article:tag
-```
 
 ### Apple-only
 
@@ -79,13 +96,15 @@ article:tag
 <meta name='theme-color' content='#ff00ff'>
 ```
 
-### [Manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/)
+### Manifest
 
 ```html
 <link rel='manifest' href='/manifest.json'>
 ```
 
-### [Icons](https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/)
+See: [Manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/)
+
+### Icons
 
 ```html
 <!-- Minimal -->
@@ -93,13 +112,17 @@ article:tag
 <link rel='icon' sizes='192x192' href='icon@192.png'>
 <link rel='apple-touch-icon' href='icon@152.png'>
 <meta name='msapplication-square310x310logo' content='icon@310.png'>
+```
 
+```html
 <!-- Apple -->
 <link rel='apple-touch-icon' href='touch-icon-iphone.png'>
 <link rel='apple-touch-icon' sizes='76x76' href='touch-icon-ipad.png'>
 <link rel='apple-touch-icon' sizes='120x120' href='touch-icon-iphone-retina.png'>
 <link rel='apple-touch-icon' sizes='152x152' href='touch-icon-ipad-retina.png'>
+```
 
+```html
 <!-- Microsoft -->
 <meta name='msapplication-square70x70logo' content='icon_smalltile.png'>
 <meta name='msapplication-square150x150logo' content='icon_mediumtile.png'>
@@ -107,8 +130,11 @@ article:tag
 ```
 
 Chrome on Android recommends [192x192](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android).
+See: [Icons](https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/)
 
-### Reference
+## Reference
+{: .-one-column}
 
  * <https://dev.twitter.com/docs/cards>
  * <https://developers.facebook.com/docs/opengraphprotocol/#types>
+{: .-also-see}

html.md

@@ -1,6 +1,7 @@
 ---
 title: HTML
 category: HTML
+layout: 2017/sheet
 ---
 
 ### Head stuff
@@ -61,8 +62,6 @@ category: HTML
 
 ### Icons
 
-Only do this if you're not placing the site in the root!
-
     <link rel="shortcut icon" type="image/png" href="favicon.png">
     <link href="apple-touch-icon-precomposed.png" rel="apple-touch-icon">
     <link href="apple-touch-icon-57x57-precomposed.png" size="57x57" rel="apple-touch-icon">
@@ -70,6 +69,8 @@ Only do this if you're not placing the site in the root!
     <link href="apple-touch-icon-114x114-precomposed.png" size="114x114" rel="apple-touch-icon">
     <link href="apple-touch-icon-144x144-precomposed.png" size="144x144" rel="apple-touch-icon">
 
+Only do this if you're not placing the site in the root!
+
 ### H5BP HTML tag
 
     <!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->

jekyll-github.md

@@ -1,7 +1,7 @@
 ---
 title: Jekyll for GitHub pages
-jekyll_escape: true
 layout: 2017/sheet
+category: Jekyll
 tags: [WIP]
 ---
 

jekyll.md

@@ -3,6 +3,7 @@ title: Jekyll
 jekyll_escape: true
 layout: 2017/sheet
 tags: [Featured]
+category: Jekyll
 ---
 
 {% raw %}

pass.md

@@ -1,7 +1,12 @@
 ---
 title: Pass
+layout: 2017/sheet
 ---
 
+Reference
+---------
+{: .-three-column}
+
 ### Store and retrieve
 
     $ pass insert twitter.com/rsc
@@ -19,6 +24,8 @@ title: Pass
 
     $ pass edit twitter.com/rsc
 
-### References
+## References
+{: .-one-column}
 
- * http://passwordstore.org
+* <http://passwordstore.org>
+{: .-also-see}