assets/css/style.css

@@ -82,6 +82,22 @@ h6,
   font-size: 14px;
 }
 
+#title {
+  font-size: 32px;
+}
+
+.content h2 {
+  font-size: 26px;
+}
+
+.content h3 {
+  font-size: 20px;
+}
+
+.content h4 {
+  font-size: 18px;
+}
+
 /* Button style */
 .btn {
   font-size: 14px;
@@ -621,9 +637,9 @@ textarea.form-control {
 }
 
 /* this is so that the header does not overlap the section title */
+.content h2:before,
 .content h3:before,
-.content h4:before,
+.content h4:before {
-.content h5:before {
   display: block;
   content: "";
   height: 75px;
@@ -636,9 +652,9 @@ textarea.form-control {
   margin-left: 10px;
 }
 
+.content h2:hover .title-link,
 .content h3:hover .title-link,
-.content h4:hover .title-link,
+.content h4:hover .title-link {
-.content h5:hover .title-link {
   opacity: 1;
 }
 

assets/js/script.js

@@ -129,7 +129,7 @@
 
 
   // table of contents
-  $('h3, h4, h5', '.content').each(function () {
+  $('h2, h3, h4', '.content').each(function () {
     $(this).append('<a class="title-link" href="#' + $(this).attr('id') + '">#</a>');
   });
 

layouts/partials/default.html

@@ -30,7 +30,7 @@
       </div>
       <div class="col-lg-8">
         <div class="p-lg-5 p-4 bg-white" id="content">
-          <h2 class="mb-5" id="title">{{ partial "title.html" . }}</h2>
+          <h1 class="mb-5" id="title">{{ partial "title.html" . }}</h1>
           {{ if .Content }}
             <div class="content">
               {{ if isset .Params "status" }}