Linkify headings, use scroll-behavior

- Uses the scroll-behavior property to achieve smooth scrolling with
less JS
- Solves anchor link bugs
- Linkifies headings in posts so they can be easily hyperlinked to directly

2 files changed, 28 insertions, 40 deletions

diff --git a/assets/js/index.js b/assets/js/index.js
index 5705bd2..292f4f8 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -1,52 +1,35 @@
 // Nav burger animation
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener('DOMContentLoaded', function () {
   // Get all "navbar-burger" elements
-  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0);
+  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
   // Check if there are any navbar burgers
   if ($navbarBurgers.length > 0) {
     // Add a click event on each of them
     $navbarBurgers.forEach(function ($el) {
-      $el.addEventListener("click", function () {
+      $el.addEventListener('click', function () {
         // Get the target from the "data-target" attribute
-        var target = $el.dataset.target;
-        var $target = document.getElementById(target);
+        var target = $el.dataset.target
+        var $target = document.getElementById(target)
         // Toggle the class on both the "navbar-burger" and the "navbar-menu"
-        $el.classList.toggle("is-active");
-        $target.classList.toggle("is-active");
-      });
-    });
+        $el.classList.toggle('is-active')
+        $target.classList.toggle('is-active')
+      })
+    })
   }
-});
-
-// Bitty scrolling links script
-$("a[href^=\"#\"]").click(function(e) {
-    e.preventDefault();
-    //BUG fix: https://github.com/victoriadrake/hugo-theme-introduction/issues/108
-    //
-    //let's get the right attribute `id` of the heading
-    v = e.target.href.replace(/http.*#/, '')
-    id = decodeURI(v)
-
-    $("html, body").animate({
-        //scrollTop: $(document.getElementById(this.hash.substr(1))).offset().top
-        scrollTop: $(document.getElementById(id)).offset().top
-    }, 500);
-    $("#nav-menu").removeClass("is-active");
-    return true;
 })
 
 // Modal closer
-$(".card").click(function () {
-    $($(this).attr("data-target")).addClass("is-active");
-    $("html").addClass("modal-open");
-});
-$(".modal-close").click(function () {
-    $($(this).attr("data-target")).removeClass("is-active");
-    $("html").removeClass("modal-open");
-});
-$(document).keypress(function(e) {
-    if(e.which == 0) {
-        $(".modal.is-active").removeClass("is-active");
-        $("html").removeClass("modal-open");
-    }
-});
+$('.card').click(function () {
+  $($(this).attr('data-target')).addClass('is-active')
+  $('html').addClass('modal-open')
+})
+$('.modal-close').click(function () {
+  $($(this).attr('data-target')).removeClass('is-active')
+  $('html').removeClass('modal-open')
+})
+$(document).keypress(function (e) {
+  if (e.which === 0) {
+    $('.modal.is-active').removeClass('is-active')
+    $('html').removeClass('modal-open')
+  }
+})
\ No newline at end of file
diff --git a/assets/sass/_base.sass b/assets/sass/_base.sass
index 689cd05..a3b1b07 100644
--- a/assets/sass/_base.sass
+++ b/assets/sass/_base.sass
@@ -1,6 +1,9 @@
 html, body
     background-color: $background
 
+html
+    scroll-behavior: smooth
+
 html.modal-open
     overflow: hidden
 
@@ -32,6 +35,8 @@ a
 
 h1, h2, .title, .subtitle
     color: $h-color
+    & a
+        color: $h-color
 
 .title
     font-weight: 400