feat: add annimation on link + fix toc + modify sidebar button

layouts/partials/header.html

@@ -13,11 +13,8 @@
         <div id="overlay"></div>
 
         <div class="padding highlightable">
-            <a href="#" id="sidebar-toggle" data-sidebar-toggle="">
-              <i class="fa fa-2x fa-bars"></i>
-            </a>
-            <div id="top-bar">
 
+            <div id="top-bar">
               {{ if and .IsPage .Site.Params.editURL }}
                 {{ $File := .File }}
                 {{ $Site := .Site }}
@@ -31,6 +28,11 @@
                 {{ end }}
               {{ end }}
               <div id="breadcrumbs" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
+                  <span id="sidebar-toggle-span">
+                      <a href="#" id="sidebar-toggle" data-sidebar-toggle="">
+                        <i class="fa fa-bars"></i>
+                      </a>
+                  </span>
                 {{ if and (not .Params.chapter) (.Params.toc) }}
                 <span id="toc-menu"><a href=""><i class="fa fa-ellipsis-v"></i></a></span>
                 {{ end }}

static/css/hugo-theme.css

@@ -9,19 +9,53 @@
   padding: 0 5px;
 }
 
+#TableOfContents {
+    font-size: 13px !important;
+    max-height: 85vh;
+    overflow: auto;
+    padding: 15px !important;
+}
+
+
 #TableOfContents > ul > li > ul > li > ul li {
   margin-right: 8px;
 }
+
 #TableOfContents > ul > li > a   {
-  font-weight: bold; background-color: #eeeeee; padding: 0 10px; margin: 0 2px;
+  font-weight: bold; padding: 0 18px; margin: 0 2px;
 }
 
 #TableOfContents > ul > li > ul > li > a {
-  font-weight: bold; background-color: #eeeeee;
+  font-weight: bold;
 }
 
-#TableOfContents > ul > li > ul > li > ul > li > ul > li > ul > li  { display: none; }
+#TableOfContents > ul > li > ul > li > ul > li > ul > li > ul > li  {
+    display: none;
+}
 
+#body a.highlight, #body a.highlight:hover, #body a.highlight:focus {
+    text-decoration: none;
+    outline: none;
+    outline: 0;
+}
+#body a.highlight {
+    line-height: 1.1;
+    display: inline-block;
+}
+#body a.highlight:after {
+    display: block;
+    content: "";
+    height: 1px;
+    width: 0%;
+    background-color: #CE3B2F;
+    -webkit-transition: width 0.5s ease;
+    -moz-transition: width 0.5s ease;
+    -ms-transition: width 0.5s ease;
+    transition: width 0.5s ease;
+}
+#body a.highlight:hover:after, #body a.highlight:focus:after {
+    width: 100%;
+}
 .progress {
     position:absolute;
     background-color: rgba(246, 246, 246, 0.97);
@@ -37,6 +71,12 @@
   margin-right: 0.5rem !important;
 }
 
+#sidebar-toggle-span {
+  border-right: thin solid #DAD8D8 !important;
+  padding-right: 0.5rem !important;
+  margin-right: 1rem !important;
+}
+
 #top-bar {
   z-index: 1000;
 }

static/css/theme.css

@@ -161,12 +161,12 @@ textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[typ
 .searchbox input:-ms-input-placeholder {
     color: rgba(255, 255, 255, 0.6);
 }
-#sidebar-toggle {
+#sidebar-toggle-span {
     display: none;
 }
 @media only all and (max-width: 47.938em) {
-    #sidebar-toggle {
+    #sidebar-toggle-span {
-        display: inline-block;
+        display: inline;
     }
 }
 #sidebar {

static/js/hugo-learn.js

@@ -55,12 +55,4 @@ images.each(function(index){
   }
 });
 
-
-$('#toc-menu').hover(function() {
-	$('.progress').stop(true, false, true).fadeToggle(300);
-});
-$('.progress').hover(function() {
-	$('.progress').stop(true, false, true).fadeToggle(300);
-});
-
 $("#top-bar").stick_in_parent();

static/js/learn.js

@@ -228,6 +228,16 @@ jQuery(document).ready(function() {
       }
     });
 
+    $('#top-bar a:not(:has(img))').addClass('highlight');
+    $('#body-inner a:not(:has(img))').addClass('highlight');
+
+    $('#toc-menu a').hover(function() {
+        $('.progress').stop(true, false, true).fadeToggle(100);
+    });
+
+    $('.progress').hover(function() {
+        $('.progress').stop(true, false, true).fadeToggle(100);
+    });
 });
 
 jQuery(window).on('load', function() {