Update

_layouts/2017/home.html

@@ -21,7 +21,9 @@ type: website
           {% if page.type == article %}
             <a class='article item' href="{{base}}{{ page.url | remove: '.html' }}">
               <code class='slug'>{{ page.url | remove: '.html' | remove: '/' }}</code>
+              {% if page.title | downcase != page.url | remove: '.html' | remove: '/' %}
                 <span class='title'>{{ page.title }}</span>
+              {% endif %}
             </a>
           {% endif %}
         {% endif %}

_sass/2017/components/body-area.scss

@@ -4,6 +4,6 @@
   @include gutter(padding);
 
   &.-slim {
-    max-width: 600px;
+    max-width: 740px;
   }
 }

_sass/2017/components/pages-list.scss

@@ -11,45 +11,67 @@
 }
 
 .pages-list {
-  > .item {
-    border-top: solid 1px $dark-line-color;
-    padding: 4px 0;
+  & {
+    display: flex;
+    flex-wrap: wrap;
   }
 
-  > .article {
+  > .item {
+    padding: 4px 0;
+    flex: 0 0 50%;
+  }
+}
+
+// Article
+.pages-list > .article {
   text-decoration: none;
   display: block;
   white-space: nowrap;
-    padding-left: 8px;
 
   &,
   &:visited {
-      color: $base-mute;
-    }
-
-    &:hover,
-    &:focus {
-      & > code {
-        color: $base-a;
-      }
+    color: $base-mute3;
   }
 
   & > code {
     color: $base-head;
   }
 
-    & > .title::before {
-      content: '/ ';
-      margin: 0 8px;
-      color: $base-mute;
-      opacity: 0.5;
-    }
+  &:visited > code {
+    color: $base-text;
   }
 
-  > .category {
-    @include font-size(1);
-    margin: 0;
-    font-weight: normal;
-    color: $base-b;
+  & > .title::before {
+    content: '';
+    margin: 0 4px;
+  }
+
+  & > .title {
+    opacity: 0;
+  }
+
+  &:hover,
+  &:focus {
+    & {
+      color: $base-mute;
+    }
+
+    & > code {
+      color: $base-a;
+    }
+
+    & > .title {
+      opacity: 1;
+    }
   }
 }
+
+.pages-list > .category {
+  @include font-size(1);
+  border-bottom: solid 1px $dark-line-color;
+  margin: 16px 0;
+  padding: 0 0 16px 0;
+  font-weight: normal;
+  color: $base-b;
+  flex: 0 0 100%;
+}

_sass/2017/variables.scss

@@ -33,10 +33,10 @@ $base-c: #17c694; // teal
 
 $base-b3: adjust-color($base-b, $lightness: 16%, $hue: -20deg);
 $base-b7: adjust-color($base-b, $lightness: -16%, $hue: 20deg);
-$base-mute3: adjust-color($base-mute, $lightness: -16%);
-$base-mute4: adjust-color($base-mute, $lightness: -8%);
-$base-mute6: adjust-color($base-mute, $lightness: 8%);
-$base-mute7: adjust-color($base-mute, $lightness: 16%);
+$base-mute7: adjust-color($base-mute, $lightness: -16%);
+$base-mute6: adjust-color($base-mute, $lightness: -8%);
+$base-mute4: adjust-color($base-mute, $lightness: 8%);
+$base-mute3: adjust-color($base-mute, $lightness: 16%);
 
 $body-bg: $base-body;
 $gray-bg: mix($base-body, $base-panel, 50%);