began structuring index page. posts now show correctly on a 1920x1080 screen.
This commit is contained in:
Lorenzo Dellacà
249
assets/css/home-style.css
Normal file → Executable file
249
assets/css/home-style.css
Normal file → Executable file
@@ -1,99 +1,150 @@
|
||||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
|
||||
h1 {
|
||||
font-size: 90px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.mind-site-title {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
|
||||
background-size: 1000%, 100%;
|
||||
animation: gradient 7s linear infinite;
|
||||
animation-direction: alternate-reverse;
|
||||
}
|
||||
|
||||
.mind-site-title h1 {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mind-articles-container {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
article {
|
||||
display: inline-block;
|
||||
width: 500px;
|
||||
margin: 2%;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* ANIMATED GRADIENT BACKGROUND */
|
||||
@keyframes gradient {
|
||||
0% {background-position: 0%}
|
||||
100% {background-position: 100%}
|
||||
}
|
||||
|
||||
/*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;
|
||||
}
|
||||
}
|
||||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
|
||||
h1 {
|
||||
font-size: 90px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.mind-site-title {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
|
||||
background-size: 1000%, 100%;
|
||||
animation: gradient 7s linear infinite;
|
||||
animation-direction: alternate-reverse;
|
||||
}
|
||||
|
||||
.mind-site-title h1 {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mind-feed {
|
||||
/* todo: move to generic class */
|
||||
margin: auto;
|
||||
width: 1260px;
|
||||
box-sizing: border-box;
|
||||
|
||||
max-width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 30px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.post-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
|
||||
box-sizing: border-box;
|
||||
/* Style */
|
||||
background-color: rgb(50, 50, 50);
|
||||
border: 1px solid;
|
||||
border-color: transparent;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 1px black, 0 2px 4px black;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.post-card:hover {
|
||||
transform:translate3d(0,-5px,0);
|
||||
box-shadow: 1px 3px 15px 2px black;
|
||||
}
|
||||
|
||||
a.post-card {
|
||||
color: white;
|
||||
}
|
||||
|
||||
a.post-card:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer.post-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
article {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.post-card_profile-image {
|
||||
border-radius: 20%;
|
||||
margin-left: 10px;
|
||||
max-width: 30px;
|
||||
}
|
||||
|
||||
.post-card_feature-image {
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ANIMATED GRADIENT BACKGROUND */
|
||||
@keyframes gradient {
|
||||
0% {background-position: 0%}
|
||||
100% {background-position: 100%}
|
||||
}
|
||||
|
||||
/*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
298
assets/css/page-style.css
Normal file → Executable file
@@ -1,155 +1,143 @@
|
||||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
|
||||
html, body {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 120px;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
bottom: 10%;
|
||||
}
|
||||
|
||||
.mind-fullscreen-title {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mind-fullscreen-title h1 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 10%;
|
||||
}
|
||||
|
||||
/* COLORED TEXT SELECTION */
|
||||
::selection {
|
||||
color: #2d0670;
|
||||
|
||||
|
||||
/*
|
||||
We need RGBA because Chrome forces it to be semi-trasparent, making white look like grey.
|
||||
By setting it to 99.5% opacity, we can override this. 100% does not work, however.
|
||||
*/
|
||||
background: rgba(255, 255, 255, 0.995);
|
||||
}
|
||||
|
||||
/* ANIMATED GRADIENT BACKGROUND */
|
||||
@keyframes gradient {
|
||||
0% {background-position: 0%}
|
||||
100% {background-position: 100%}
|
||||
}
|
||||
|
||||
/*MOBILE*/
|
||||
@media (min-width: 0px) and (max-width: 200px) {
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 15px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
li {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 200px) and (max-width: 300px) {
|
||||
|
||||
h1 {
|
||||
font-size: 39px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
li {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 300px) and (max-width: 400px) {
|
||||
|
||||
h1 {
|
||||
font-size: 52px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 21px;
|
||||
padding-top: 28px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 19px;
|
||||
padding-top: 28px;
|
||||
}
|
||||
li {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 400px) and (max-width: 500px) {
|
||||
|
||||
h1 {
|
||||
font-size: 64px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 25px;
|
||||
padding-top: 31px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
padding-top: 31px;
|
||||
}
|
||||
li {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 500px) and (max-width: 600px) {
|
||||
|
||||
h1 {
|
||||
font-size: 80px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 25px;
|
||||
}
|
||||
li {
|
||||
padding: 13px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 600px) and (max-width: 700px) {
|
||||
|
||||
h1 {
|
||||
font-size: 95px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 35px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
/* 4K+ MONITORS*/
|
||||
@media (min-width: 2100px) {
|
||||
|
||||
h1 {
|
||||
font-size: 150px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 45px;
|
||||
padding: 40px;
|
||||
}
|
||||
li {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
|
||||
html, body {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 120px;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
bottom: 10%;
|
||||
}
|
||||
|
||||
.mind-fullscreen-title {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mind-fullscreen-title h1 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 10%;
|
||||
}
|
||||
|
||||
/* ANIMATED GRADIENT BACKGROUND */
|
||||
@keyframes gradient {
|
||||
0% {background-position: 0%}
|
||||
100% {background-position: 100%}
|
||||
}
|
||||
|
||||
/*MOBILE*/
|
||||
@media (min-width: 0px) and (max-width: 200px) {
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 15px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
li {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 200px) and (max-width: 300px) {
|
||||
|
||||
h1 {
|
||||
font-size: 39px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
li {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 300px) and (max-width: 400px) {
|
||||
|
||||
h1 {
|
||||
font-size: 52px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 21px;
|
||||
padding-top: 28px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 19px;
|
||||
padding-top: 28px;
|
||||
}
|
||||
li {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 400px) and (max-width: 500px) {
|
||||
|
||||
h1 {
|
||||
font-size: 64px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 25px;
|
||||
padding-top: 31px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
padding-top: 31px;
|
||||
}
|
||||
li {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 500px) and (max-width: 600px) {
|
||||
|
||||
h1 {
|
||||
font-size: 80px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 25px;
|
||||
}
|
||||
li {
|
||||
padding: 13px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 600px) and (max-width: 700px) {
|
||||
|
||||
h1 {
|
||||
font-size: 95px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 35px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
/* 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
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
20
assets/js/arrow-fade.js
Normal file → Executable file
@@ -1,10 +1,10 @@
|
||||
// JavaScript Document
|
||||
$(document).ready(function(){
|
||||
$(window).scroll(function(){
|
||||
if($(this).scrollTop() > $(window).height()*0.3){
|
||||
$(".arrow-down").css({"opacity" : "0"});
|
||||
} else {
|
||||
$(".arrow-down").css({"opacity" : "0.4"});
|
||||
}
|
||||
})
|
||||
})
|
||||
// JavaScript Document
|
||||
$(document).ready(function(){
|
||||
$(window).scroll(function(){
|
||||
if($(this).scrollTop() > $(window).height()*0.3){
|
||||
$(".arrow-down").css({"opacity" : "0"});
|
||||
} else {
|
||||
$(".arrow-down").css({"opacity" : "0.4"});
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
1316
assets/js/jquery-3.5.1.js
vendored
Normal file → Executable file
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
76
assets/js/policy-popup.js
Normal file → Executable file
@@ -1,38 +1,38 @@
|
||||
function openPolicyPopup() {
|
||||
if(getCookie("consentGiven") === "true") return;
|
||||
|
||||
$("#mind-policy-popup").fadeIn(1000); // Enable the div
|
||||
}
|
||||
|
||||
function agreePolicyPopup() {
|
||||
const _paq = window._paq || [];
|
||||
_paq.push(['rememberConsentGiven', 43800]);
|
||||
$("#mind-policy-popup").fadeOut(1000); // Disable the div
|
||||
setCookie("consentGiven", "true", 1825) // todo: check if already present? also, firefox was throwing a warning...
|
||||
}
|
||||
|
||||
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];
|
||||
while (c.charAt(0) === ' ') {
|
||||
c = c.substring(1);
|
||||
}
|
||||
if (c.indexOf(name) === 0) {
|
||||
return c.substring(name.length, c.length);
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
function setCookie(name, value, days) {
|
||||
var expires = "";
|
||||
if (days) {
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime() + (days*24*60*60*1000));
|
||||
expires = "; expires=" + date.toUTCString();
|
||||
}
|
||||
document.cookie = name + "=" + (value || "") + expires + "; path=/;SameSite=Lax";
|
||||
}
|
||||
function openPolicyPopup() {
|
||||
if(getCookie("consentGiven") === "true") return;
|
||||
|
||||
$("#mind-policy-popup").fadeIn(1000); // Enable the div
|
||||
}
|
||||
|
||||
function agreePolicyPopup() {
|
||||
const _paq = window._paq || [];
|
||||
_paq.push(['rememberConsentGiven', 43800]);
|
||||
$("#mind-policy-popup").fadeOut(1000); // Disable the div
|
||||
setCookie("consentGiven", "true", 1825) // todo: check if already present? also, firefox was throwing a warning...
|
||||
}
|
||||
|
||||
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];
|
||||
while (c.charAt(0) === ' ') {
|
||||
c = c.substring(1);
|
||||
}
|
||||
if (c.indexOf(name) === 0) {
|
||||
return c.substring(name.length, c.length);
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
function setCookie(name, value, days) {
|
||||
var expires = "";
|
||||
if (days) {
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime() + (days*24*60*60*1000));
|
||||
expires = "; expires=" + date.toUTCString();
|
||||
}
|
||||
document.cookie = name + "=" + (value || "") + expires + "; path=/;SameSite=Lax";
|
||||
}
|
||||
|
||||
45
assets/js/scroll-navbar-color.js
Executable file
45
assets/js/scroll-navbar-color.js
Executable 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();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
1898
assets/js/three.r95.min.js
vendored
1898
assets/js/three.r95.min.js
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user