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.
This commit is contained in:
Bea 2020-11-06 00:27:57 +01:00
parent ae728ffd9e
commit d8b54a00d9
6 changed files with 128 additions and 673 deletions

View File

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

File diff suppressed because one or more lines are too long

View File

@ -12,11 +12,11 @@ function agreePolicyPopup() {
} }
function getCookie(cname) { 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) === ' ') { while (c.charAt(0) === ' ') {
c = c.substring(1); c = c.substring(1);
} }
@ -28,9 +28,9 @@ function getCookie(cname) {
} }
function setCookie(name, value, days) { function setCookie(name, value, days) {
var expires = ""; let expires = "";
if (days) { if (days) {
var date = new Date(); const date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000)); date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString(); expires = "; expires=" + date.toUTCString();
} }

View File

@ -43,7 +43,9 @@
{{> "navbar-primary"}} {{> "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}}} {{{body}}}
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}} {{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}

View File

@ -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> <h4>Similar posts</h4>
{{#foreach related}} {{#foreach related}}
<article class="{{post_class}}"> <article class="{{post_class}}">

View File

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