Change Highlight Button to toggle, modify paddings

_includes/head.html

@@ -49,7 +49,7 @@
       spanTag.parentNode.replaceChild(node, spanTag);
     }
     $(function() {
-      $("button")
+      $("#hl_button")
         .click(function( event ) {
           $("pre code").toggleClass("cpp");
           $("pre code").toggleClass("hljs");

_includes/sidebar.html

@@ -7,13 +7,15 @@
           C++ Core Guidelines
         </a>
       </h3>
-      <p class="lead">{{ site.description }}</p>
     </div>
-
     <nav class="sidebar-nav">
       <small>
         {% if page.name == "CppCoreGuidelines.md" %}
 
+        <div class="switch">
+          <input class="tgl tgl-cpp" id="hl_button" type="checkbox"/>
+          <label class="tgl-btn" data-tg-off="No highlight" data-tg-on="Highlight" for="hl_button"></label>
+        </div>
       <!-- Items have to be added manually until for now -->
       <b><a class="sidebar-nav-item active" href="#main">Top</a></b>
 
@@ -47,7 +49,6 @@
       <a class="sidebar-nav-item active" href="#S-tools">Appendix D: Tools support</a>
       <a class="sidebar-nav-item active" href="#S-glossary">Glossary</a>
       <a class="sidebar-nav-item active" href="#S-unclassified">To-do: Unclassified proto-rules</a>
-      <button id="button">Highlighting</button>
         {% else %}
 
       <a class="sidebar-nav-item active" href="CppCoreGuidelines.html">C++ Core Guidelines</a>

public/css/custom.css

@@ -129,3 +129,72 @@ p:after {
         color: #000;
     }
 }
+
+
+.tgl {
+  display: none;
+}
+.tgl + .tgl-btn {
+  outline: 0;
+  display: block;
+  width: 8em;
+  height: 2em;
+  position: relative;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
+  position: relative;
+  display: block;
+  content: "";
+  width: 50%;
+  height: 100%;
+}
+.tgl + .tgl-btn:after {
+  left: 0;
+}
+.tgl + .tgl-btn:before {
+  display: none;
+}
+.tgl:checked + .tgl-btn:after {
+  left: 50%;
+}
+
+.tgl-cpp + .tgl-btn {
+  overflow: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  background: #888;
+}
+.tgl-cpp + .tgl-btn:after, .tgl-cpp + .tgl-btn:before {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  line-height: 2em;
+  font-weight: bold;
+  color: #fff;
+}
+.tgl-cpp + .tgl-btn:after {
+  left: 100%;
+  content: attr(data-tg-on);
+}
+.tgl-cpp + .tgl-btn:before {
+  left: 0;
+  content: attr(data-tg-off);
+}
+.tgl-cpp + .tgl-btn:active {
+  background: #888;
+}
+.tgl-cpp:checked + .tgl-btn {
+  background: #268bd2;
+}
+.tgl-cpp:checked + .tgl-btn:before {
+  left: -100%;
+}
+.tgl-cpp:checked + .tgl-btn:after {
+  left: 0;
+}

public/css/hyde.css

@@ -55,7 +55,7 @@ html {
 
 .sidebar {
   text-align: center;
-  padding: 2rem 1rem;
+  padding: none;
   color: rgba(255,255,255,.5);
   background-color: #202020;
 }
@@ -112,7 +112,7 @@ a.sidebar-nav-item:focus {
     right:  1rem;
     bottom: 1rem;
     left:   1rem;
-    top:    1rem;
+    top:    0rem;
   }
 }