From 095ea6896428683df1f4c35b843fca5bdb58944e Mon Sep 17 00:00:00 2001
From: hhandoko <herdy.handoko@gmail.com>
Date: Sun, 5 Mar 2017 17:51:53 +0800
Subject: [PATCH 01/12] Added CSS media queries to support off-canvas sidebar

---
 doc-tool/resources/_layouts/main.html |  1 +
 doc-tool/resources/css/dottydoc.css   | 49 +++++++++++++++++++++++----
 2 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/doc-tool/resources/_layouts/main.html b/doc-tool/resources/_layouts/main.html
index 7c63ec610ded..eb0dd51fd2f6 100644
--- a/doc-tool/resources/_layouts/main.html
+++ b/doc-tool/resources/_layouts/main.html
@@ -13,6 +13,7 @@
             integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"
             crossorigin="anonymous"
         >
+
         <link
             rel="stylesheet"
             href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
diff --git a/doc-tool/resources/css/dottydoc.css b/doc-tool/resources/css/dottydoc.css
index 0b833830ce48..41e940a6d8fa 100644
--- a/doc-tool/resources/css/dottydoc.css
+++ b/doc-tool/resources/css/dottydoc.css
@@ -1,31 +1,66 @@
+html, body {
+    overflow-x: hidden;
+}
+
 html {
     height: 100%;
 }
+
 body {
     min-height: 100%;
 }
 
 div#content-wrapper {
     min-height: 100vh;
-    padding-left: 250px;
-    transition: all 0.5s ease;
+    padding-left: 300px;
+    -webkit-transition: all .25s ease-out;
+         -o-transition: all .25s ease-out;
+            transition: all .25s ease-out;
 }
 
-div#content-wrapper.toggled {
-    padding-left: 0;
-}
+div#content-wrapper.toggled { }
 
 div.index-wrapper {
     background-color: #fafafa;
-    width: 250px;
     position: fixed;
     top: 0;
     left: 0;
+    width: 300px;
     height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
 }
 
+@media screen and (max-width: 767px) {
+
+    div#content-wrapper {
+        padding-left: 0;
+    }
+
+    div#content-body {
+        position: relative;
+        left: 0;
+        -webkit-transition: all .25s ease-out;
+             -o-transition: all .25s ease-out;
+                transition: all .25s ease-out;
+    }
+
+    div.index-wrapper {
+        position: absolute;
+        top: 0;
+        width: 50%; /** 6 column width */
+    }
+
+    div#content-wrapper.toggled div#content-body {
+        left: 50%; /** 6 columns width offset */
+    }
+
+    div#content-wrapper.toggled div.index-wrapper {
+        left: 0;
+    }
+
+}
+
 div#doc-page-container > h1 {
     border-bottom: 1px solid #eee;
     padding-bottom: 0.3em;
@@ -95,7 +130,7 @@ div#doc-page-container > h6 > a:focus {
 
 div#content-body {
     border-left: 1px solid #e0e0e0;
-    box-shadow: -3px 0px 5px -2px rgba(0,0,0,0.14);
+    box-shadow: -3px 0 5px -2px rgba(0,0,0,0.14);
     position: relative;
     padding: 10px;
     background-color: #f4f3f4;

From 4d9613887febf60a5c4bd543f9fbe04b17a60611 Mon Sep 17 00:00:00 2001
From: Herdy Handoko <herdy.handoko@gmail.com>
Date: Mon, 6 Mar 2017 11:07:54 +0800
Subject: [PATCH 02/12] Added sidebar toggle interactivity for small viewports

---
 doc-tool/resources/_layouts/sidebar.html |  9 ++-
 doc-tool/resources/css/dottydoc.css      | 75 +++++++++++++++++++++---
 2 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/doc-tool/resources/_layouts/sidebar.html b/doc-tool/resources/_layouts/sidebar.html
index b3947c884ff3..24ed1bed7284 100644
--- a/doc-tool/resources/_layouts/sidebar.html
+++ b/doc-tool/resources/_layouts/sidebar.html
@@ -33,9 +33,12 @@
         </ul>
     </div>
     <div id="content-body">
-        <div id="menu-toggle" onclick="toggleMenu()">
-            <i class="fa fa-bars" aria-hidden="true"></i>
-        </div>
+        <button type="button" id="menu-toggle" onclick="toggleMenu()" aria-expanded="false">
+            <span class="sr-only" aria-hidden="true">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+        </button>
         {{ content }}
     </div>
 </div>
diff --git a/doc-tool/resources/css/dottydoc.css b/doc-tool/resources/css/dottydoc.css
index 41e940a6d8fa..f4c0d8859f50 100644
--- a/doc-tool/resources/css/dottydoc.css
+++ b/doc-tool/resources/css/dottydoc.css
@@ -129,26 +129,83 @@ div#doc-page-container > h6 > a:focus {
 }
 
 div#content-body {
+    background-color: #f4f3f4;
     border-left: 1px solid #e0e0e0;
     box-shadow: -3px 0 5px -2px rgba(0,0,0,0.14);
-    position: relative;
     padding: 10px;
-    background-color: #f4f3f4;
+    position: relative;
     min-height: 100vh;
 }
 
-div#menu-toggle {
-    color: #837F84;
-    outline: none;
-    padding-left: 20px;
-    padding-top: 10px;
+button#menu-toggle {
+    background: rgba(250,250,250,0.4) none;
+    border: 1px solid transparent;
+    color: #837f84;
+    margin: -8px 0 0 -70px;
+    padding: 9px 10px;
+    position: absolute;
 }
 
-div#menu-toggle:hover {
-    color: rgba(0, 0, 0, 0.4);
+button#menu-toggle:hover {
+    color: rgba(0,0,0,0.4);
     cursor: pointer;
 }
 
+button#menu-toggle:focus {
+    outline: none;
+}
+
+button#menu-toggle span.icon-bar {
+    background-color:#837f84;
+    border-radius: 2px;
+    border-color: #837f84;
+    color: #837f84;
+    display: block;
+    margin: 3px 0;
+    width: 22px;
+    height: 2px;
+}
+
+@media screen and (max-width: 767px) {
+
+    div#content-wrapper button#menu-toggle {
+        margin: -8px 0 0 -28px;
+        position: fixed;
+    }
+
+    div#content-wrapper button#menu-toggle span,
+    div#content-wrapper.toggled button#menu-toggle span {
+        -webkit-transition: transform .25s ease-out, width .25s ease-out, top .25s ease-out, bottom .25s ease-out;
+             -o-transition: transform .25s ease-out, width .25s ease-out, top .25s ease-out, bottom .25s ease-out;
+                transition: transform .25s ease-out, width .25s ease-out, top .25s ease-out, bottom .25s ease-out;
+    }
+
+    div#content-wrapper.toggled button#menu-toggle span:first-child + span {
+        -webkit-transform: translateX(-1px) translateY(2px) rotate(-45deg);
+            -ms-transform: translateX(-1px) translateY(2px) rotate(-45deg);
+                transform: translateX(-1px) translateY(2px) rotate(-45deg);
+        width: 10px;
+    }
+
+    div#content-wrapper.toggled button#menu-toggle span:first-child + span + span {
+        -webkit-transform: rotate(180deg);
+            -ms-transform: rotate(180deg);
+                transform: rotate(180deg);
+    }
+
+    div#content-wrapper.toggled button#menu-toggle span:first-child + span + span + span {
+        -webkit-transform: translateX(-1px) translateY(-2px) rotate(45deg);
+            -ms-transform: translateX(-1px) translateY(-2px) rotate(45deg);
+                transform: translateX(-1px) translateY(-2px) rotate(45deg);
+        width: 10px;
+    }
+
+    div#content-body {
+        padding-left: 30px;
+    }
+
+}
+
 ul.index-entities {
     list-style-type: none;
     padding-left: 0;

From 02bd52ac14e3e54dd56db93ad934a2626ae3d682 Mon Sep 17 00:00:00 2001
From: Herdy Handoko <herdy.handoko@gmail.com>
Date: Mon, 6 Mar 2017 11:55:08 +0800
Subject: [PATCH 03/12] Re-added sidebar toggle support for desktop viewport
 widths

---
 doc-tool/resources/css/dottydoc.css | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/doc-tool/resources/css/dottydoc.css b/doc-tool/resources/css/dottydoc.css
index f4c0d8859f50..e3c35eddde07 100644
--- a/doc-tool/resources/css/dottydoc.css
+++ b/doc-tool/resources/css/dottydoc.css
@@ -18,7 +18,9 @@ div#content-wrapper {
             transition: all .25s ease-out;
 }
 
-div#content-wrapper.toggled { }
+div#content-wrapper.toggled {
+    padding-left: 0;
+}
 
 div.index-wrapper {
     background-color: #fafafa;
@@ -137,11 +139,15 @@ div#content-body {
     min-height: 100vh;
 }
 
+div#content-wrapper.toggled div#content-body {
+    padding-left: 30px;
+}
+
 button#menu-toggle {
     background: rgba(250,250,250,0.4) none;
     border: 1px solid transparent;
     color: #837f84;
-    margin: -8px 0 0 -70px;
+    margin: -8px 0 0 -72px;
     padding: 9px 10px;
     position: absolute;
 }
@@ -166,6 +172,18 @@ button#menu-toggle span.icon-bar {
     height: 2px;
 }
 
+div#content-wrapper button#menu-toggle,
+div#content-wrapper.toggled button#menu-toggle {
+    -webkit-transition: all .25s ease-out;
+         -o-transition: all .25s ease-out;
+            transition: all .25s ease-out;
+}
+
+div#content-wrapper.toggled button#menu-toggle {
+    margin: -8px 0 0 -28px;
+    position: fixed;
+}
+
 @media screen and (max-width: 767px) {
 
     div#content-wrapper button#menu-toggle {

From 9a589da1697c53e79cd0f83f339d48f627ee3af2 Mon Sep 17 00:00:00 2001
From: Herdy Handoko <herdy.handoko@gmail.com>
Date: Mon, 6 Mar 2017 12:52:23 +0800
Subject: [PATCH 04/12] Widened sidebar in mobile viewport and removed extra
 padding in content body

---
 doc-tool/resources/css/dottydoc.css | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/doc-tool/resources/css/dottydoc.css b/doc-tool/resources/css/dottydoc.css
index e3c35eddde07..b0fe1e7f0673 100644
--- a/doc-tool/resources/css/dottydoc.css
+++ b/doc-tool/resources/css/dottydoc.css
@@ -48,13 +48,12 @@ div.index-wrapper {
     }
 
     div.index-wrapper {
-        position: absolute;
         top: 0;
-        width: 50%; /** 6 column width */
+        width: 60%;
     }
 
     div#content-wrapper.toggled div#content-body {
-        left: 50%; /** 6 columns width offset */
+        left: 60%;
     }
 
     div#content-wrapper.toggled div.index-wrapper {
@@ -134,7 +133,7 @@ div#content-body {
     background-color: #f4f3f4;
     border-left: 1px solid #e0e0e0;
     box-shadow: -3px 0 5px -2px rgba(0,0,0,0.14);
-    padding: 10px;
+    padding: 1px;
     position: relative;
     min-height: 100vh;
 }
@@ -147,9 +146,9 @@ button#menu-toggle {
     background: rgba(250,250,250,0.4) none;
     border: 1px solid transparent;
     color: #837f84;
-    margin: -8px 0 0 -72px;
+    margin: 2px 0 0 -72px;
     padding: 9px 10px;
-    position: absolute;
+    position: fixed;
 }
 
 button#menu-toggle:hover {
@@ -180,15 +179,13 @@ div#content-wrapper.toggled button#menu-toggle {
 }
 
 div#content-wrapper.toggled button#menu-toggle {
-    margin: -8px 0 0 -28px;
-    position: fixed;
+    margin: 2px 0 0 -28px;
 }
 
 @media screen and (max-width: 767px) {
 
     div#content-wrapper button#menu-toggle {
-        margin: -8px 0 0 -28px;
-        position: fixed;
+        margin: 2px 0 0 -28px;
     }
 
     div#content-wrapper button#menu-toggle span,

From 3265e5d9baa1f811944a3122e619256172220da5 Mon Sep 17 00:00:00 2001
From: Herdy Handoko <herdy.handoko@gmail.com>
Date: Fri, 31 Mar 2017 14:02:40 +0800
Subject: [PATCH 05/12] Reduce sidebar width back to 250px on Desktop and
 Tablet viewports

Tablet (576px <= x < 768px) viewport sidebar is now limited to 250px to follow
Desktop viewports whilst still retaining its off-canvas behaviour like Mobile.
Mobile viewport (x < 576px) still implements 60% sidebar width.
---
 doc-tool/resources/css/dottydoc.css | 35 +++++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/doc-tool/resources/css/dottydoc.css b/doc-tool/resources/css/dottydoc.css
index b0fe1e7f0673..18286082c493 100644
--- a/doc-tool/resources/css/dottydoc.css
+++ b/doc-tool/resources/css/dottydoc.css
@@ -12,7 +12,7 @@ body {
 
 div#content-wrapper {
     min-height: 100vh;
-    padding-left: 300px;
+    padding-left: 250px;
     -webkit-transition: all .25s ease-out;
          -o-transition: all .25s ease-out;
             transition: all .25s ease-out;
@@ -27,13 +27,13 @@ div.index-wrapper {
     position: fixed;
     top: 0;
     left: 0;
-    width: 300px;
+    width: 250px;
     height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
 }
 
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 575px) {
 
     div#content-wrapper {
         padding-left: 0;
@@ -48,7 +48,6 @@ div.index-wrapper {
     }
 
     div.index-wrapper {
-        top: 0;
         width: 60%;
     }
 
@@ -62,6 +61,34 @@ div.index-wrapper {
 
 }
 
+@media screen and (min-width: 576px) and (max-width: 767px) {
+
+    div#content-wrapper {
+        padding-left: 0;
+    }
+
+    div#content-body {
+        position: relative;
+        left: 0;
+        -webkit-transition: all .25s ease-out;
+             -o-transition: all .25s ease-out;
+                transition: all .25s ease-out;
+    }
+
+    div.index-wrapper {
+        width: 250px;
+    }
+
+    div#content-wrapper.toggled div#content-body {
+        left: 250px;
+    }
+
+    div#content-wrapper.toggled div.index-wrapper {
+        left: 0;
+    }
+
+}
+
 div#doc-page-container > h1 {
     border-bottom: 1px solid #eee;
     padding-bottom: 0.3em;

From c0e430a309adafbfd234e9dc4e1cad1da2044bc7 Mon Sep 17 00:00:00 2001
From: Herdy Handoko <herdy.handoko@gmail.com>
Date: Fri, 31 Mar 2017 16:16:18 +0800
Subject: [PATCH 06/12] Refactor media queries to follow mobile-first strategy

Instead of specifying specific styles at a viewport width range, e.g. Tablet
(576px <= x < 768px), the CSS properties are arranged as such that default CSS
properties applies to Mobile, with Tablet and Desktop styles defined within
media queries.

Mobile-first strategy will ensure more consistency as style resolution will go
in one direction, e.g. from Mobile -> Tablet -> Desktop.
---
 doc-tool/resources/css/dottydoc.css | 169 ++++++++++++++--------------
 1 file changed, 82 insertions(+), 87 deletions(-)

diff --git a/doc-tool/resources/css/dottydoc.css b/doc-tool/resources/css/dottydoc.css
index 18286082c493..2cb261f5b427 100644
--- a/doc-tool/resources/css/dottydoc.css
+++ b/doc-tool/resources/css/dottydoc.css
@@ -12,80 +12,63 @@ body {
 
 div#content-wrapper {
     min-height: 100vh;
-    padding-left: 250px;
-    -webkit-transition: all .25s ease-out;
-         -o-transition: all .25s ease-out;
-            transition: all .25s ease-out;
+    padding-left: 0;
 }
 
-div#content-wrapper.toggled {
-    padding-left: 0;
+div#content-wrapper div#content-body {
+    position: relative;
 }
 
-div.index-wrapper {
+div#content-wrapper div.index-wrapper {
     background-color: #fafafa;
     position: fixed;
     top: 0;
     left: 0;
-    width: 250px;
     height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
 }
 
-@media screen and (max-width: 575px) {
+/** Animations: Easing for content body slide on toggle  */
+div#content-wrapper,
+div#content-wrapper div#content-body {
+    -webkit-transition: all .25s ease-out;
+         -o-transition: all .25s ease-out;
+            transition: all .25s ease-out;
+}
 
-    div#content-wrapper {
-        padding-left: 0;
-    }
+/** Mobile (x < 576px) sidebar: Defaults closed with 60% wide sidebar */
+div#content-wrapper {}
+div#content-wrapper div#content-body { left: 0; }
+div#content-wrapper div.index-wrapper { width: 60%; }
 
-    div#content-body {
-        position: relative;
-        left: 0;
-        -webkit-transition: all .25s ease-out;
-             -o-transition: all .25s ease-out;
-                transition: all .25s ease-out;
-    }
+div#content-wrapper.toggled {}
+div#content-wrapper.toggled div#content-body { left: 60%; }
+div#content-wrapper.toggled div.index-wrapper {}
 
-    div.index-wrapper {
-        width: 60%;
-    }
+/** Tablet (576px <= x < 768px) sidebar: Defaults closed with 250px wide sidebar */
+@media screen and (min-width: 576px) {
 
-    div#content-wrapper.toggled div#content-body {
-        left: 60%;
-    }
+    div#content-wrapper {}
+    div#content-wrapper div#content-body {}
+    div#content-wrapper div.index-wrapper { width: 250px; }
 
-    div#content-wrapper.toggled div.index-wrapper {
-        left: 0;
-    }
+    div#content-wrapper.toggled {}
+    div#content-wrapper.toggled div#content-body { left: 250px; }
+    div#content-wrapper.toggled div.index-wrapper {}
 
 }
 
-@media screen and (min-width: 576px) and (max-width: 767px) {
-
-    div#content-wrapper {
-        padding-left: 0;
-    }
-
-    div#content-body {
-        position: relative;
-        left: 0;
-        -webkit-transition: all .25s ease-out;
-             -o-transition: all .25s ease-out;
-                transition: all .25s ease-out;
-    }
-
-    div.index-wrapper {
-        width: 250px;
-    }
+/** Desktop (x >= 768px) sidebar: Defaults open with 250px wide sidebar  */
+@media screen and (min-width: 768px) {
 
-    div#content-wrapper.toggled div#content-body {
-        left: 250px;
-    }
+    div#content-wrapper { padding-left: 250px; }
+    div#content-wrapper div#content-body {}
+    div#content-wrapper div.index-wrapper { width: 250px; }
 
-    div#content-wrapper.toggled div.index-wrapper {
-        left: 0;
-    }
+    div#content-wrapper.toggled { padding-left: 0; }
+    div#content-wrapper.toggled div#content-body { left: 0; }
+    div#content-wrapper.toggled div.index-wrapper {}
 
 }
 
@@ -160,7 +143,7 @@ div#content-body {
     background-color: #f4f3f4;
     border-left: 1px solid #e0e0e0;
     box-shadow: -3px 0 5px -2px rgba(0,0,0,0.14);
-    padding: 1px;
+    padding: 1px 1px 1px 30px;
     position: relative;
     min-height: 100vh;
 }
@@ -173,7 +156,7 @@ button#menu-toggle {
     background: rgba(250,250,250,0.4) none;
     border: 1px solid transparent;
     color: #837f84;
-    margin: 2px 0 0 -72px;
+    margin: 2px 0 0 -28px;
     padding: 9px 10px;
     position: fixed;
 }
@@ -198,52 +181,64 @@ button#menu-toggle span.icon-bar {
     height: 2px;
 }
 
-div#content-wrapper button#menu-toggle,
 div#content-wrapper.toggled button#menu-toggle {
-    -webkit-transition: all .25s ease-out;
-         -o-transition: all .25s ease-out;
-            transition: all .25s ease-out;
+    margin: 2px 0 0 -28px;
 }
 
-div#content-wrapper.toggled button#menu-toggle {
-    margin: 2px 0 0 -28px;
+/** Desktop (x >= 768px) menu position: Pull hamburger menu to sidebar and remove content body padding */
+@media screen and (min-width: 768px) {
+
+    div#content-body { padding-left: 1px; }
+
+    button#menu-toggle { margin: 2px 0 0 -72px; }
+
 }
 
-@media screen and (max-width: 767px) {
+/** Mobile (x < 576px) animations: Hamburger menu button transform to arrow on toggle */
+div#content-wrapper button#menu-toggle span,
+div#content-wrapper.toggled button#menu-toggle span {
+    -webkit-transition: transform .25s ease-out, width .25s ease-out, top .25s ease-out, bottom .25s ease-out;
+         -o-transition: transform .25s ease-out, width .25s ease-out, top .25s ease-out, bottom .25s ease-out;
+            transition: transform .25s ease-out, width .25s ease-out, top .25s ease-out, bottom .25s ease-out;
+}
 
-    div#content-wrapper button#menu-toggle {
-        margin: 2px 0 0 -28px;
-    }
+div#content-wrapper.toggled button#menu-toggle span:first-child + span {
+    -webkit-transform: translateX(-1px) translateY(2px) rotate(-45deg);
+        -ms-transform: translateX(-1px) translateY(2px) rotate(-45deg);
+            transform: translateX(-1px) translateY(2px) rotate(-45deg);
+    width: 10px;
+}
 
-    div#content-wrapper button#menu-toggle span,
-    div#content-wrapper.toggled button#menu-toggle span {
-        -webkit-transition: transform .25s ease-out, width .25s ease-out, top .25s ease-out, bottom .25s ease-out;
-             -o-transition: transform .25s ease-out, width .25s ease-out, top .25s ease-out, bottom .25s ease-out;
-                transition: transform .25s ease-out, width .25s ease-out, top .25s ease-out, bottom .25s ease-out;
-    }
+div#content-wrapper.toggled button#menu-toggle span:first-child + span + span {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+}
 
-    div#content-wrapper.toggled button#menu-toggle span:first-child + span {
-        -webkit-transform: translateX(-1px) translateY(2px) rotate(-45deg);
-            -ms-transform: translateX(-1px) translateY(2px) rotate(-45deg);
-                transform: translateX(-1px) translateY(2px) rotate(-45deg);
-        width: 10px;
-    }
+div#content-wrapper.toggled button#menu-toggle span:first-child + span + span + span {
+    -webkit-transform: translateX(-1px) translateY(-2px) rotate(45deg);
+        -ms-transform: translateX(-1px) translateY(-2px) rotate(45deg);
+            transform: translateX(-1px) translateY(-2px) rotate(45deg);
+    width: 10px;
+}
 
-    div#content-wrapper.toggled button#menu-toggle span:first-child + span + span {
-        -webkit-transform: rotate(180deg);
-            -ms-transform: rotate(180deg);
-                transform: rotate(180deg);
-    }
+/** Desktop (x >= 768px) animations: Disable, hamburger menu do not transform */
+@media screen and (min-width: 768px) {
 
-    div#content-wrapper.toggled button#menu-toggle span:first-child + span + span + span {
-        -webkit-transform: translateX(-1px) translateY(-2px) rotate(45deg);
-            -ms-transform: translateX(-1px) translateY(-2px) rotate(45deg);
-                transform: translateX(-1px) translateY(-2px) rotate(45deg);
-        width: 10px;
+    div#content-wrapper button#menu-toggle span,
+    div#content-wrapper.toggled button#menu-toggle span {
+        -webkit-transition-property: none !important;
+             -o-transition-property: none !important;
+                transition-property: none !important;
     }
 
-    div#content-body {
-        padding-left: 30px;
+    div#content-wrapper.toggled button#menu-toggle span:first-child + span,
+    div#content-wrapper.toggled button#menu-toggle span:first-child + span + span,
+    div#content-wrapper.toggled button#menu-toggle span:first-child + span + span + span {
+        -webkit-transform: unset !important;
+            -ms-transform: unset !important;
+                transform: unset !important;
+        width: 22px !important;
     }
 
 }

From 6860ea4c3f62f2443d09654551486c296e390f64 Mon Sep 17 00:00:00 2001
From: Herdy Handoko <herdy.handoko@gmail.com>
Date: Fri, 31 Mar 2017 16:25:10 +0800
Subject: [PATCH 07/12] Move `div#entity-container` and
 `div#doc-page-container` further down

The change above, in addition to qualifying `button#menu-toggle` with
`div#content-wrapper` parent selector will make the existing CSS easier
to refactor removing duplicates, and to swap it into CSS pre-processor
languages such as SASS or Less.
---
 doc-tool/resources/css/dottydoc.css | 148 ++++++++++++++--------------
 1 file changed, 74 insertions(+), 74 deletions(-)

diff --git a/doc-tool/resources/css/dottydoc.css b/doc-tool/resources/css/dottydoc.css
index 2cb261f5b427..50cfea954d03 100644
--- a/doc-tool/resources/css/dottydoc.css
+++ b/doc-tool/resources/css/dottydoc.css
@@ -72,74 +72,7 @@ div#content-wrapper.toggled div.index-wrapper {}
 
 }
 
-div#doc-page-container > h1 {
-    border-bottom: 1px solid #eee;
-    padding-bottom: 0.3em;
-}
-
-div#doc-page-container > h1 {
-    margin: 3rem 0 0.5rem 0;
-}
-
-div#doc-page-container > h3 {
-    font-size: 1.5rem;
-}
-
-div#doc-page-container > h4 {
-    font-size: 1.25rem;
-}
-
-div#doc-page-container > h5 {
-    font-size: 1rem;
-}
-
-div#entity-container h1 > a,
-div#entity-container h2 > a,
-div#entity-container h3 > a,
-div#entity-container h4 > a,
-div#entity-container h5 > a,
-div#entity-container h6 > a,
-div#doc-page-container > h1 > a,
-div#doc-page-container > h2 > a,
-div#doc-page-container > h3 > a,
-div#doc-page-container > h4 > a,
-div#doc-page-container > h5 > a,
-div#doc-page-container > h6 > a {
-    text-decoration: none;
-    color: #373a3c;
-}
-
-div#entity-container h1 > a:hover,
-div#entity-container h2 > a:hover,
-div#entity-container h3 > a:hover,
-div#entity-container h4 > a:hover,
-div#entity-container h5 > a:hover,
-div#entity-container h6 > a:hover,
-div#doc-page-container > h1 > a:hover,
-div#doc-page-container > h2 > a:hover,
-div#doc-page-container > h3 > a:hover,
-div#doc-page-container > h4 > a:hover,
-div#doc-page-container > h5 > a:hover,
-div#doc-page-container > h6 > a:hover {
-    text-decoration: underline;
-}
-
-div#entity-container h1 > a:focus,
-div#entity-container h2 > a:focus,
-div#entity-container h3 > a:focus,
-div#entity-container h4 > a:focus,
-div#entity-container h5 > a:focus,
-div#entity-container h6 > a:focus,
-div#doc-page-container > h1 > a:focus,
-div#doc-page-container > h2 > a:focus,
-div#doc-page-container > h3 > a:focus,
-div#doc-page-container > h4 > a:focus,
-div#doc-page-container > h5 > a:focus,
-div#doc-page-container > h6 > a:focus {
-    outline: none;
-}
-
-div#content-body {
+div#content-wrapper div#content-body {
     background-color: #f4f3f4;
     border-left: 1px solid #e0e0e0;
     box-shadow: -3px 0 5px -2px rgba(0,0,0,0.14);
@@ -152,7 +85,7 @@ div#content-wrapper.toggled div#content-body {
     padding-left: 30px;
 }
 
-button#menu-toggle {
+div#content-wrapper button#menu-toggle {
     background: rgba(250,250,250,0.4) none;
     border: 1px solid transparent;
     color: #837f84;
@@ -161,16 +94,16 @@ button#menu-toggle {
     position: fixed;
 }
 
-button#menu-toggle:hover {
+div#content-wrapper button#menu-toggle:hover {
     color: rgba(0,0,0,0.4);
     cursor: pointer;
 }
 
-button#menu-toggle:focus {
+div#content-wrapper button#menu-toggle:focus {
     outline: none;
 }
 
-button#menu-toggle span.icon-bar {
+div#content-wrapper button#menu-toggle span.icon-bar {
     background-color:#837f84;
     border-radius: 2px;
     border-color: #837f84;
@@ -188,9 +121,9 @@ div#content-wrapper.toggled button#menu-toggle {
 /** Desktop (x >= 768px) menu position: Pull hamburger menu to sidebar and remove content body padding */
 @media screen and (min-width: 768px) {
 
-    div#content-body { padding-left: 1px; }
+    div#content-wrapper div#content-body { padding-left: 1px; }
 
-    button#menu-toggle { margin: 2px 0 0 -72px; }
+    div#content-wrapper button#menu-toggle { margin: 2px 0 0 -72px; }
 
 }
 
@@ -243,6 +176,73 @@ div#content-wrapper.toggled button#menu-toggle span:first-child + span + span +
 
 }
 
+div#doc-page-container > h1 {
+    border-bottom: 1px solid #eee;
+    padding-bottom: 0.3em;
+}
+
+div#doc-page-container > h1 {
+    margin: 3rem 0 0.5rem 0;
+}
+
+div#doc-page-container > h3 {
+    font-size: 1.5rem;
+}
+
+div#doc-page-container > h4 {
+    font-size: 1.25rem;
+}
+
+div#doc-page-container > h5 {
+    font-size: 1rem;
+}
+
+div#entity-container h1 > a,
+div#entity-container h2 > a,
+div#entity-container h3 > a,
+div#entity-container h4 > a,
+div#entity-container h5 > a,
+div#entity-container h6 > a,
+div#doc-page-container > h1 > a,
+div#doc-page-container > h2 > a,
+div#doc-page-container > h3 > a,
+div#doc-page-container > h4 > a,
+div#doc-page-container > h5 > a,
+div#doc-page-container > h6 > a {
+    text-decoration: none;
+    color: #373a3c;
+}
+
+div#entity-container h1 > a:hover,
+div#entity-container h2 > a:hover,
+div#entity-container h3 > a:hover,
+div#entity-container h4 > a:hover,
+div#entity-container h5 > a:hover,
+div#entity-container h6 > a:hover,
+div#doc-page-container > h1 > a:hover,
+div#doc-page-container > h2 > a:hover,
+div#doc-page-container > h3 > a:hover,
+div#doc-page-container > h4 > a:hover,
+div#doc-page-container > h5 > a:hover,
+div#doc-page-container > h6 > a:hover {
+    text-decoration: underline;
+}
+
+div#entity-container h1 > a:focus,
+div#entity-container h2 > a:focus,
+div#entity-container h3 > a:focus,
+div#entity-container h4 > a:focus,
+div#entity-container h5 > a:focus,
+div#entity-container h6 > a:focus,
+div#doc-page-container > h1 > a:focus,
+div#doc-page-container > h2 > a:focus,
+div#doc-page-container > h3 > a:focus,
+div#doc-page-container > h4 > a:focus,
+div#doc-page-container > h5 > a:focus,
+div#doc-page-container > h6 > a:focus {
+    outline: none;
+}
+
 ul.index-entities {
     list-style-type: none;
     padding-left: 0;

From 05ec44d6d8e35a7a765263d8095b685b3b3a022b Mon Sep 17 00:00:00 2001
From: Herdy Handoko <herdy.handoko@gmail.com>
Date: Fri, 31 Mar 2017 16:45:05 +0800
Subject: [PATCH 08/12] Merge redundant `div#content-body` styles

Two different `div#content-body` styles was defined, one with only
`position: relative` and another with the complete styles.

In addition, a `div#content-body` Tablet and Desktop padding style was moved
into the relevant media query to make future changes more transparent.
---
 doc-tool/resources/css/dottydoc.css | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/doc-tool/resources/css/dottydoc.css b/doc-tool/resources/css/dottydoc.css
index 50cfea954d03..bacade74c0f4 100644
--- a/doc-tool/resources/css/dottydoc.css
+++ b/doc-tool/resources/css/dottydoc.css
@@ -16,7 +16,12 @@ div#content-wrapper {
 }
 
 div#content-wrapper div#content-body {
+    background-color: #f4f3f4;
+    border-left: 1px solid #e0e0e0;
+    box-shadow: -3px 0 5px -2px rgba(0,0,0,0.14);
+    padding: 1px 1px 1px 30px;
     position: relative;
+    min-height: 100vh;
 }
 
 div#content-wrapper div.index-wrapper {
@@ -72,19 +77,6 @@ div#content-wrapper.toggled div.index-wrapper {}
 
 }
 
-div#content-wrapper div#content-body {
-    background-color: #f4f3f4;
-    border-left: 1px solid #e0e0e0;
-    box-shadow: -3px 0 5px -2px rgba(0,0,0,0.14);
-    padding: 1px 1px 1px 30px;
-    position: relative;
-    min-height: 100vh;
-}
-
-div#content-wrapper.toggled div#content-body {
-    padding-left: 30px;
-}
-
 div#content-wrapper button#menu-toggle {
     background: rgba(250,250,250,0.4) none;
     border: 1px solid transparent;
@@ -123,6 +115,8 @@ div#content-wrapper.toggled button#menu-toggle {
 
     div#content-wrapper div#content-body { padding-left: 1px; }
 
+    div#content-wrapper.toggled div#content-body { padding-left: 30px; }
+
     div#content-wrapper button#menu-toggle { margin: 2px 0 0 -72px; }
 
 }

From ccf5e08cb6af389043f5c278f1ffa24be587fa34 Mon Sep 17 00:00:00 2001
From: Herdy Handoko <herdy.handoko@gmail.com>
Date: Fri, 31 Mar 2017 16:50:49 +0800
Subject: [PATCH 09/12] Change `rgba(...)` properties to insert space and
 prefix decimals with `0`

Within the CSS file, RGBA property declaration is inconsistent: some with space
after comma and some without, some has leading `0` for decimals and some dont'.
This change make sure that one style is followed (space after comma and always
use the leading `0` in decimals).
---
 doc-tool/resources/css/dottydoc.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/doc-tool/resources/css/dottydoc.css b/doc-tool/resources/css/dottydoc.css
index bacade74c0f4..6eaa20da8e89 100644
--- a/doc-tool/resources/css/dottydoc.css
+++ b/doc-tool/resources/css/dottydoc.css
@@ -18,7 +18,7 @@ div#content-wrapper {
 div#content-wrapper div#content-body {
     background-color: #f4f3f4;
     border-left: 1px solid #e0e0e0;
-    box-shadow: -3px 0 5px -2px rgba(0,0,0,0.14);
+    box-shadow: -3px 0 5px -2px rgba(0, 0, 0, 0.14);
     padding: 1px 1px 1px 30px;
     position: relative;
     min-height: 100vh;
@@ -78,7 +78,7 @@ div#content-wrapper.toggled div.index-wrapper {}
 }
 
 div#content-wrapper button#menu-toggle {
-    background: rgba(250,250,250,0.4) none;
+    background: rgba(250, 250, 250, 0.4) none;
     border: 1px solid transparent;
     color: #837f84;
     margin: 2px 0 0 -28px;
@@ -87,7 +87,7 @@ div#content-wrapper button#menu-toggle {
 }
 
 div#content-wrapper button#menu-toggle:hover {
-    color: rgba(0,0,0,0.4);
+    color: rgba(0, 0, 0, 0.4);
     cursor: pointer;
 }
 
@@ -318,7 +318,7 @@ ul.index-entities > li > a.entity-name {
     font-size: 13px;
     display: block;
     padding: 0 0 0 24px;
-    color: rgba(0,0,0,.87);
+    color: rgba(0, 0, 0, 0.87);
     background: transparent;
     cursor: pointer;
     float: left;
@@ -368,7 +368,7 @@ ul.toc > li > ul.hide {
 ul.index-entities > li.index-title > span {
     font-size: 16px;
     font-weight: bold;
-    color: rgba(0,0,0,.87);
+    color: rgba(0, 0, 0, 0.87);
     padding: 0 24px;
 }
 
@@ -442,7 +442,7 @@ pre {
     background: rgba(244, 243, 244, 0.6);
     border-radius: 2px;
     margin-top: 20px;
-    border: 1px solid rgba(0,0,0,0.1);
+    border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 pre > code.language-none,

From b82d5f1ce04098ea89109bfa17726bc6a59fd414 Mon Sep 17 00:00:00 2001
From: Herdy Handoko <herdy.handoko@gmail.com>
Date: Fri, 31 Mar 2017 20:57:09 +0800
Subject: [PATCH 10/12] Move hamburger menu to original location and restore
 hover styling

Hamburger menu now stays in the content body as per original design. However
to prevent overlap with body text, a permanent 30px left padding on the body
container has been added.
---
 doc-tool/resources/css/dottydoc.css | 22 +++++-----------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/doc-tool/resources/css/dottydoc.css b/doc-tool/resources/css/dottydoc.css
index 6eaa20da8e89..402c94264980 100644
--- a/doc-tool/resources/css/dottydoc.css
+++ b/doc-tool/resources/css/dottydoc.css
@@ -78,16 +78,15 @@ div#content-wrapper.toggled div.index-wrapper {}
 }
 
 div#content-wrapper button#menu-toggle {
-    background: rgba(250, 250, 250, 0.4) none;
+    background: rgba(244, 243, 244, 0.4) none;
     border: 1px solid transparent;
     color: #837f84;
-    margin: 2px 0 0 -28px;
+    margin: 14px 0 0 -28px;
     padding: 9px 10px;
     position: fixed;
 }
 
 div#content-wrapper button#menu-toggle:hover {
-    color: rgba(0, 0, 0, 0.4);
     cursor: pointer;
 }
 
@@ -96,7 +95,7 @@ div#content-wrapper button#menu-toggle:focus {
 }
 
 div#content-wrapper button#menu-toggle span.icon-bar {
-    background-color:#837f84;
+    background-color: #837f84;
     border-radius: 2px;
     border-color: #837f84;
     color: #837f84;
@@ -106,19 +105,8 @@ div#content-wrapper button#menu-toggle span.icon-bar {
     height: 2px;
 }
 
-div#content-wrapper.toggled button#menu-toggle {
-    margin: 2px 0 0 -28px;
-}
-
-/** Desktop (x >= 768px) menu position: Pull hamburger menu to sidebar and remove content body padding */
-@media screen and (min-width: 768px) {
-
-    div#content-wrapper div#content-body { padding-left: 1px; }
-
-    div#content-wrapper.toggled div#content-body { padding-left: 30px; }
-
-    div#content-wrapper button#menu-toggle { margin: 2px 0 0 -72px; }
-
+div#content-wrapper button#menu-toggle:hover span.icon-bar {
+    background-color: rgba(131, 127, 132, 0.5); /** => #837f84 with 50% opacity */
 }
 
 /** Mobile (x < 576px) animations: Hamburger menu button transform to arrow on toggle */

From 5ba3eda63f1bcc42bb67740e84def7243ca3c9d1 Mon Sep 17 00:00:00 2001
From: Herdy Handoko <herdy.handoko@gmail.com>
Date: Wed, 5 Apr 2017 15:24:51 +0800
Subject: [PATCH 11/12] Remove hamburger menu transformation into arrow on
 expansion

As per PR review comments (https://github.com/lampepfl/dotty/pull/2052)
the old hamburger menu style is restored by removing CSS transforms.
---
 doc-tool/resources/css/dottydoc.css | 49 -----------------------------
 1 file changed, 49 deletions(-)

diff --git a/doc-tool/resources/css/dottydoc.css b/doc-tool/resources/css/dottydoc.css
index 402c94264980..ba5ad3ac76b8 100644
--- a/doc-tool/resources/css/dottydoc.css
+++ b/doc-tool/resources/css/dottydoc.css
@@ -109,55 +109,6 @@ div#content-wrapper button#menu-toggle:hover span.icon-bar {
     background-color: rgba(131, 127, 132, 0.5); /** => #837f84 with 50% opacity */
 }
 
-/** Mobile (x < 576px) animations: Hamburger menu button transform to arrow on toggle */
-div#content-wrapper button#menu-toggle span,
-div#content-wrapper.toggled button#menu-toggle span {
-    -webkit-transition: transform .25s ease-out, width .25s ease-out, top .25s ease-out, bottom .25s ease-out;
-         -o-transition: transform .25s ease-out, width .25s ease-out, top .25s ease-out, bottom .25s ease-out;
-            transition: transform .25s ease-out, width .25s ease-out, top .25s ease-out, bottom .25s ease-out;
-}
-
-div#content-wrapper.toggled button#menu-toggle span:first-child + span {
-    -webkit-transform: translateX(-1px) translateY(2px) rotate(-45deg);
-        -ms-transform: translateX(-1px) translateY(2px) rotate(-45deg);
-            transform: translateX(-1px) translateY(2px) rotate(-45deg);
-    width: 10px;
-}
-
-div#content-wrapper.toggled button#menu-toggle span:first-child + span + span {
-    -webkit-transform: rotate(180deg);
-        -ms-transform: rotate(180deg);
-            transform: rotate(180deg);
-}
-
-div#content-wrapper.toggled button#menu-toggle span:first-child + span + span + span {
-    -webkit-transform: translateX(-1px) translateY(-2px) rotate(45deg);
-        -ms-transform: translateX(-1px) translateY(-2px) rotate(45deg);
-            transform: translateX(-1px) translateY(-2px) rotate(45deg);
-    width: 10px;
-}
-
-/** Desktop (x >= 768px) animations: Disable, hamburger menu do not transform */
-@media screen and (min-width: 768px) {
-
-    div#content-wrapper button#menu-toggle span,
-    div#content-wrapper.toggled button#menu-toggle span {
-        -webkit-transition-property: none !important;
-             -o-transition-property: none !important;
-                transition-property: none !important;
-    }
-
-    div#content-wrapper.toggled button#menu-toggle span:first-child + span,
-    div#content-wrapper.toggled button#menu-toggle span:first-child + span + span,
-    div#content-wrapper.toggled button#menu-toggle span:first-child + span + span + span {
-        -webkit-transform: unset !important;
-            -ms-transform: unset !important;
-                transform: unset !important;
-        width: 22px !important;
-    }
-
-}
-
 div#doc-page-container > h1 {
     border-bottom: 1px solid #eee;
     padding-bottom: 0.3em;

From 4d45a858a0dbc0902ac197375e71aca015cf8314 Mon Sep 17 00:00:00 2001
From: Herdy Handoko <herdy.handoko@gmail.com>
Date: Thu, 6 Apr 2017 10:10:59 +0800
Subject: [PATCH 12/12] Change hamburger menu positioning to `absolute`

As per PR review comments (https://github.com/lampepfl/dotty/pull/2052)
the hamburger menu positioning is changed back to absolute, which also
means the left padding on content body is no longer needed and can be
removed.
---
 doc-tool/resources/css/dottydoc.css | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/doc-tool/resources/css/dottydoc.css b/doc-tool/resources/css/dottydoc.css
index ba5ad3ac76b8..85a7db41707b 100644
--- a/doc-tool/resources/css/dottydoc.css
+++ b/doc-tool/resources/css/dottydoc.css
@@ -19,7 +19,7 @@ div#content-wrapper div#content-body {
     background-color: #f4f3f4;
     border-left: 1px solid #e0e0e0;
     box-shadow: -3px 0 5px -2px rgba(0, 0, 0, 0.14);
-    padding: 1px 1px 1px 30px;
+    padding: 40px 1px 1px 1px;
     position: relative;
     min-height: 100vh;
 }
@@ -81,9 +81,9 @@ div#content-wrapper button#menu-toggle {
     background: rgba(244, 243, 244, 0.4) none;
     border: 1px solid transparent;
     color: #837f84;
-    margin: 14px 0 0 -28px;
+    margin: -30px 0 0 10px;
     padding: 9px 10px;
-    position: fixed;
+    position: absolute;
 }
 
 div#content-wrapper button#menu-toggle:hover {
@@ -105,10 +105,6 @@ div#content-wrapper button#menu-toggle span.icon-bar {
     height: 2px;
 }
 
-div#content-wrapper button#menu-toggle:hover span.icon-bar {
-    background-color: rgba(131, 127, 132, 0.5); /** => #837f84 with 50% opacity */
-}
-
 div#doc-page-container > h1 {
     border-bottom: 1px solid #eee;
     padding-bottom: 0.3em;