Convert list page into hugo templates

static/assets/css/list.css

@@ -43,6 +43,10 @@
   position: fixed;
 }
 
+#list-heading{
+  padding-left: 0px!important;
+}
+
 .tree,
 .tree ul {
   margin: 0;
@@ -52,7 +56,7 @@
 }
 
 .tree ul {
-  margin-left: 1em;
+  margin-left: 0.5rem;
   position: relative;
 }
 
@@ -65,12 +69,27 @@
   display: block;
   width: 0;
   position: absolute;
-  top: -17px;
+  top: -20px;
   left: -3px;
   bottom: 16px;
   border-left: 1px solid;
 }
 
+.subtree{
+  padding-left: 0.7rem;
+}
+
+.subtree:before{
+  content: "";
+  display: block;
+  width: 0;
+  position: absolute;
+  top: 6.5rem;
+  left: 0.5rem;
+  bottom: 16px;
+  border-left: 1px solid;
+}
+
 .tree li {
   margin: 0;
   padding: 0 1em;
@@ -80,10 +99,10 @@
   position: relative;
 }
 
-.tree ul li:before {
+.subtree li:before {
   content: "";
   display: block;
-  width: 16px;
+  width: 20px;
   height: 0;
   border-top: 1px solid;
   margin-top: -1px;
@@ -92,7 +111,7 @@
   left: -3px;
 }
 
-.tree ul li:last-child:before {
+.subtree li:last-child:before {
   background: #f9fafc;
   height: auto;
   top: 1em;

static/assets/css/single.css

@@ -1,3 +1,6 @@
+body{
+  background-color: #e5e9f2;
+}
 .read-area {
   background-color: #f9fafc;
 }
@@ -7,7 +10,7 @@
 }
 
 .hero-area {
-  margin-top: 50px;
+  margin-top: 3.5rem;
   width: 100%;
   height: 400px;
   background-position: center;

static/assets/js/list.js

@@ -26,7 +26,11 @@ var isMobile = false, isTablet = false, isLaptop = false;
     // ======= Adjust height of the post cards =============
     function adjustPostCardsHeight() {
       if (!isMobile) { // no need to adjust height for mobile devices
-        let el = document.getElementById("post-cards").children;
+        let postCardHolder = document.getElementById("post-cards");
+        if (postCardHolder == null ){
+          return
+        }
+        let el = postCardHolder.children;
         let maxHeight = 0;
         for (let i = 0; i < el.length; i++) {
           if (el[i].children[0].clientHeight > maxHeight) {