Update styles

Author: mgechev

assets/style.css

@@ -271,3 +271,39 @@ div.notice {
   font-size: larger;
   margin: 8px;
 }
+
+.nav li {
+  margin-bottom: 6px;
+}
+
+.heading-1 {
+  margin-left: 0;
+}
+
+.heading-2 {
+  margin-left: 10px;
+}
+
+.heading-3 {
+  margin-left: 20px;
+}
+
+.heading-4 {
+  margin-left: 30px;
+  display: none;
+}
+
+.heading-5 {
+  margin-left: 40px;
+  display: none;
+}
+
+@media only screen
+and (max-device-width : 667px) {
+  #sidebar {
+    display: none;
+  }
+  #container {
+    width: 100%;
+  }
+}

index.html

@@ -768,39 +768,39 @@ <h3 id="data-mapper">Data Mapper</h3>
       </div>
     </div>
     <div id="sidebar"><ul class="nav nav-list">
-    <li><a href="#angularjs-in-patterns">AngularJS in Patterns</a></li>
-    <li><a href="#abstract">Abstract</a></li>
-    <li><a href="#introduction">Introduction</a></li>
-    <li><a href="#angularjs-overview">AngularJS overview</a></li>
-    <li><a href="#partials">Partials</a></li>
-    <li><a href="#controllers">Controllers</a></li>
-    <li><a href="#scope">Scope</a></li>
-    <li><a href="#directives">Directives</a></li>
-    <li><a href="#filters">Filters</a></li>
-    <li><a href="#services">Services</a></li>
-    <li><a href="#angularjs-patterns">AngularJS Patterns</a></li>
-    <li><a href="#services">Services</a></li>
-    <li><a href="#singleton">Singleton</a></li>
-    <li><a href="#factory-method">Factory Method</a></li>
-    <li><a href="#decorator">Decorator</a></li>
-    <li><a href="#facade">Facade</a></li>
-    <li><a href="#proxy">Proxy</a></li>
-    <li><a href="#active-record">Active Record</a></li>
-    <li><a href="#intercepting-filters">Intercepting Filters</a></li>
-    <li><a href="#directives">Directives</a></li>
-    <li><a href="#composite">Composite</a></li>
-    <li><a href="#interpreter">Interpreter</a></li>
-    <li><a href="#template-view">Template View</a></li>
-    <li><a href="#scope">Scope</a></li>
-    <li><a href="#observer">Observer</a></li>
-    <li><a href="#chain-of-responsibilities">Chain of Responsibilities</a></li>
-    <li><a href="#command">Command</a></li>
-    <li><a href="#controllers">Controllers</a></li>
-    <li><a href="#page-controller">Page Controller</a></li>
-    <li><a href="#others">Others</a></li>
-    <li><a href="#module-pattern">Module Pattern</a></li>
-    <li><a href="#data-mapper">Data Mapper</a></li>
-    <li><a href="#references">References</a></li>
+    <li><a href="#angularjs-in-patterns" class="heading heading-1">AngularJS in Patterns</a></li>
+    <li><a href="#abstract" class="heading heading-2">Abstract</a></li>
+    <li><a href="#introduction" class="heading heading-2">Introduction</a></li>
+    <li><a href="#angularjs-overview" class="heading heading-2">AngularJS overview</a></li>
+    <li><a href="#partials" class="heading heading-3">Partials</a></li>
+    <li><a href="#controllers" class="heading heading-3">Controllers</a></li>
+    <li><a href="#scope" class="heading heading-3">Scope</a></li>
+    <li><a href="#directives" class="heading heading-3">Directives</a></li>
+    <li><a href="#filters" class="heading heading-3">Filters</a></li>
+    <li><a href="#services" class="heading heading-3">Services</a></li>
+    <li><a href="#angularjs-patterns" class="heading heading-2">AngularJS Patterns</a></li>
+    <li><a href="#services" class="heading heading-3">Services</a></li>
+    <li><a href="#singleton" class="heading heading-4">Singleton</a></li>
+    <li><a href="#factory-method" class="heading heading-4">Factory Method</a></li>
+    <li><a href="#decorator" class="heading heading-4">Decorator</a></li>
+    <li><a href="#facade" class="heading heading-4">Facade</a></li>
+    <li><a href="#proxy" class="heading heading-4">Proxy</a></li>
+    <li><a href="#active-record" class="heading heading-4">Active Record</a></li>
+    <li><a href="#intercepting-filters" class="heading heading-4">Intercepting Filters</a></li>
+    <li><a href="#directives" class="heading heading-3">Directives</a></li>
+    <li><a href="#composite" class="heading heading-4">Composite</a></li>
+    <li><a href="#interpreter" class="heading heading-3">Interpreter</a></li>
+    <li><a href="#template-view" class="heading heading-4">Template View</a></li>
+    <li><a href="#scope" class="heading heading-3">Scope</a></li>
+    <li><a href="#observer" class="heading heading-4">Observer</a></li>
+    <li><a href="#chain-of-responsibilities" class="heading heading-4">Chain of Responsibilities</a></li>
+    <li><a href="#command" class="heading heading-4">Command</a></li>
+    <li><a href="#controllers" class="heading heading-3">Controllers</a></li>
+    <li><a href="#page-controller" class="heading heading-4">Page Controller</a></li>
+    <li><a href="#others" class="heading heading-3">Others</a></li>
+    <li><a href="#module-pattern" class="heading heading-4">Module Pattern</a></li>
+    <li><a href="#data-mapper" class="heading heading-3">Data Mapper</a></li>
+    <li><a href="#references" class="heading heading-2">References</a></li>
 </ul>
     </div>
     <div class="clear">