From 4beffada1bd08b897e78ccb321bb7cbf83e3053c Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Mon, 21 Sep 2015 09:03:24 +0200
Subject: [PATCH] Fixes #82

---
 assets/js/src/cover.coffee                 |  4 +-
 assets/scss/components/_aside.scss         | 44 ++++++++++++++--------
 assets/scss/components/_media-queries.scss | 14 +++----
 partials/aside.hbs                         |  2 +-
 partials/navigation.hbs                    | 15 +++++---
 5 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/assets/js/src/cover.coffee b/assets/js/src/cover.coffee
index 3de74683..dd1cf32b 100755
--- a/assets/js/src/cover.coffee
+++ b/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'
 
diff --git a/assets/scss/components/_aside.scss b/assets/scss/components/_aside.scss
index 04cf6226..0ddc6d2b 100755
--- a/assets/scss/components/_aside.scss
+++ b/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;
-  }
-}
diff --git a/assets/scss/components/_media-queries.scss b/assets/scss/components/_media-queries.scss
index 834a3d05..aac0f14b 100755
--- a/assets/scss/components/_media-queries.scss
+++ b/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 {
diff --git a/partials/aside.hbs b/partials/aside.hbs
index 5867abcc..6f9a0626 100755
--- a/partials/aside.hbs
+++ b/partials/aside.hbs
@@ -14,7 +14,7 @@
       <hr class="divider short" />
       <div class="navigation">
         <div class="profile contact">
-          {{> navigation}}
+          {{navigation}}
           {{> social}}
           {{> search }}
         </div>
diff --git a/partials/navigation.hbs b/partials/navigation.hbs
index 476603d6..05801645 100755
--- a/partials/navigation.hbs
+++ b/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>