Start responsive design implementation

This commit brings a big update to the screen.css file, making the homepage + policy popup almost 100% responsive.
Another added feature is in the left sidebar: the currently viewed paragraph's title is now highlighted.

assets/css/screen.css

@@ -143,6 +143,7 @@ main {
 }
 
 .mind-content_main {
+    padding: 0 20px;
     max-width: 1260px;
     width: 1260px;
     margin: auto;
@@ -153,6 +154,17 @@ main {
 --------------------------------------------------
 Used to style the navigation bars.
 */
+
+ul {
+    display: block;
+    list-style-type: disc;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    padding-inline-start: 40px;
+}
+
 .nav {
     width: 100%;
     padding: 0;
@@ -356,9 +368,10 @@ Used to style the index/homepage.
 }
 
 .mind-index-header_main h1 {
-    margin-top: 100px;
+    margin: 100px 40px 0;
     padding: 0;
     font-size: 90px;
+    line-height: 17vw;
 }
 
 /* 3. Feeds
@@ -403,6 +416,7 @@ Used to style the tag feed, seen in the custom-tags page.
     flex-direction: column;
     height: 100%;
     width: 100%;
+    max-width: 400px;
     box-sizing: border-box;
 
     /* Style */
@@ -949,11 +963,15 @@ if an image has a description, class ".kg-card-hascaption" is applied to the con
 }
 
 #mind-post_sidebar-left a {
-    color: white;
+    color: rgb(230, 230, 230);
     font-family: 'Open Sans', sans-serif;
     font-weight: 300;
-    transition: 0.3s;
 }
+
+#mind-post_sidebar-left a.current {
+    font-weight: 700;
+}
+
 #mind-post_sidebar-left a:hover {
     color: paleturquoise;
 }
@@ -1018,7 +1036,7 @@ if an image has a description, class ".kg-card-hascaption" is applied to the con
 .mind-policy-popup p {
     font-family: 'Montserrat', sans-serif;
     font-weight: 200;
-    color: white;
+    color: rgb(220, 220, 220);
     font-size: 16px;
 }
 
@@ -1089,3 +1107,68 @@ div.mind-policy-popup {
         background-position: 100%
     }
 }
+
+
+@media only screen and (max-width: 1300px) {
+
+    .mind-content_main {
+        min-width: calc(100% - 40px);
+        width: calc(100% - 40px);
+        padding: 20px;
+    }
+
+    .mind-post-card-big_main {
+        margin: auto;
+    }
+}
+
+@media only screen and (max-width: 1000px) {
+
+    h4 {
+        font-size: 18px;
+    }
+
+    .mind-feed-content_main {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .mind-policy-popup {
+        width: 50vw;
+        bottom: 10px;
+        left: 10px;
+    }
+
+    .mind-policy-popup button {
+        padding: 10px 20px;
+    }
+}
+
+@media only screen and (max-width: 650px) {
+
+    ul {
+        padding: 0;
+    }
+
+    .mind-feed-content_main {
+        grid-template-columns: 1fr;
+    }
+
+    .mind-policy-popup {
+        width: 90vw;
+    }
+
+    .mind-policy-popup p {
+        font-size: 12px;
+    }
+
+    .mind-policy-popup button {
+        font-size: 12px;
+    }
+
+}
+
+@media only screen and (max-width: 550px) {
+    .mind-index-header_main h1 {
+        font-size: 16vw;
+    }
+}

assets/js/get-headers-list.js

@@ -1,5 +1,8 @@
+let headers;
+let sidebarLinks;
+
 $(document).ready(function () {
-    const headers = $(".mind-post_content h2, .mind-post_content h3").toArray();
+    headers = $(".mind-post_content h2, .mind-post_content h3").toArray();
     const sidebar = $("#mind-post_sidebar-left");
 
     for (let i = 0; i < headers.length; i++) {
@@ -12,5 +15,25 @@ $(document).ready(function () {
         const newLine = "<" + headerType + "> <a href=\"#" + headerId + "\">" + headerText + "</a> </" + headerType + ">";
         sidebar.append(newLine);
     }
-});
 
+    sidebarLinks = $("#mind-post_sidebar-left a").toArray();
+});
+$(function () {
+    $(window).scroll(function () {
+        let bottomScroll = $(window).scrollTop() + ($(window).height() / 2);
+        let found = false;
+
+        for (let i = headers.length - 1; i >= 0; i--) {
+            const currentHeader = headers[i];
+            const currentSidebarLink = sidebarLinks[i];
+            $(currentSidebarLink).removeClass("current");
+
+            const headerVPPosition = $(currentHeader).offset().top;
+
+            if (!found && bottomScroll > headerVPPosition) {
+                $(currentSidebarLink).addClass("current");
+                found = true;
+            }
+        }
+    });
+});