began structuring index page. posts now show correctly on a 1920x1080 screen.

This commit is contained in:
Bea 2020-08-13 14:23:29 +02:00
parent 359e6108c9
commit 3b02a75451
13 changed files with 2756 additions and 2647 deletions

249
assets/css/home-style.css Normal file → Executable file
View File

@ -1,99 +1,150 @@
@charset "utf-8"; @charset "utf-8";
/* CSS Document */ /* CSS Document */
h1 { h1 {
font-size: 90px; font-size: 90px;
margin-top: 20px; margin-top: 20px;
} }
.mind-site-title { .mind-site-title {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0%; margin: 0%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667); background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
background-size: 1000%, 100%; background-size: 1000%, 100%;
animation: gradient 7s linear infinite; animation: gradient 7s linear infinite;
animation-direction: alternate-reverse; animation-direction: alternate-reverse;
} }
.mind-site-title h1 { .mind-site-title h1 {
position: absolute; position: absolute;
} }
.mind-articles-container { .mind-feed {
width: 100%; /* todo: move to generic class */
text-align: center; margin: auto;
} width: 1260px;
box-sizing: border-box;
article {
display: inline-block; max-width: 100%;
width: 500px; display: grid;
margin: 2%; grid-template-columns: 1fr 1fr 1fr;
vertical-align: top; grid-gap: 30px;
text-align: left; padding-bottom: 50px;
} }
/* ANIMATED GRADIENT BACKGROUND */ .post-card {
@keyframes gradient { display: flex;
0% {background-position: 0%} flex-direction: column;
100% {background-position: 100%} height: 100%;
} width: 100%;
padding: 20px;
/*MOBILE*/
@media (min-width: 0px) and (max-width: 200px) { box-sizing: border-box;
/* Style */
h1 { background-color: rgb(50, 50, 50);
font-size: 20px; border: 1px solid;
} border-color: transparent;
} border-radius: 5px;
box-shadow: 0 1px 1px black, 0 2px 4px black;
@media (min-width: 200px) and (max-width: 300px) { transition: 0.5s;
}
h1 {
font-size: 39px; .post-card:hover {
} transform:translate3d(0,-5px,0);
} box-shadow: 1px 3px 15px 2px black;
}
@media (min-width: 300px) and (max-width: 400px) {
a.post-card {
h1 { color: white;
font-size: 52px; }
}
} a.post-card:hover {
text-decoration: none;
@media (min-width: 400px) and (max-width: 500px) { }
h1 { footer.post-meta {
font-size: 64px; display: flex;
} align-items: center;
} justify-content: flex-end;
@media (min-width: 500px) and (max-width: 600px) { }
h1 { article {
font-size: 64px; box-sizing: border-box;
} }
}
@media (min-width: 600px) and (max-width: 700px) { .post-card_profile-image {
border-radius: 20%;
h1 { margin-left: 10px;
font-size: 76px; max-width: 30px;
} }
}
@media (min-width: 700px) and (max-width: 1000px) { .post-card_feature-image {
border-radius: 5px;
h1 { width: 100%;
font-size: 80px; }
}
} /* ANIMATED GRADIENT BACKGROUND */
@keyframes gradient {
/* 4K+ MONITORS*/ 0% {background-position: 0%}
@media (min-width: 2100px) { 100% {background-position: 100%}
}
h1 {
font-size: 180px; /*MOBILE*/
} @media (min-width: 0px) and (max-width: 200px) {
}
h1 {
font-size: 20px;
}
}
@media (min-width: 200px) and (max-width: 300px) {
h1 {
font-size: 39px;
}
}
@media (min-width: 300px) and (max-width: 400px) {
h1 {
font-size: 52px;
}
}
@media (min-width: 400px) and (max-width: 500px) {
h1 {
font-size: 64px;
}
}
@media (min-width: 500px) and (max-width: 600px) {
h1 {
font-size: 64px;
}
}
@media (min-width: 600px) and (max-width: 700px) {
h1 {
font-size: 76px;
}
}
@media (min-width: 700px) and (max-width: 1000px) {
h1 {
font-size: 80px;
}
}
/* 4K+ MONITORS*/
@media (min-width: 2100px) {
h1 {
font-size: 180px;
}
}

298
assets/css/page-style.css Normal file → Executable file
View File

@ -1,155 +1,143 @@
@charset "utf-8"; @charset "utf-8";
/* CSS Document */ /* CSS Document */
html, body { html, body {
background-color: black; background-color: black;
} }
h1 { h1 {
font-size: 120px; font-size: 120px;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
padding-left: 5%; padding-left: 5%;
padding-right: 5%; padding-right: 5%;
bottom: 10%; bottom: 10%;
} }
.mind-fullscreen-title { .mind-fullscreen-title {
height: 100%; height: 100%;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
.mind-fullscreen-title h1 { .mind-fullscreen-title h1 {
position: absolute; position: absolute;
width: 100%; width: 100%;
bottom: 10%; bottom: 10%;
} }
/* COLORED TEXT SELECTION */ /* ANIMATED GRADIENT BACKGROUND */
::selection { @keyframes gradient {
color: #2d0670; 0% {background-position: 0%}
100% {background-position: 100%}
}
/*
We need RGBA because Chrome forces it to be semi-trasparent, making white look like grey. /*MOBILE*/
By setting it to 99.5% opacity, we can override this. 100% does not work, however. @media (min-width: 0px) and (max-width: 200px) {
*/
background: rgba(255, 255, 255, 0.995); h1 {
} font-size: 20px;
}
/* ANIMATED GRADIENT BACKGROUND */ h2 {
@keyframes gradient { font-size: 15px;
0% {background-position: 0%} padding-top: 20px;
100% {background-position: 100%} }
} li {
padding: 5px;
/*MOBILE*/ }
@media (min-width: 0px) and (max-width: 200px) { }
h1 { @media (min-width: 200px) and (max-width: 300px) {
font-size: 20px;
} h1 {
h2 { font-size: 39px;
font-size: 15px; }
padding-top: 20px; h2 {
} font-size: 18px;
li { padding-top: 25px;
padding: 5px; }
} h3 {
} font-size: 16px;
padding-top: 25px;
@media (min-width: 200px) and (max-width: 300px) { }
li {
h1 { padding: 6px;
font-size: 39px; }
} }
h2 {
font-size: 18px; @media (min-width: 300px) and (max-width: 400px) {
padding-top: 25px;
} h1 {
h3 { font-size: 52px;
font-size: 16px; }
padding-top: 25px; h2 {
} font-size: 21px;
li { padding-top: 28px;
padding: 6px; }
} h3 {
} font-size: 19px;
padding-top: 28px;
@media (min-width: 300px) and (max-width: 400px) { }
li {
h1 { padding: 8px;
font-size: 52px; }
} }
h2 {
font-size: 21px; @media (min-width: 400px) and (max-width: 500px) {
padding-top: 28px;
} h1 {
h3 { font-size: 64px;
font-size: 19px; }
padding-top: 28px; h2 {
} font-size: 25px;
li { padding-top: 31px;
padding: 8px; }
} h3 {
} font-size: 22px;
padding-top: 31px;
@media (min-width: 400px) and (max-width: 500px) { }
li {
h1 { padding: 10px;
font-size: 64px; }
} }
h2 { @media (min-width: 500px) and (max-width: 600px) {
font-size: 25px;
padding-top: 31px; h1 {
} font-size: 80px;
h3 { }
font-size: 22px; h2 {
padding-top: 31px; font-size: 30px;
} }
li { h3 {
padding: 10px; font-size: 25px;
} }
} li {
@media (min-width: 500px) and (max-width: 600px) { padding: 13px;
}
h1 { }
font-size: 80px; @media (min-width: 600px) and (max-width: 700px) {
}
h2 { h1 {
font-size: 30px; font-size: 95px;
} }
h3 { h2 {
font-size: 25px; font-size: 35px;
} }
li { h3 {
padding: 13px; font-size: 30px;
} }
} }
@media (min-width: 600px) and (max-width: 700px) { /* 4K+ MONITORS*/
@media (min-width: 2100px) {
h1 {
font-size: 95px; h1 {
} font-size: 150px;
h2 { }
font-size: 35px; h2 {
} font-size: 45px;
h3 { padding: 40px;
font-size: 30px; }
} li {
} padding: 20px;
/* 4K+ MONITORS*/ }
@media (min-width: 2100px) { }
h1 {
font-size: 150px;
}
h2 {
font-size: 45px;
padding: 40px;
}
li {
padding: 20px;
}
}

1164
assets/css/screen.css Normal file → Executable file

File diff suppressed because it is too large Load Diff

20
assets/js/arrow-fade.js Normal file → Executable file
View File

@ -1,10 +1,10 @@
// JavaScript Document // JavaScript Document
$(document).ready(function(){ $(document).ready(function(){
$(window).scroll(function(){ $(window).scroll(function(){
if($(this).scrollTop() > $(window).height()*0.3){ if($(this).scrollTop() > $(window).height()*0.3){
$(".arrow-down").css({"opacity" : "0"}); $(".arrow-down").css({"opacity" : "0"});
} else { } else {
$(".arrow-down").css({"opacity" : "0.4"}); $(".arrow-down").css({"opacity" : "0.4"});
} }
}) })
}) })

1316
assets/js/jquery-3.5.1.js vendored Normal file → Executable file

File diff suppressed because it is too large Load Diff

76
assets/js/policy-popup.js Normal file → Executable file
View File

@ -1,38 +1,38 @@
function openPolicyPopup() { function openPolicyPopup() {
if(getCookie("consentGiven") === "true") return; if(getCookie("consentGiven") === "true") return;
$("#mind-policy-popup").fadeIn(1000); // Enable the div $("#mind-policy-popup").fadeIn(1000); // Enable the div
} }
function agreePolicyPopup() { function agreePolicyPopup() {
const _paq = window._paq || []; const _paq = window._paq || [];
_paq.push(['rememberConsentGiven', 43800]); _paq.push(['rememberConsentGiven', 43800]);
$("#mind-policy-popup").fadeOut(1000); // Disable the div $("#mind-policy-popup").fadeOut(1000); // Disable the div
setCookie("consentGiven", "true", 1825) // todo: check if already present? also, firefox was throwing a warning... setCookie("consentGiven", "true", 1825) // todo: check if already present? also, firefox was throwing a warning...
} }
function getCookie(cname) { function getCookie(cname) {
var name = cname + "="; var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie); var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';'); var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) { for(var i = 0; i <ca.length; i++) {
var c = ca[i]; var c = ca[i];
while (c.charAt(0) === ' ') { while (c.charAt(0) === ' ') {
c = c.substring(1); c = c.substring(1);
} }
if (c.indexOf(name) === 0) { if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length); return c.substring(name.length, c.length);
} }
} }
return ""; return "";
} }
function setCookie(name, value, days) { function setCookie(name, value, days) {
var expires = ""; var expires = "";
if (days) { if (days) {
var date = new Date(); var 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();
} }
document.cookie = name + "=" + (value || "") + expires + "; path=/;SameSite=Lax"; document.cookie = name + "=" + (value || "") + expires + "; path=/;SameSite=Lax";
} }

View File

@ -0,0 +1,45 @@
var scroll_pos = 0;
var transparent = true;
var offset = 100;
function makeTransparent()
{
$("#navbar").removeClass('navbar-colored').addClass('navbar-transparent');
transparent = true;
}
function makeOpaque()
{
$("#navbar").removeClass('navbar-transparent').addClass('navbar-colored');
transparent = false;
}
$(document).ready(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > offset)
{
makeOpaque();
}
else
{
makeTransparent();
}
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(transparent)
{
if(scroll_pos > offset)
{
makeOpaque();
}
}
else
{
if(scroll_pos <= offset)
{
makeTransparent();
}
}
});
});

File diff suppressed because one or more lines are too long

133
default.hbs Normal file → Executable file
View File

@ -1,62 +1,71 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{@site.lang}}"> <html lang="{{@site.lang}}">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" /> <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
<!-- Scripts Begin --> <!-- Scripts Begin -->
<script src="{{asset "js/jquery-3.5.1.js"}}"></script> <script src="{{asset "js/jquery-3.5.1.js"}}"></script>
<script src="{{asset "js/policy-popup.js"}}"></script> <script src="{{asset "js/policy-popup.js"}}"></script>
<script src="{{asset "js/arrow-fade.js"}}" async></script> <script src="{{asset "js/arrow-fade.js"}}" async></script>
<!-- Scripts End --> <script src="{{asset "js/scroll-navbar-color.js"}}"></script>
<!-- Begin Posts & Pages only code --> <!-- TODO: REMOVE ON PRODUCTION! -->
{{#is "post, page"}} <script type="text/javascript" src="http://livejs.com/live.js"></script>
<link rel="stylesheet" type="text/css" href="{{asset "css/page-style.css"}}" /> <!-- Scripts End -->
<title>{{@site.title}} - {{meta_title}}</title> <!-- Begin Posts & Pages only code -->
{{#is "post, page"}}
{{/is}}
<!-- End Posts & Pages only code --> <link rel="stylesheet" type="text/css" href="{{asset "css/page-style.css"}}" />
<!-- Begin Index only code --> <title>{{@site.title}} - {{meta_title}}</title>
{{#is "index"}}
<title>{{meta_title}}</title> {{/is}}
<!-- End Posts & Pages only code -->
<link rel="stylesheet" type="text/css" href="{{asset "css/home-style.css"}}" />
{{/is}} <!-- Begin Index only code -->
<!-- End Index only code --> {{#is "index"}}
<title>{{meta_title}}</title>
{{ghost_head}} <link rel="stylesheet" type="text/css" href="{{asset "css/home-style.css"}}" />
{{!-- Outputs important meta data and settings, should always be in <head> --}} {{/is}}
<!-- End Index only code -->
</head>
<body class="{{body_class}}" onload="openPolicyPopup()"> {{ghost_head}}
<div class="mind-policy-popup" id="mind-policy-popup"> {{!-- Outputs important meta data and settings, should always be in <head> --}}
<h4>This website uses cookies.</h4>
<p>We use cookies to ensure you the best experience. </head>
<br> <body class="{{body_class}}" onload="openPolicyPopup()">
By visiting our website, you agree with our <a href="/pages/policy.html" target="_blank">Privacy Policy</a>.
</p> <div id="navbar" class="navbar unselectable">
<button onclick="agreePolicyPopup()">Ok, understood</button> {{navigation}}
</div> </div>
{{{body}}} <div class="mind-policy-popup" id="mind-policy-popup">
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}} <h4>This website uses cookies.</h4>
<p>We use cookies to ensure you the best experience.
<br>
<footer class="unselectable"> By visiting our website, you agree with our <a href="/pages/policy.html" target="_blank">Privacy Policy</a>.
<h4>Copyright © 2019-20 ― Lorenzo Dellacà</h4> </p>
</footer> <button onclick="agreePolicyPopup()">Ok, understood</button>
</div>
{{!-- <foot> --}}
{{ghost_foot}} {{{body}}}
{{!-- Outputs important scripts - should always be included before closing body tag --}} {{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}
</body>
</html>
<footer class="mind-site-footer unselectable">
<h4>Copyright © 2019-20 ― Lorenzo Dellacà</h4>
</footer>
{{!-- <foot> --}}
{{ghost_foot}}
{{!-- Outputs important scripts - should always be included before closing body tag --}}
</body>
</html>

112
index.hbs Normal file → Executable file
View File

@ -1,58 +1,54 @@
{{!< default}} {{!< default}}
<div class="navbar unselectable">
{{navigation}} <div class="mind-site-title unselectable" id="vantajs">
</div> <h1>{{@site.title}}</h1>
<i class="arrow-down"></i>
<div class="mind-site-title unselectable" id="vantajs"> </div>
<h1>{{@site.title}}</h1>
<i class="arrow-down"></i>
</div> <main class="mind-index">
<h2>Last posts</h2>
<div class="mind-feed">
<main>
<div class="mind-content"> <!-- Looping through every post -->
<h2>Last posts</h2> {{#foreach posts}}
<article class="{{post_class}}">
<div class="mind-articles-container"> <a class="post-card" href="{{url}}">
<!-- Looping through every post --> <header class="post-header">
{{#foreach posts}} <img class="post-card_feature-image" src="{{feature_image}}" />
<article class="{{post_class}}"> <h3>{{title}}</h3>
<header class="post-header"> </header>
<h3><a href="{{url}}">{{title}}</a></h3> <section class="post-excerpt">
</header> <p>{{excerpt words="26"}}</p>
<section class="post-excerpt"> </section>
<p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">...</a></p> <footer class="post-meta">
</section> {{primary_author.name}}
<footer class="post-meta"> {{#if primary_author.profile_image}}<img class="post-card_profile-image" src="{{primary_author.profile_image}}" alt="Author image" />{{/if}}
{{#if primary_author.profile_image}}<img src="{{primary_author.profile_image}}" alt="Author image" />{{/if}} </footer>
{{primary_author}} </a>
{{tags prefix=" on "}} </article>
<time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time> {{/foreach}}
</footer> </div>
</article> </main>
{{/foreach}}
</div> <!-- Vanta.JS Scripts to make the background cool, but disabled on mobile -->
</div> <script>
</main> if(window.screen.width > 800)
{
<!-- Vanta.JS Scripts to make the background cool, but disabled on mobile --> document.write('<script src="{{asset "js/three.r95.min.js"}}"><\/script>' +
<script> '<script src="{{asset "js/vanta.net.min.js"}}"><\/script>' +
if(window.screen.width > 800) '<script>' +
{ 'VANTA.NET({'+
document.write('<script src="{{asset "js/three.r95.min.js"}}"><\/script>' + 'el: "#vantajs",'+
'<script src="{{asset "js/vanta.net.min.js"}}"><\/script>' + 'color: 0x3fd5ff,'+
'<script>' + 'backgroundColor: 0x190f2b,'+
'VANTA.NET({'+ 'mouseControls: true,'+
'el: "#vantajs",'+ 'touchControls: true,'+
'color: 0x3fd5ff,'+ 'minHeight: 200.00,'+
'backgroundColor: 0x190f2b,'+ 'minWidth: 200.00,'+
'mouseControls: true,'+ 'scale: 1.00,'+
'touchControls: true,'+ 'scaleMobile: 1.00'+
'minHeight: 200.00,'+ '})'+
'minWidth: 200.00,'+ '<\/script>');
'scale: 1.00,'+ }
'scaleMobile: 1.00'+ </script>
'})'+
'<\/script>');
}
</script>

34
package.json Normal file → Executable file
View File

@ -1,17 +1,17 @@
{ {
"name": "mindtheme", "name": "mindtheme",
"description": "Mind Overflow's official website style", "description": "Mind Overflow's official website style",
"version": "0.0.2", "version": "0.0.2",
"engines": { "engines": {
"ghost-api": "v3" "ghost-api": "v3"
}, },
"keywords": ["ghost-theme"], "keywords": ["ghost-theme"],
"license": "Copyright", "license": "Copyright",
"author": { "author": {
"email": "lorenzo.dellaca@mind-overflow.net" "email": "lorenzo.dellaca@mind-overflow.net"
}, },
"config": { "config": {
"posts_per_page": 10, "posts_per_page": 10,
"image_sizes": {} "image_sizes": {}
} }
} }

29
page.hbs Normal file → Executable file
View File

@ -1,16 +1,13 @@
{{!< default}} {{!< default}}
{{#post}} {{#post}}
<div class="navbar unselectable"> <div class="mind-fullscreen-title unselectable">
{{navigation}} <h1>{{title}}</h1>
</div> <i class="arrow-down"></i>
<div class="mind-fullscreen-title unselectable"> </div>
<h1>{{title}}</h1>
<i class="arrow-down"></i> <main>
</div> <div class="mind-content">
{{content}}
<main> </div>
<div class="mind-content"> </main>
{{content}} {{/post}}
</div>
</main>
{{/post}}

29
post.hbs Normal file → Executable file
View File

@ -1,16 +1,13 @@
{{!< default}} {{!< default}}
{{#post}} {{#post}}
<div class="navbar unselectable"> <div class="mind-fullscreen-title unselectable">
{{navigation}} <h1>{{title}}</h1>
</div> <i class="arrow-down"></i>
<div class="mind-fullscreen-title unselectable"> </div>
<h1>{{title}}</h1>
<i class="arrow-down"></i> <main>
</div> <div class="mind-content">
{{content}}
<main> </div>
<div class="mind-content"> </main>
{{content}} {{/post}}
</div>
</main>
{{/post}}