Add link to home

_includes/2017/related-posts.html

@@ -11,26 +11,52 @@
   | where_exp: "page", "page.deprecated != true"
   | sort: "weight", "last"
 %}
-<div class='related-posts'>
+<div class='related-posts' id='related'>
   <div class='container'>
-    {% if include.page.category == 'Others' %}
+    <div class='related-posts-section'>
-      <h3>Other cheatsheets</h3>
+      <div class='callout'>
-    {% else %}
+        <a class='related-posts-callout' href='{{ base }}'>
-      <h3>Other {{ include.page.category }} cheatsheets</h3>
+          <div class='text'>
-    {% endif %}
+            <i class='icon'></i>
 
-    <ul class='related-post-list'>
+            <span class='description'>
-      {% for page in category_pages limit: 6 %}
+              Over {{ site.pages | size }} curated cheatsheets, by developers for developers.
-        {% include 2017/related-posts-item.html page=page class='item related-post-item' %}
+            </span>
-      {% endfor %}
-    </ul>
 
-    <h3>Top cheatsheets</h3>
+            <span class='push-button -dark'>
+              Cheatsheets home
+            </span>
+          </div>
+        </a>
+      </div>
 
-    <ul class='related-post-list'>
+      <div class='group'>
-      {% for page in top_pages limit: 6 %}
+        <div class='related-posts-group'>
-        {% include 2017/related-posts-item.html page=page class='item related-post-item' %}
+          {% if include.page.category == 'Others' %}
-      {% endfor %}
+            <h3>Other cheatsheets</h3>
-    </ul>
+          {% else %}
+            <h3>Other {{ include.page.category }} cheatsheets</h3>
+          {% endif %}
+
+          <ul class='related-post-list'>
+            {% for page in category_pages limit: 6 %}
+              {% include 2017/related-posts-item.html page=page class='item related-post-item' %}
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+
+      <div class='group'>
+        <div class='related-posts-group'>
+          <h3>Top cheatsheets</h3>
+
+          <ul class='related-post-list'>
+            {% for page in top_pages limit: 6 %}
+              {% include 2017/related-posts-item.html page=page class='item related-post-item' %}
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+    </div>
   </div>
 </div>

_sass/2017/components/push-button.scss

@@ -7,10 +7,7 @@
   &,
   &:visited {
     background-color: $base-a;
-    background: linear-gradient(
+    background: $base-a-gradient;
-      to right,
-      $base-a,
-      adjust-color($base-a, $lightness: 2%, $hue: 16deg));
     color: white;
   }
 
@@ -21,3 +18,17 @@
     color: white;
   }
 }
+
+.push-button.-dark {
+  &,
+  &:visited {
+    background: darken($base-a, 16%);
+    color: white;
+  }
+
+  &:hover,
+  &:focus {
+    background: darken($base-a, 24%);
+    color: white;
+  }
+}

_sass/2017/components/related-post-item.scss

@@ -0,0 +1,80 @@
+.related-post-item {
+  & {
+    display: flex;
+    text-align: left;
+    line-height: 1.4;
+  }
+
+  // Layout
+  & > a {
+    flex: 1 1 100%;
+    display: block;
+    border-radius: 2px;
+    box-shadow: $shadow2;
+    padding: 16px;
+    text-decoration: none;
+  }
+
+  // Color
+  & > a,
+  & > a:visited {
+    background: white;
+    color: $base-mute;
+
+    & > strong {
+      color: $base-a;
+    }
+
+    &:hover,
+    &:focus {
+      color: $base-a;
+    }
+
+    &:hover > strong,
+    &:focus > strong {
+      color: darken($base-a, 16%);
+    }
+  }
+
+  &:first-of-type > a,
+  &:first-of-type > a:visited {
+    background: $base-a;
+    color: rgba(white, 0.5);
+
+    & > strong {
+      color: white;
+    }
+
+    &:hover,
+    &:focus {
+      color: white;
+    }
+
+    &:hover > strong,
+    &:focus > strong {
+      color: white;
+    }
+
+    &:hover,
+    &:focus {
+      background: darken($base-a, 8%);
+    }
+  }
+
+  // Two lines when bigger
+  @media (min-width: 481px) {
+    & > a > strong,
+    & > a > span {
+      display: block;
+    }
+  }
+
+  & > a > strong {
+    @include font-size(1);
+    font-weight: normal;
+  }
+
+  & > a > span {
+    @include font-size(-1);
+  }
+}

_sass/2017/components/related-posts-callout.scss

@@ -0,0 +1,60 @@
+/*
+ * Callout
+ */
+
+.related-posts-callout {
+  & {
+    display: flex;
+    text-decoration: none;
+    background: $base-a-gradient;
+    padding: 32px;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    border-radius: 2px;
+    box-shadow: $shadow2;
+    text-shadow: 0 1px 1px rgba(black, 0.2);
+  }
+
+  &,
+  &:visited {
+    color: white;
+  }
+
+  &:hover,
+  &:focus {
+    background: darken($base-a, 8%);
+  }
+
+  & > .text {
+    margin: auto;
+    text-align: center;
+  }
+
+  & > .text > .icon {
+    margin-bottom: 16px;
+    display: block;
+    color: adjust-color($base-a, $lightness: 16%, $hue: 20deg);
+  }
+
+  & > .text > .icon::before {
+    @include ion-icon('ios-arrow-back');
+    font-size: 48px;
+    height: 64px;
+    width: 64px;
+    line-height: 64px - 4px;
+    text-align: center;
+    border: solid 2px adjust-color($base-a, $lightness: 16%, $hue: 20deg);
+    border-radius: 50%;
+    text-indent: -2px;
+    text-shadow: none;
+  }
+
+  & > .text > .description {
+    @include font-size(1);
+    line-height: 1.4;
+    font-weight: 300;
+    display: block;
+    margin-bottom: 16px;
+  }
+}

_sass/2017/components/related-posts-group.scss

@@ -0,0 +1,17 @@
+/*
+ * Group
+ */
+
+.related-posts-group {
+  & > h3 {
+    @include font-size(1);
+    color: $base-a;
+    margin: 0;
+    padding: 0;
+    margin-bottom: 16px;
+    padding-bottom: 16px;
+    border-bottom: solid 1px $dark-line-color;
+    line-height: 1.2;
+    font-weight: 400;
+  }
+}

_sass/2017/components/related-posts-section.scss

@@ -0,0 +1,67 @@
+/*
+ * Section
+ * has callout and group
+ */
+
+.related-posts-section {
+  & {
+    display: flex;
+    margin-left: -16px;
+    margin-right: -16px;
+  }
+
+  & > .callout,
+  & > .group {
+    margin: 0 16px;
+  }
+
+  & > .callout {
+    flex: 1 1 33%;
+  }
+
+  & > .group {
+    flex: 1 1 50%;
+  }
+
+  & > .callout {
+    display: flex;
+
+    & > * {
+      flex: 1 0 100%;
+    }
+  }
+
+  // Mobile
+  @media (max-width: 480px) {
+    & {
+      flex-wrap: wrap;
+    }
+
+    & > .callout,
+    & > .group {
+      margin-top: 16px;
+      margin-bottom: 16px;
+      flex: 1 1 100%;
+    }
+  }
+
+  // Tablet
+  @media (min-width: 481px) {
+    @media (max-width: 768px) {
+      & {
+        flex-wrap: wrap;
+      }
+
+      & > .callout,
+      & > .group {
+        margin-top: 16px;
+        margin-bottom: 16px;
+        flex: 1 1 100%;
+      }
+
+      & > .group {
+        flex: 1 1 40%;
+      }
+    }
+  }
+}

_sass/2017/components/related-posts.scss

@@ -1,33 +1,22 @@
 .related-posts {
   & {
-    @include gutter(padding-top, $multiplier: 4);
-    @include gutter(padding-bottom, $multiplier: 4);
     @include gutter(margin-top, $multiplier: 4);
+    padding-top: 16px;
+    padding-bottom: 16px;
     background: $gray-bg;
   }
 
+  @media (min-width: 481px) {
+    padding-top: 64px;
+    padding-bottom: 64px;
+  }
+
   & > .container {
     @include gutter(padding-left);
     @include gutter(padding-right);
     max-width: $area-width;
     margin: 0 auto;
   }
-
-  & > .container > h3 {
-    @include font-size(1);
-    font-weight: normal;
-    color: $base-head;
-    margin: 16px 0;
-    padding: 0;
-  }
-
-  & > .container > :first-child {
-    margin-top: 0;
-  }
-
-  & > .container > :last-child {
-    margin-bottom: 0;
-  }
 }
 
 .related-post-list {
@@ -41,6 +30,7 @@
   & {
     display: flex;
     margin: -4px;
+    flex-wrap: wrap;
   }
 
   @media (max-width: 768px) {
@@ -48,96 +38,12 @@
   }
 
   & > .item {
-    flex: 1 1 (100% / 2);
+    flex: 1 1 auto;
     margin: 4px;
 
     @media (min-width: 481px) {
-      flex: 1 1 (100% / 4);
+      flex: 1 1 40%;
-    }
-
-    @media (min-width: 769px) {
-      flex: 1 1 (100% / 8);
     }
   }
 
 }
-
-.related-post-item.related-post-item {
-  & {
-    display: flex;
-    text-align: left;
-    line-height: 1.4;
-  }
-
-  // Layout
-  & > a {
-    flex: 1 1 100%;
-    display: block;
-    border-radius: 2px;
-    box-shadow: $shadow2;
-    padding: 16px;
-    text-decoration: none;
-  }
-
-  // Color
-  & > a,
-  & > a:visited {
-    background: white;
-    color: $base-mute;
-
-    & > strong {
-      color: $base-a;
-    }
-
-    &:hover,
-    &:focus {
-      color: $base-a;
-    }
-
-    &:hover > strong,
-    &:focus > strong {
-      color: darken($base-a, 16%);
-    }
-  }
-
-  &:first-of-type > a,
-  &:first-of-type > a:visited {
-    background: $base-a;
-    color: rgba(white, 0.5);
-
-    & > strong {
-      color: white;
-    }
-
-    &:hover,
-    &:focus {
-      color: white;
-    }
-
-    &:hover > strong,
-    &:focus > strong {
-      color: white;
-    }
-
-    &:hover,
-    &:focus {
-      background: darken($base-a, 8%);
-    }
-  }
-
-  @media (min-width: 481px) {
-    & > a > strong,
-    & > a > span {
-      display: block;
-    }
-  }
-
-  & > a > strong {
-    @include font-size(1);
-    font-weight: normal;
-  }
-
-  & > a > span {
-    @include font-size(-1);
-  }
-}

_sass/2017/style.scss

@@ -25,6 +25,10 @@
 @import './components/pages-list';
 @import './components/push-button';
 @import './components/related-posts';
+@import './components/related-posts-callout';
+@import './components/related-posts-group';
+@import './components/related-posts-section';
+@import './components/related-post-item';
 @import './components/search-box';
 @import './components/side-ad';
 @import './components/site-header';

_sass/2017/variables.scss

@@ -45,6 +45,15 @@ $gray-text: $base-mute;
 $line-color: rgba($base-mute, 0.05);
 $dark-line-color: rgba($base-mute, 0.2);
 
+//
+// Variants
+//
+
+$base-a-gradient: linear-gradient(
+  5deg,
+  $base-a,
+  adjust-color($base-a, $lightness: 2%, $hue: 16deg));
+
 //
 // Shadows
 //

assets/2017/script.js

@@ -82,7 +82,11 @@ $(function () {
  */
 
 function splitwords (str) {
-  return str.toLowerCase().split(/[ \/\-_]/)
+  const words = str.toLowerCase()
+    .split(/[ \/\-_]/)
+    .filter(k => k && k.length !== 0)
+
+  return words
 }
 
 /*
@@ -96,6 +100,9 @@ const Search = {
 
   show (val) {
     const keywords = splitwords(val)
+
+    if (!keywords.length) return Search.showAll()
+
     const selectors = keywords
       .map(k => `[data-search-index~=${JSON.stringify(k)}]`)
       .join('')
@@ -123,9 +130,11 @@ function permutate (data) {
 function permutateString (str) {
   let words = []
   let inputs = splitwords(str)
+
   inputs.forEach(word => {
     words = words.concat(permutateWord(word))
   })
+
   return words
 }
 

jekyll.md

@@ -37,8 +37,10 @@ gem install bundler
 
 ```bash
 # Build the Gemfile
-echo "source 'https://rubygems.org'" > Gemfile
+cat > Gemfile <<-END
-echo "gem 'github-pages', group: :jekyll_plugins" >> Gemfile
+  source 'https://rubygems.org'
+  gem 'github-pages', group: :jekyll_plugins
+END
 ```
 
 ```bash

lol

@@ -0,0 +1,2 @@
+lol
+-EOF