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 {
/* 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 {
font-size: 20px;
.mind-global-navbar_primary li, .mind-global-navbar_secondary li {
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;
}
}

File diff suppressed because one or more lines are too long

View File

@ -12,11 +12,11 @@ function agreePolicyPopup() {
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
const name = cname + "=";
const decodedCookie = decodeURIComponent(document.cookie);
const ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; 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();
}

View File

@ -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 --}}

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>
{{#foreach related}}
<article class="{{post_class}}">

View File

@ -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>
{{!-- This gets automatically filled by the sidebar script! --}}
</div>
{{!-- This gets automatically filled by the sidebar script! --}}
</aside>
{{#post}}
<div class="mind-post_central-column">