Proceed implementing responsive theme

The responsive theme is almost ready; most pages and elements now render correctly on the vast majority of screens. There are some known issues which are in the works.

Also, a <h4> "Paragraphs" title has been aded on the left navbar.

assets/css/screen.css

@@ -244,14 +244,14 @@ is applied by the script on scroll.
 
 .mind-global-navbar_primary li.nav-services {
     /* TODO: choose if background should be colorful or white */
-    background: linear-gradient(to right, #33ffc5 20%, #fc33ff, #ff3370, #ff3333, #3dff33, #33ffc5);
     /*background: white;*/
+    /*background: linear-gradient(to right, #33ffc5 20%, #fc33ff, #ff3370, #ff3333, #3dff33, #33ffc5);
     background-size: 800px, 800px;
     color: aquamarine;
     text-fill-color: transparent;
     animation: gradient 2s linear infinite;
     -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    -webkit-text-fill-color: transparent;*/
 }
 
 .mind-global-navbar_secondary {
@@ -1112,15 +1112,50 @@ div.mind-policy-popup {
     }
 }
 
+@media only screen and (max-width: 2000px)
+{
+    ul {
+        margin: 15px 0;
+    }
+}
 
 @media only screen and (max-width: 1300px) {
 
+    h1 {
+        font-size: 60px;
+    }
+
+    h2 {
+        font-size: 32px;
+    }
+
+    h3 {
+        font-size: 26px;
+    }
+
+    .mind-post-header p {
+        font-size: 13px;
+    }
+
     .mind-content_main {
         min-width: calc(100% - 40px);
         width: calc(100% - 40px);
         padding: 20px;
     }
 
+    .mind-post_central-column {
+        padding: 0 40px;
+        font-size: 17px;
+    }
+
+    .kg-gallery-image {
+        margin: 10px 10px;
+    }
+
+    .kg-gallery-row {
+        margin: 0 20px;
+    }
+
     .mind-post-card-big_main {
         margin: auto;
     }
@@ -1128,6 +1163,18 @@ div.mind-policy-popup {
 
 @media only screen and (max-width: 1000px) {
 
+    h1 {
+        font-size: 50px;
+    }
+
+    h2 {
+        font-size: 30px;
+    }
+
+    h3 {
+        font-size: 24px;
+    }
+
     h4 {
         font-size: 18px;
     }
@@ -1136,6 +1183,28 @@ div.mind-policy-popup {
         grid-template-columns: 1fr 1fr;
     }
 
+    .mind-post_main {
+        grid-template-columns: 1fr;
+    }
+
+    .mind-post_central-column {
+        padding: 0 20px;
+    }
+
+    .kg-gallery-image {
+        margin: 10px 5px;
+    }
+    .kg-gallery-row {
+        margin: 0 40px;
+    }
+
+    .mind-post_sidebar {
+        visibility: hidden;
+        height: 0;
+        max-height: 0;
+        overflow: hidden;
+    }
+
     .mind-policy-popup {
         width: 50vw;
         bottom: 10px;
@@ -1149,17 +1218,45 @@ div.mind-policy-popup {
 
 @media only screen and (max-width: 650px) {
 
+    h1 {
+        font-size: 40px;
+    }
+
+    h2 {
+        font-size: 26px;
+    }
+
+    h3 {
+        font-size: 21px;
+    }
+
+    .mind-post-header p {
+        font-size: 11px;
+    }
+
     ul {
         margin: 10px 0 10px auto;
         transition: .5s;
     }
 
-    .mind-global-navbar_primary li {
+    .mind-global-navbar_primary li, .mind-global-navbar_secondary li {
-        font-size: 20px;
+        font-size: 18px;
     }
 
     .mind-feed-content_main {
         grid-template-columns: 1fr;
+        min-width: calc(100% - 40px);
+        width: calc(100% - 40px);
+        padding: 20px;
+    }
+
+    .mind-content_main {
+        width: 100%;
+        padding: 0;
+    }
+
+    .mind-post_central-column {
+        font-size: 15px;
     }
 
     .mind-global-navbar_primary img {
@@ -1190,4 +1287,16 @@ div.mind-policy-popup {
     .mind-index-header_main h1 {
         font-size: 16vw;
     }
+
+    h2 {
+        font-size: 23px;
+    }
+
+    h3 {
+        font-size: 19px;
+    }
+
+    .mind-post_central-column {
+        font-size: 14px;
+    }
 }

assets/js/policy-popup.js

@@ -12,11 +12,11 @@ function agreePolicyPopup() {
 }
 
 function getCookie(cname) {
-    var name = cname + "=";
+    const name = cname + "=";
-    var decodedCookie = decodeURIComponent(document.cookie);
+    const decodedCookie = decodeURIComponent(document.cookie);
-    var ca = decodedCookie.split(';');
+    const ca = decodedCookie.split(';');
-    for(var i = 0; i <ca.length; i++) {
+    for(let i = 0; i <ca.length; i++) {
-        var c = ca[i];
+        let c = ca[i];
         while (c.charAt(0) === ' ') {
             c = c.substring(1);
         }
@@ -28,9 +28,9 @@ function getCookie(cname) {
 }
 
 function setCookie(name, value, days) {
-    var expires = "";
+    let expires = "";
     if (days) {
-        var date = new Date();
+        const date = new Date();
         date.setTime(date.getTime() + (days*24*60*60*1000));
         expires = "; expires=" + date.toUTCString();
     }

default.hbs

@@ -43,7 +43,9 @@
 
         {{> "navbar-primary"}}
 
-        {{> "policy-popup"}}
+        {{> "policy-popup"}} {{!-- Todo: maybe we shouldn't include the whole HTML in every page (hidden)
+        and then show it via JS, but instead only inject it when needed via JS. This is because search
+        engines might scan the policy popup too. --}}
 
         {{{body}}}
         {{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}

partials/posts-card-small.hbs

@@ -1,4 +1,5 @@
-{{#get "posts" limit="3" filter="tags:[{{post.tags}}]+id:-{{post.id}}" include="tags" as |related|}}
+{{!-- Gest the 3 most recent related posts --}}
+{{#get "posts" limit="3" filter="id:-{{post.id}}+tags:[{{post.tags}}]" include="tags" as |related|}}
     <h4>Similar posts</h4>
     {{#foreach related}}
         <article class="{{post_class}}">

post.hbs

@@ -17,9 +17,9 @@
         <div class="mind-post_main">
             <aside class="mind-post_sidebar unselectable">
                 <div class="mind-post_sidebar-content" id="mind-post_sidebar-left">
-
+                    <h4>Paragraphs</h4>
-                </div>
                     {{!-- This gets automatically filled by the sidebar script! --}}
+                </div>
             </aside>
             {{#post}}
                 <div class="mind-post_central-column">