From 0abecdd77751baf860a7c5dd1916711c687238c9 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sun, 2 Jul 2017 23:39:08 +0100
Subject: [PATCH] Fix hover/active states on desktop

---
 docs/_includes/blog-hero.html |  2 +-
 docs/blog.html                |  4 ++--
 docs/css/bulma-docs.css       | 22 ++++++++++++++--------
 sass/components/navbar.sass   | 29 +++++++++++++++++++----------
 4 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/docs/_includes/blog-hero.html b/docs/_includes/blog-hero.html
index 8022ac82..d611cc65 100644
--- a/docs/_includes/blog-hero.html
+++ b/docs/_includes/blog-hero.html
@@ -21,7 +21,7 @@
           </a>
         </div>
         <div class="column is-narrow">
-          <!-- {% include carbon.html %} -->
+          {% include carbon.html %}
         </div>
       </div>
     </div>
diff --git a/docs/blog.html b/docs/blog.html
index af64c356..0227c8f4 100644
--- a/docs/blog.html
+++ b/docs/blog.html
@@ -20,8 +20,8 @@ route: blog
           </h2>
         </div>
         <div class="column is-8">
-          <div class="content is-medium">
-            {{ post.introduction }}
+          <div class="content">
+            {{ post.content }}
           </div>
         </div>
       </div>
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index c6aeec64..7cd42f1f 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -4390,10 +4390,9 @@ a.nav-item.is-tab.is-active {
   position: relative;
 }
 
-a.navbar-item:hover,
-a.navbar-item.is-active,
-.navbar-item.has-dropdown:hover .navbar-link,
-.navbar-item.has-dropdown.is-active .navbar-link {
+a.navbar-item:hover, a.navbar-item.is-active,
+.navbar-link:hover,
+.navbar-link.is-active {
   background-color: whitesmoke;
   color: #0a0a0a;
 }
@@ -4499,10 +4498,6 @@ a.navbar-item.is-active,
     pointer-events: auto;
     transform: translateY(0);
   }
-  a.navbar-item.is-active {
-    background-color: transparent;
-    color: #0a0a0a;
-  }
   .navbar-link::after {
     border: 1px solid #00d1b2;
     border-right: 0;
@@ -4578,6 +4573,17 @@ a.navbar-item.is-active,
     margin-left: -1rem;
     margin-right: -1rem;
   }
+  a.navbar-item.is-active,
+  .navbar-link.is-active {
+    color: #ff3860;
+  }
+  a.navbar-item.is-active:not(:hover),
+  .navbar-link.is-active:not(:hover) {
+    background-color: transparent;
+  }
+  .navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link {
+    background-color: whitesmoke;
+  }
 }
 
 .pagination {
diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index 356ff09f..3c146cde 100644
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -4,7 +4,7 @@ $navbar-height: 3.25rem !default
 $navbar-item: $grey-dark !default
 $navbar-item-hover: $black !default
 $navbar-item-hover-background: $background !default
-$navbar-item-active: $black !default
+$navbar-item-active: $red !default
 $navbar-item-active-background: transparent !default
 
 $navbar-dropdown-background: $white !default
@@ -46,12 +46,12 @@ $navbar-divider-background: $border !default
   padding: 0.5rem 1rem
   position: relative
 
-a.navbar-item:hover,
-a.navbar-item.is-active,
-.navbar-item.has-dropdown:hover .navbar-link,
-.navbar-item.has-dropdown.is-active .navbar-link
-  background-color: $navbar-item-hover-background
-  color: $navbar-item-hover
+a.navbar-item,
+.navbar-link
+  &:hover,
+  &.is-active
+    background-color: $navbar-item-hover-background
+    color: $navbar-item-hover
 
 .navbar-item
   flex-grow: 0
@@ -139,9 +139,6 @@ a.navbar-item.is-active,
           opacity: 1
           pointer-events: auto
           transform: translateY(0)
-  a.navbar-item.is-active
-    background-color: $navbar-item-active-background
-    color: $navbar-item-active
   .navbar-link
     &::after
       +arrow($navbar-dropdown-arrow)
@@ -197,3 +194,15 @@ a.navbar-item.is-active,
   .container > .navbar
     margin-left: -1rem
     margin-right: -1rem
+  // Hover/Active states
+  a.navbar-item,
+  .navbar-link
+    &.is-active
+      color: $navbar-item-active
+    &.is-active:not(:hover)
+      background-color: $navbar-item-active-background
+  .navbar-item.has-dropdown
+    &:hover,
+    &.is-active
+      .navbar-link
+        background-color: $navbar-item-hover-background