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;
+    }
+}