Merge pull request TryGhost#188 from PaulAdamDavis/menu-icon

Add menu icon to icon font
HiveHQ · Mar 23, 2015 · e587980 · e587980
2 parents acc6896 + b071548
commit e587980
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 9 deletions.
diff --git a/assets/css/screen.css b/assets/css/screen.css
@@ -160,6 +160,9 @@ table { border-collapse: collapse; border-spacing: 0; }
 .icon-link:before {
     content: "\f608";
 }
+.icon-menu:before {
+    content: "\f609";
+}
 
 
 /* ==========================================================================
@@ -792,12 +795,17 @@ body.nav-opened .nav {
     background: rgba(0,0,0,0.1);
     transition: all 0.5s ease;
 }
-.menu-button:focus {
-    outline: 0;
-}
-.menu-button .burger {
+.menu-button:before {
     font-size: 12px;
+    font-weight: bold;
     margin-right: 6px;
+    color: #fff !important;
+    position: relative;
+    top: 1px;
+    transition: all 0.5s ease;
+}
+.menu-button:focus {
+    outline: 0;
 }
 
 body.nav-opened .menu-button {
@@ -843,6 +851,9 @@ body.nav-opened .menu-button .word {
     border-color: #fff;
     background: #fff;
 }
+.main-nav.overlay a:hover:before {
+    color: #222;
+}
 
 /* Add a border to the buttons on hover */
 .menu-button:hover {

diff --git a/assets/fonts/casper-icons.eot b/assets/fonts/casper-icons.eot
diff --git a/assets/fonts/casper-icons.svg b/assets/fonts/casper-icons.svg
diff --git a/assets/fonts/casper-icons.ttf b/assets/fonts/casper-icons.ttf
diff --git a/assets/fonts/casper-icons.woff b/assets/fonts/casper-icons.woff
diff --git a/author.hbs b/author.hbs
@@ -9,7 +9,7 @@
         <nav class="main-nav overlay clearfix">
             {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
             {{#if @blog.navigation}}
-                <a class="menu-button" href="#"><span class="burger">&#9776;</span><span class="word">Menu</span></a>
+                <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
             {{/if}}
         </nav>
     </header>

diff --git a/index.hbs b/index.hbs
@@ -6,7 +6,7 @@
     <nav class="main-nav overlay clearfix">
         {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
         {{#if @blog.navigation}}
-            <a class="menu-button" href="#"><span class="burger">&#9776;</span><span class="word">Menu</span></a>
+            <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
         {{/if}}
     </nav>
     <div class="vertical">

diff --git a/page.hbs b/page.hbs
@@ -10,7 +10,7 @@
     <nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
         {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
         {{#if @blog.navigation}}
-            <a class="menu-button" href="#"><span class="burger">&#9776;</span><span class="word">Menu</span></a>
+            <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
         {{/if}}
     </nav>
 </header>

diff --git a/post.hbs b/post.hbs
@@ -10,7 +10,7 @@
     <nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
         {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
         {{#if @blog.navigation}}
-            <a class="menu-button" href="#"><span class="burger">&#9776;</span><span class="word">Menu</span></a>
+            <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
         {{/if}}
     </nav>
 </header>

diff --git a/tag.hbs b/tag.hbs
@@ -6,7 +6,7 @@
     <nav class="main-nav overlay clearfix">
         {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
         {{#if @blog.navigation}}
-            <a class="menu-button" href="#"><span class="burger">&#9776;</span><span class="word">Menu</span></a>
+            <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
         {{/if}}
     </nav>
     <div class="vertical">