Fixes #82

assets/js/src/cover.coffee

@@ -11,10 +11,10 @@ $ ->
     , 1000)
 
   _expand = (options)->
-    $('main, .cover, .link-item').toggleClass 'expanded'
+    $('main, .cover, .links > li').toggleClass 'expanded'
     Uno.search.form options.form
 
-  $('#blog-button, #avatar-link').click ->
+  $('.nav-blog > a, #avatar-link').click ->
     return $('#menu-button').trigger 'click' unless Uno.is 'device', 'desktop'
     _expand form: 'toggle'
 

assets/scss/components/_aside.scss

@@ -67,11 +67,36 @@
     margin-bottom: 1rem;
     .links {
       margin: 0;
-      &.item {
-        display: inline-block;
-        margin: 0 1px 0 0;
+      list-style: none;
 
+      > li {
+        display: block;
+        margin: 0 1px 0 0;
         line-height: 1em;
+
+        &.expanded {
+          margin: 0 5px;
+          display: inline-block;
+          @include btn-cover-with-border;
+          border-radius: 20px;
+
+          > a {
+            padding: .625rem 1.25rem;
+          }
+        }
+
+        > a {
+          @include btn-cover;
+          float: none;
+          padding: .5rem 1.25rem;
+          display: block;
+          opacity: .8;
+          color: $gray-lightest;
+
+          &:hover {
+            color: $hover-color;
+          }
+        }
       }
     }
   }
@@ -105,16 +130,3 @@
     }
   }
 }
-.link-item {
-  float: none;
-  padding: .5rem 1.25rem;
-
-  @include btn-cover;
-  &.expanded {
-    float: left;
-    padding: .625rem 1.25rem;
-    margin: 0 5px;
-
-    @include btn-cover-with-border;
-  }
-}

assets/scss/components/_media-queries.scss

@@ -86,15 +86,15 @@
       display: none;
     }
   }
-  .link-item {
-    padding: .85rem 1.25rem;
-    margin: 0;
 
-    font-size: 1rem;
+  .navigation.left .links {
+    > li {
+      margin: 0;
 
-    border-radius: 0;
-    &:hover {
-      background-color: rgba($black, .1);
+      > a {
+        padding: .85rem 1.25rem;
+        font-size: 1rem;
+      }
     }
   }
   #avatar-link {

partials/aside.hbs

@@ -14,7 +14,7 @@
       <hr class="divider short" />
       <div class="navigation">
         <div class="profile contact">
-          {{> navigation}}
+          {{navigation}}
           {{> social}}
           {{> search }}
         </div>

partials/navigation.hbs

@@ -1,10 +1,15 @@
 <nav class="navigation left">
   <ul class="links">
-    <li class="links item">
-      <a href="{{@blog.url}}/#open" class="link-item" title="{{@blog.title}} blog" id="blog-button">Blog</a>
-      {{#foreach @blog.navigation}}
-        <a href="{{this.url}}" class="link-item" id="{{slug}}-button">{{label}}</a>
-      {{/foreach}}
+
+    <li class="nav-blog {{#if current}} nav-current{{/if}}">
+      <a href="{{@blog.url}}/#open" title="{{@blog.title}} blog">Blog</a>
     </li>
+
+    {{#foreach navigation}}
+      <li class="nav-{{slug}} {{#if current}} nav-current{{/if}}">
+        <a href="{{this.url}}">{{label}}</a>
+      </li>
+    {{/foreach}}
+
   </ul>
 </nav>