From 621262911e23ddbd10af85f65cef1f15c8cf89f8 Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Sat, 6 Dec 2014 02:59:54 +0100
Subject: [PATCH] Use CSS instead of an image to draw the menu icon in the
 mobile doc

[stubailo: make the target much bigger than the icon, make icon smaller]
---
 docs/client/docs.less   |  43 +++++++++++++++++++++++++++++++---------
 docs/client/layout.html |   4 +++-
 docs/public/menu.png    | Bin 3458 -> 0 bytes
 3 files changed, 37 insertions(+), 10 deletions(-)
 delete mode 100644 docs/public/menu.png

diff --git a/docs/client/docs.less b/docs/client/docs.less
index e8885eafe3e..285b70f0c5d 100644
--- a/docs/client/docs.less
+++ b/docs/client/docs.less
@@ -481,13 +481,6 @@ pre {
             margin-right: 3px;
         }
     }
-
-    .open-sidebar {
-        position: absolute;
-        left: 10px;
-        top: 10px;
-        font-size: 30px;
-    }
 }
 
 .sidebar-open {
@@ -693,6 +686,38 @@ pre {
     }
 }
 
-.menu-icon {
-    height: 0.6em;
+// This menu icon is inspired by
+// http://www.codesynthesis.co.uk/code-snippets/create-a-hamburger-icon-with-css
+@hamburger-icon-size: 18px;
+
+// Make the target larger than the icon
+.hamburger-menu-target {
+    height: @hamburger-icon-size;
+    width: @hamburger-icon-size;
+    padding: 19px 10px;
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.hamburger-menu, .hamburger-menu:after, .hamburger-menu:before {
+    height: @hamburger-icon-size / 6;
+    width: @hamburger-icon-size;
+    background-color: #111;
+    border-radius: 10px;
+    position: relative;
+}
+
+.hamburger-menu:after, .hamburger-menu:before {
+    content: '';
+    position: absolute;
+}
+
+.hamburger-menu:after {
+    top: @hamburger-icon-size / 3;
+}
+
+.hamburger-menu:before {
+    top: @hamburger-icon-size / 1.5;
 }
diff --git a/docs/client/layout.html b/docs/client/layout.html
index d8d1da4659a..577e4fc18dc 100644
--- a/docs/client/layout.html
+++ b/docs/client/layout.html
@@ -46,7 +46,9 @@ <h1>
 
 <template name="topBar">
   <div class="top-bar">
-    <div class="open-sidebar"><img src="menu.png" class="menu-icon" /></div>
+    <div class="hamburger-menu-target open-sidebar">
+      <div class="hamburger-menu"></div>
+    </div>
     <h1>
       <img src="/logo.png" class="logo" alt="Meteor" /> 1.0 Docs
     </h1>
diff --git a/docs/public/menu.png b/docs/public/menu.png
deleted file mode 100644
index de607fcb2213e10866c4f523fc5bba8ea5964868..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3458
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
GPX8N6<GRlP