Added script to make list of headers

Added a new script with the purpose of getting all headers from a post's content and creating links for them in the left sidebar.
Some div classes have been modified, and a wrapper div has been added to posts because of this new script.
Some minor CSS changes have been made.

assets/css/fonts.css

@@ -41,9 +41,9 @@
 @font-face {
     font-family: 'Roboto';
     font-style: normal;
-    font-weight: 400;
+    font-weight: 700;
     font-display: swap;
-    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+    src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 

assets/css/screen.css

@@ -54,6 +54,7 @@ html, body {
     color: white;
     width: 100%;
     background-color: #151515;
+    scroll-behavior: smooth;
 }
 
 a {
@@ -117,7 +118,7 @@ img {
     color: #2d0670;
 
     /*
-    We need RGBA because Chrome forces it to be semi-trasparent, making white look like grey.
+    We need RGBA because Chrome forces it to be semi-transparent, making white look like grey.
     By setting it to 99.5% opacity, we can override this. 100% does not work, however.
     */
     background: rgba(255, 255, 255, 0.995);
@@ -134,6 +135,7 @@ Used to define how every page is displayed.
 */
 
 main {
+    min-height: calc(100vh - 400px);
     display: block;
     box-sizing: border-box;
     width: 100%;
@@ -405,8 +407,7 @@ Used to style the tag feed, seen in the custom-tags page.
 
     /* Style */
     background-color: rgb(50, 50, 50);
-    border: 1px solid;
+    border: 1px solid transparent;
-    border-color: transparent;
     border-radius: 5px;
     box-shadow: 0 1px 1px black, 0 2px 4px black;
     transition: 0.5s;
@@ -536,7 +537,7 @@ footer.mind-post-card-big_footer {
 }
 
 .mind-post-card-sidebar_meta {
-    font-family: 'Open Sans';
+    font-family: 'Roboto', sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 12px;
@@ -632,12 +633,11 @@ instead of pages ".mind-page*".
 
 .mind-post-header div {
     /* Leave space for the floating arrow */
-    margin: 0;
+    margin: 0 0 70px;
-    margin-bottom: 70px;
 }
 
 .mind-post-header p {
-    font-family: 'Open Sans';
+    font-family: 'Roboto', sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     color: rgb(200, 200, 200);
@@ -703,7 +703,7 @@ img.mind-post_feature-image {
     margin: 0 20px 2em;
 }
 
-.mind-post_content {
+.mind-post_central-column {
     overflow: hidden; /* to hide, eg., overflowing code */
     padding: 0 60px;
     text-align: justify;
@@ -945,6 +945,28 @@ if an image has a description, class ".kg-card-hascaption" is applied to the con
 /* 5.4. Sidebar
 --------------------------------------------------
 */
+#mind-post_sidebar-left {
+}
+
+#mind-post_sidebar-left a {
+    color: white;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 300;
+    transition: 0.3s;
+}
+#mind-post_sidebar-left a:hover {
+    color: paleturquoise;
+}
+
+#mind-post_sidebar-left h2 {
+    font-size: 18px;
+    padding: 10px 0;
+}
+
+#mind-post_sidebar-left h3 {
+    font-size: 15px;
+    padding: 0 0 0 10px;
+}
 
 .mind-post_sidebar {
     padding: 0 20px;
@@ -1061,7 +1083,7 @@ div.mind-policy-popup {
 /* ANIMATED GRADIENT BACKGROUND */
 @keyframes gradient {
     0% {
-        background-position: 0%
+        background-position: 0
     }
     100% {
         background-position: 100%

assets/js/get-headers-list.js

@@ -0,0 +1,16 @@
+$(document).ready(function () {
+    const headers = $(".mind-post_content h2, .mind-post_content h3").toArray();
+    const sidebar = $("#mind-post_sidebar-left");
+
+    for (let i = 0; i < headers.length; i++) {
+        const currentHeader = headers[i];
+        const headerText = $(currentHeader).text();
+        const headerId = $(currentHeader).attr("id");
+        const headerType = $(currentHeader).prop("nodeName").toLowerCase();
+
+        // <h2> <a href="header-linke"> Header Name </a> </h2>
+        const newLine = "<" + headerType + "> <a href=\"#" + headerId + "\">" + headerText + "</a> </" + headerType + ">";
+        sidebar.append(newLine);
+    }
+});
+

default.hbs

@@ -13,6 +13,9 @@
         <script src="{{asset "js/policy-popup.js"}}"></script>
         <script src="{{asset "js/arrow-fade.js"}}" async></script>
         <script src="{{asset "js/scroll-navbar-color.js"}}"></script>
+        {{#is "post"}}
+            <script src="{{asset "js/get-headers-list.js"}}"></script>
+        {{/is}}
 
         {{!--  TODO: REMOVE ON PRODUCTION! --}}
         <script type="text/javascript" src="http://livejs.com/live.js"></script>

package.json

@@ -1,7 +1,7 @@
 {
     "name": "mindtheme",
     "description": "Mind Overflow's official website style",
-    "version": "0.0.7",
+    "version": "0.0.8",
     "engines": {
         "ghost-api": "v3"
     },

page.hbs

@@ -10,9 +10,9 @@
 
 <main>
     <div class="mind-content_main">
-        <div> {{!-- Keeping this div to have the same structure as the post.hbs, even though not necessary --}}
+        <div class="mind-post_central-column">
         {{#post}}
-            <div class="mind-post_content">
+            <div class="mind-post_content"> {{!-- Keeping this div to have the same structure as the post.hbs, even though not necessary --}}
                 <div class="mind-post_content-header">
 
                 {{#if feature_image}}

post.hbs

@@ -1,39 +1,48 @@
 {{!< default}}
 <div class="mind-post-header unselectable">
-  {{#post}}
+    {{#post}}
 
-<div>
+        <div>
-    <h1>{{title}}</h1>
+            <h1>{{title}}</h1>
-    <p><a class="mind-post-header_tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
+            <p><a class="mind-post-header_tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a> •
-</div>
+                <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
-  {{/post}}
+            </p>
-  <i class="mind-global-header_arrow-down mind-global-header_arrow-down-mid"></i>
+        </div>
+    {{/post}}
+    <i class="mind-global-header_arrow-down mind-global-header_arrow-down-mid"></i>
 </div>
 
 <main>
-	<div class="mind-content_main">
+    <div class="mind-content_main">
-    <div class="mind-post_main">
+        <div class="mind-post_main">
-      <aside class="mind-post_sidebar unselectable">
+            <aside class="mind-post_sidebar unselectable">
-      </aside>
+                <div class="mind-post_sidebar-content" id="mind-post_sidebar-left">
-      {{#post}}
-      <div class="mind-post_content">
-        <div class="mind-post_content-header">
 
-          {{#if feature_image}}
+                </div>
-              <img class="mind-post_feature-image" src="{{img_url feature_image size="l"}}" alt="Feature Image"/>
+                {{!-- This gets automatically filled by the sidebar script! --}}
-          {{/if}}
+            </aside>
+            {{#post}}
+                <div class="mind-post_central-column">
+                    <div class="mind-post_content">
+                        <div class="mind-post_content-header">
+
+                            {{#if feature_image}}
+                                <img class="mind-post_feature-image" src="{{img_url feature_image size="l"}}"
+                                     alt="Feature Image"/>
+                            {{/if}}
+                        </div>
+                        {{content}}
+                        <hr>
+                    </div>
+                    <h3>Comments</h3>
+                    <div id="remark42"></div>
+                </div>
+            {{/post}}
+            <aside class="mind-post_sidebar unselectable">
+                <div class="mind-post_sidebar-content">
+                    {{> "posts-card-small"}}
+                </div>
+            </aside>
         </div>
-        {{content}}
-        <hr>
-        <h3>Comments</h3>
-        <div id="remark42"></div>
-      </div>
-      {{/post}}
-      <aside class="mind-post_sidebar unselectable">
-        <div class="mind-post_sidebar-content">
-          {{> "posts-card-small"}}
-        </div>
-      </aside>
     </div>
-  </div>
 </main>