Convert single page into hugo template

static/assets/css/home.css

@@ -100,7 +100,7 @@
   .content {
     position: relative;
     top: -75%;
-    height: 70%;
+    height: 65%;
   }
 
   .home img {

static/assets/css/single.css

@@ -2,21 +2,24 @@
   background-color: #f9fafc;
 }
 
+.wrapper {
+  padding: 0;
+}
+
 .hero-area {
   margin-top: 50px;
   width: 100%;
   height: 400px;
-  background-image: url(/assets/img/bg.jpg);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 
-.content {
+.page-content {
   width: 100%;
   position: relative;
-  top: -60px;
-  padding: 5px;
+  top: -4.5rem;
+  padding: 15px;
 }
 
 .author-profile {
@@ -38,19 +41,52 @@
 }
 
 .post-content {
-  padding: 10px;
+  padding: 15px;
+}
+
+.post-content h1,
+h2 {
+  margin-top: 1.4rem;
+}
+
+.post-content h3,
+h4,
+h5,
+h6 {
+  margin-top: 1.3rem;
+}
+
+.post-content blockquote {
+  border-left: 4px solid #248aaa;
+  background-color: #248baa15;
+  padding: 0.3rem;
+  padding-left: 1rem;
+}
+
+.post-content blockquote > p {
+  color: #3c4858;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 table {
-  border-radius: 20px;
+  border-radius: 0.1rem;
   background: #e5e9f2;
   border: 1px solid #c0ccda;
+  padding: 0.1rem;
 }
 
 table tr {
   height: 40px !important;
 }
 
+table th,
+td {
+  padding: 0.5rem;
+  border-left: 1px solid #8392a5;
+  border-bottom: 1px solid #8392a5;
+}
+
 table thead tr {
   background: #248aaa;
   color: #e5e9f2;
@@ -95,18 +131,36 @@ code {
   display: none;
 }
 
+ul > ol,
+ol > ul,
+ul > ul,
+ol > ol,
+li > ol,
+li > ul {
+  padding-inline-start: 25px;
+}
+
+kbd {
+  background-color: #248aaa !important;
+  color: #f9fafc;
+}
+
+mark {
+  background-color: #ffc21280;
+}
+
 .next-prev-navigator {
   padding-left: 10px;
   padding-right: 10px;
 }
 
 .next-prev-navigator a {
-  color: #3c4858;
+  color: #2098d1;
   transition: all 0.3s ease-out;
 }
 
 .next-prev-navigator a:hover {
-  color: #2098d1;
+  color: #3c4858;
   transition: all 0.3 ease-out;
 }
 
@@ -123,15 +177,15 @@ code {
 }
 
 .next-prev-navigator .btn-outline-info {
-  color: #3c4858 !important;
+  color: #f9fafc !important;
   border-color: #e5e9f2 !important;
-  background-color: #e5e9f2 !important;
+  background-color: #248aaa !important;
   transition: all 0.3s ease-out;
 }
 
 .next-prev-navigator .btn-outline-info:hover {
-  color: #f9fafc !important;
-  background-color: #248aaa !important;
+  color: #3c4858 !important;
+  background-color: #e5e9f2 !important;
   transition: all 0.3s ease-out;
 }
 
@@ -161,7 +215,7 @@ code {
     height: 200px;
   }
 
-  .content {
+  .page-content {
     padding: 0px;
   }
 

static/assets/js/single.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var isMobile = false, isTablet = false, isLaptop = false;
+(function ($) {
+  jQuery(document).ready(function () {
+    function detectDevice() {
+      if (window.innerWidth <= 425) {
+        isMobile = true;
+        isTablet = false;
+        isLaptop = false;
+      } else if (window.innerWidth <= 768) {
+        isMobile = false;
+        isTablet = true;
+        isLaptop = false;
+      } else {
+        isMobile = false;
+        isTablet = false;
+        isLaptop = true;
+      }
+    }
+    detectDevice();
+    console.log(isMobile);
+
+    // ======= Add table wrapper ===========
+    function adjustPostCardsHeight() {
+      if (!isMobile) { // no need to adjust height for mobile devices
+        let el = document.getElementById("post-cards").children;
+        let maxHeight = 0;
+        for (let i = 0; i < el.length; i++) {
+          if (el[i].children[0].clientHeight > maxHeight) {
+            maxHeight = el[i].children[0].clientHeight;
+          }
+        }
+        for (let i = 0; i < el.length; i++) {
+          el[i].children[0].setAttribute("style", "min-height: " + maxHeight + "px;")
+        }
+      }
+    }
+    adjustPostCardsHeight();
+
+    // ============= Sidebar Tre ================
+    function buildSidebarMenu() {
+      var openedClass = "fa-minus-circle";
+      var closedClass = "fa-plus-circle";
+      // initialize top level
+      var tree = $("#tree");
+      // add expand icon to those li who has ul as children
+      tree.find("li").has("ul").each(function () {
+        var branch = $(this);
+        branch.prepend('<i class="fas ' + closedClass + '"></i>');
+        branch.on('click', function (e) {
+          if (this.children[1] == e.target) {
+            // toggle "expand" class and icon
+            branch.toggleClass("expand");
+            var icon = $(this).children('i:first');
+            icon.toggleClass(openedClass + " " + closedClass);
+          }
+        });
+      });
+
+      // remove "expnad" class from siblings of the clicked item
+      tree.find("li").on("click", function () {
+        var item = $(this);
+        var shiblings = item.siblings().each(function () {
+          var sibling = $(this);
+          if (sibling.hasClass("expand")) {
+            sibling.removeClass("expand");
+            var icon = sibling.children('i:first');
+            icon.toggleClass(openedClass + " " + closedClass);
+          }
+        });
+      });
+
+      // focus the cliked item
+      tree.find("a").on("click", function () {
+        // clear other focused link
+        tree.find("a.focused").each(function () {
+          $(this).removeClass("focused");
+        });
+        // focus cliked link
+        $(this).addClass("focused");
+      });
+    }
+
+    buildSidebarMenu();
+    // initialize filterizr
+    filterizd = $(".filtr-container").filterizr({ layout: 'sameWidth' });
+  });
+})(jQuery);
+
+// toggle sidebar on click
+function toggleSidebar() {
+  document.getElementById("sidebar").classList.toggle("hide");
+  document.getElementById("content").classList.toggle("overley");
+
+  // if it is mobile device. then scroll to top.
+  if (isMobile && $("#sidebar").hasClass("hide")) {
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+  }
+
+  setTimeout(function () {
+    filterizd.filterizr('sort');
+  }, 300);
+}