Featured

_includes/2017/pages-list-item.html

@@ -1,13 +1,15 @@
-<a class='article item'
+<a class='{{ include.class }} -item-{{ include.page.url | remove: '.html' | remove: '/' }}'
   href="{{base}}{{ include.page.url | remove: '.html' }}"
   data-js-searchable-item='{"slug":"{{ include.page.url | remove: '.html' | remove: '/' }}","category":"{{ include.page.category }}"}'>
-  <code class='slug'>{{ include.page.url | remove: '.html' | remove: '/' }}</code>
+  <span class='info'>
+    <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.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 %}
+    {% if include.page.title | downcase != include.page.url | remove: '.html' | remove: '/' %}
+      <span class='title'>{{ include.page.title }}</span>
+    {% endif %}
+  </span>
 </a>

_layouts/2017/home.html

@@ -24,13 +24,9 @@ type: website
   </div>
 
   <div class='pages-list'>
-    <h2 class='category item' id='{{ category | downcase | replace: " ", "-" }}' data-js-searchable-header>
-      <span>Top cheatsheets</span>
-    </h2>
-
     {% for page in site.pages %}
       {% if page.tags contains 'Featured' %}
-        {% include 2017/pages-list-item.html page=page %}
+        {% include 2017/pages-list-item.html page=page class='item top-sheet' %}
       {% endif %}
     {% endfor %}
 
@@ -41,7 +37,7 @@ type: website
 
       {% for page in site.pages %}
         {% if page.category == category %}
-          {% include 2017/pages-list-item.html page=page %}
+          {% include 2017/pages-list-item.html page=page class='article item' %}
         {% endif %}
       {% endfor %}
     {% endfor %}

_sass/2017/components/attribute-peg.scss

@@ -3,7 +3,6 @@
     display: inline-block;
     height: 12px;
     width: 20px;
-    background: rgba(white, 0.1);
     text-align: center;
   }
 

_sass/2017/components/pages-list.scss

@@ -1,14 +1,4 @@
-.search-box {
-  background: $base-panel;
-  box-shadow: $shadow3;
-
-  & > input {
-    padding: 16px;
-    background: transparent;
-    border: 0;
-    width: 100%;
-  }
-}
+// search-box.scss
 
 .pages-list {
   & {
@@ -20,6 +10,10 @@
     padding: 4px 0;
     flex: 0 0 50%;
   }
+
+  > .item.top-sheet {
+    flex: 0 0 25%;
+  }
 }
 
 // Article
@@ -33,20 +27,20 @@
     color: $base-mute3;
   }
 
-  & > code {
+  & > .info > .slug {
     color: $base-head;
   }
 
-  &:visited > code {
+  &:visited > .info > .slug {
     color: $base-text;
   }
 
-  & > .title::before {
+  & > .info > .title::before {
     content: '';
     margin: 0 4px;
   }
 
-  & > .title {
+  & > .info > .title {
     opacity: 0;
   }
 
@@ -56,12 +50,9 @@
       color: $base-mute;
     }
 
-    & > code {
-      color: $base-a;
-    }
-
-    & > .title {
+    & > .info > .title {
       opacity: 1;
+      color: $base-a;
     }
   }
 }
@@ -75,3 +66,56 @@
   color: $base-b;
   flex: 0 0 100%;
 }
+
+.top-sheet.top-sheet {
+  padding: 4px;
+  text-decoration: none;
+
+  & > .info {
+    display: block;
+    background: darken($base-a, 8%);
+    color: white;
+    text-align: left;
+    padding: 16px;
+    width: auto;
+    border-radius: 3px;
+    box-shadow: $shadow2;
+  }
+
+  &:nth-of-type(3n + 1) {
+    & > .info {
+      background: darken($base-a, 8%);
+    }
+
+    &:hover > .info,
+    &:focus > .info {
+      background: darken($base-a, 16%);
+    }
+  }
+
+  &:nth-of-type(3n + 2) {
+    & > .info {
+      background: darken($base-b, 8%);
+    }
+
+    &:hover > .info,
+    &:focus > .info {
+      background: darken($base-b, 16%);
+    }
+  }
+
+  &:nth-of-type(3n + 3) {
+    & > .info {
+      background: darken($base-c, 8%);
+    }
+
+    &:hover > .info,
+    &:focus > .info {
+      background: darken($base-c, 16%);
+    }
+  }
+
+  & > .info > .title {
+    display: none;
+  }
+}

bash.md

@@ -0,0 +1,5 @@
+---
+title: Bash scripting
+category: CLI
+redirect_to: /sh
+---

cron.md

@@ -2,7 +2,6 @@
 title: Cron
 category: CLI
 layout: 2017/sheet
-tags: [Featured]
 ---
 
 ## Format

react-router.md

@@ -2,6 +2,7 @@
 title: React-router
 category: React
 layout: default-ad
+tags: [Featured]
 ---
 
 {% raw %}

sh.md

@@ -2,7 +2,7 @@
 title: Bash scripting
 category: CLI
 layout: 2017/sheet
-ads: true
+tags: [Featured]
 ---
 
 Getting started