WIP: blog implementation on homepage
This commit is contained in:
parent
ba5943c94a
commit
359e6108c9
@ -1,15 +1,12 @@
|
||||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
|
||||
html, body {
|
||||
-moz-user-select: none;
|
||||
-webkis-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
h1 {
|
||||
font-size: 90px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.main {
|
||||
.mind-site-title {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0%;
|
||||
@ -23,14 +20,21 @@ html, body {
|
||||
animation-direction: alternate-reverse;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 90px;
|
||||
margin-top: 20px;
|
||||
.mind-site-title h1 {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-top: auto;
|
||||
padding-bottom: 20px;
|
||||
.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 */
|
||||
@ -45,10 +49,6 @@ h1 {
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.navbar a {
|
||||
font-size: 10px;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 200px) and (max-width: 300px) {
|
||||
@ -56,10 +56,6 @@ h1 {
|
||||
h1 {
|
||||
font-size: 39px;
|
||||
}
|
||||
.navbar a {
|
||||
font-size: 11px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 300px) and (max-width: 400px) {
|
||||
@ -67,10 +63,6 @@ h1 {
|
||||
h1 {
|
||||
font-size: 52px;
|
||||
}
|
||||
.navbar a {
|
||||
font-size: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 400px) and (max-width: 500px) {
|
||||
@ -78,38 +70,24 @@ h1 {
|
||||
h1 {
|
||||
font-size: 64px;
|
||||
}
|
||||
.navbar a {
|
||||
font-size: 21px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 500px) and (max-width: 600px) {
|
||||
|
||||
h1 {
|
||||
font-size: 64px;
|
||||
}
|
||||
.navbar a {
|
||||
font-size: 26px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 600px) and (max-width: 700px) {
|
||||
|
||||
h1 {
|
||||
font-size: 76px;
|
||||
}
|
||||
.navbar a {
|
||||
font-size: 27px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 700px) and (max-width: 1000px) {
|
||||
|
||||
h1 {
|
||||
font-size: 80px;
|
||||
}
|
||||
.navbar a {
|
||||
font-size: 29px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4K+ MONITORS*/
|
||||
@ -118,7 +96,4 @@ h1 {
|
||||
h1 {
|
||||
font-size: 180px;
|
||||
}
|
||||
.navbar a {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,10 +5,6 @@ html, body {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 120px;
|
||||
margin: 0;
|
||||
@ -18,55 +14,16 @@ h1 {
|
||||
bottom: 10%;
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
border: solid white;
|
||||
opacity: 0.4;
|
||||
border-width: 0 2px 2px 0;
|
||||
display: inline-block;
|
||||
padding: 6px;
|
||||
margin-left: -6px;
|
||||
position: absolute;
|
||||
transform: rotate(45deg);
|
||||
animation: bounce 1.5s infinite;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
/* ARROW BOUNCE */
|
||||
@keyframes bounce {
|
||||
0% { top: 94%; }
|
||||
50% { top: 92%; }
|
||||
100% { top: 94%; }
|
||||
}
|
||||
|
||||
.mind-fullscreen-title, footer {
|
||||
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
|
||||
background-size: 1000%, 100%;
|
||||
animation: gradient 7s linear infinite;
|
||||
animation-direction: alternate-reverse;
|
||||
color: white;
|
||||
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.mind-fullscreen-title {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mind-content {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 200;
|
||||
background-color: #151515;
|
||||
font-size: 25px;
|
||||
color: white;
|
||||
.mind-fullscreen-title h1 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
padding-top: 20px;
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
padding-bottom: 20px;
|
||||
bottom: 10%;
|
||||
}
|
||||
|
||||
/* COLORED TEXT SELECTION */
|
||||
@ -97,12 +54,6 @@ h1 {
|
||||
font-size: 15px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.mind-content {
|
||||
font-size: 10px;
|
||||
}
|
||||
.navbar a {
|
||||
font-size: 10px;
|
||||
}
|
||||
li {
|
||||
padding: 5px;
|
||||
}
|
||||
@ -121,12 +72,6 @@ h1 {
|
||||
font-size: 16px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
.mind-content {
|
||||
font-size: 13px;
|
||||
}
|
||||
.navbar a {
|
||||
font-size: 11px;
|
||||
}
|
||||
li {
|
||||
padding: 6px;
|
||||
}
|
||||
@ -145,12 +90,6 @@ h1 {
|
||||
font-size: 19px;
|
||||
padding-top: 28px;
|
||||
}
|
||||
.mind-content {
|
||||
font-size: 16px;
|
||||
}
|
||||
.navbar a {
|
||||
font-size: 16px;
|
||||
}
|
||||
li {
|
||||
padding: 8px;
|
||||
}
|
||||
@ -169,12 +108,6 @@ h1 {
|
||||
font-size: 22px;
|
||||
padding-top: 31px;
|
||||
}
|
||||
.mind-content {
|
||||
font-size: 18px;
|
||||
}
|
||||
.navbar a {
|
||||
font-size: 21px;
|
||||
}
|
||||
li {
|
||||
padding: 10px;
|
||||
}
|
||||
@ -190,12 +123,6 @@ h1 {
|
||||
h3 {
|
||||
font-size: 25px;
|
||||
}
|
||||
.mind-content {
|
||||
font-size: 20px;
|
||||
}
|
||||
.navbar a {
|
||||
font-size: 26px;
|
||||
}
|
||||
li {
|
||||
padding: 13px;
|
||||
}
|
||||
@ -211,12 +138,6 @@ h1 {
|
||||
h3 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.mind-content {
|
||||
font-size: 23px;
|
||||
}
|
||||
.navbar a {
|
||||
font-size: 29px;
|
||||
}
|
||||
}
|
||||
/* 4K+ MONITORS*/
|
||||
@media (min-width: 2100px) {
|
||||
@ -228,9 +149,6 @@ h1 {
|
||||
font-size: 45px;
|
||||
padding: 40px;
|
||||
}
|
||||
.mind-content {
|
||||
font-size: 25px;
|
||||
}
|
||||
li {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
/* CSS Document */
|
||||
|
||||
html, body {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 800;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
@ -13,9 +13,7 @@ html, body {
|
||||
h1 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 800;
|
||||
width: 100%;
|
||||
color: white;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -24,7 +22,7 @@ h2 {
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 38px 0 0;
|
||||
font-size: 40px;
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@ -45,17 +43,16 @@ h4 {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: paleturquoise;
|
||||
}
|
||||
|
||||
.nav {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -63,13 +60,7 @@ a {
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
|
||||
/* Disable text selection */
|
||||
-moz-user-select: none;
|
||||
-webkis-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar li {
|
||||
@ -97,6 +88,41 @@ a {
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* Begin Content */
|
||||
.mind-content {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-weight: 300;
|
||||
background-color: #151515;
|
||||
font-size: 22px;
|
||||
line-height: 1.6;
|
||||
color: white;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
text-align: justify;
|
||||
box-sizing: border-box;
|
||||
padding-top: 20px;
|
||||
padding-left: 20%;
|
||||
padding-right: 20%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.mind-content a {
|
||||
text-decoration: none;
|
||||
color: paleturquoise;
|
||||
}
|
||||
/* End Content */
|
||||
|
||||
/* Begin footer */
|
||||
/* .mind-fullscreen-title is only used by pages (no homepage), however other pages have the footer too. */
|
||||
.mind-fullscreen-title, footer {
|
||||
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
|
||||
background-size: 1000%, 100%;
|
||||
animation: gradient 7s linear infinite;
|
||||
animation-direction: alternate-reverse;
|
||||
color: white;
|
||||
}
|
||||
/* End footer */
|
||||
|
||||
/* Begin policy popup */
|
||||
/* todo: this makes the page a little bit higher & larger, adding bars. fix it */
|
||||
|
||||
@ -162,6 +188,26 @@ a {
|
||||
|
||||
/* End policy popup */
|
||||
|
||||
|
||||
.arrow-down {
|
||||
border: solid white;
|
||||
opacity: 0.4;
|
||||
border-width: 0 2px 2px 0;
|
||||
display: inline-block;
|
||||
padding: 6px;
|
||||
margin-left: -6px;
|
||||
position: absolute;
|
||||
transform: rotate(45deg);
|
||||
animation: bounce 1.5s infinite;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
/* ARROW BOUNCE */
|
||||
@keyframes bounce {
|
||||
0% { top: 94%; }
|
||||
50% { top: 92%; }
|
||||
100% { top: 94%; }
|
||||
}
|
||||
/* Begin Ghost mandatory CSS */
|
||||
.kg-width-wide {
|
||||
|
||||
@ -224,6 +270,15 @@ a {
|
||||
}
|
||||
/* End Ghost mandatory CSS */
|
||||
|
||||
/* Generic class to make things unselectable */
|
||||
.unselectable {
|
||||
-moz-user-select: none;
|
||||
-webkis-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
/* Begin media queries for elements size */
|
||||
@media (min-width: 0px) and (max-width:200px) {
|
||||
|
||||
@ -253,6 +308,14 @@ a {
|
||||
margin: 10px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.mind-content {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 200px) and (max-width: 300px) {
|
||||
@ -284,6 +347,14 @@ a {
|
||||
margin: 10px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.mind-content {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 300px) and (max-width: 400px) {
|
||||
@ -313,6 +384,14 @@ a {
|
||||
margin: 10px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mind-content {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 400px) and (max-width: 500px) {
|
||||
@ -342,6 +421,14 @@ a {
|
||||
margin: 10px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.mind-content {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 500px) and (max-width: 600px) {
|
||||
@ -367,6 +454,14 @@ a {
|
||||
font-size: 11px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.mind-content {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 700px) {
|
||||
@ -392,6 +487,14 @@ a {
|
||||
font-size: 11px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
font-size: 29px;
|
||||
}
|
||||
|
||||
.mind-content {
|
||||
font-size: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 700px) and (max-width: 1000px) {
|
||||
@ -423,6 +526,10 @@ a {
|
||||
.mind-policy-popup button {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.mind-content {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
/* End media queries */
|
||||
|
||||
@ -450,4 +557,13 @@ a {
|
||||
font-weight: 200;
|
||||
src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_aZA3gnD_g.woff2) format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Raleway';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVuEorCIPrE.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* End fonts */
|
||||
|
||||
33
default.hbs
33
default.hbs
@ -11,23 +11,26 @@
|
||||
<!-- Scripts Begin -->
|
||||
<script src="{{asset "js/jquery-3.5.1.js"}}"></script>
|
||||
<script src="{{asset "js/policy-popup.js"}}"></script>
|
||||
<script src="{{asset "js/arrow-fade.js"}}" async></script>
|
||||
<!-- Scripts End -->
|
||||
|
||||
{{#is "post, page"}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/page-style.css"}}" />
|
||||
<!-- Begin Posts & Pages only code -->
|
||||
{{#is "post, page"}}
|
||||
|
||||
<title>{{@site.title}} - {{meta_title}}</title>
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/page-style.css"}}" />
|
||||
|
||||
<!-- Scripts Begin -->
|
||||
<script src="{{asset "js/arrow-fade.js"}}" async></script>
|
||||
<!-- Scripts End -->
|
||||
{{/is}}
|
||||
<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 -->
|
||||
{{#is "index"}}
|
||||
<title>{{meta_title}}</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/home-style.css"}}" />
|
||||
{{/is}}
|
||||
<!-- End Index only code -->
|
||||
|
||||
|
||||
{{ghost_head}}
|
||||
@ -48,11 +51,9 @@
|
||||
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}
|
||||
|
||||
|
||||
{{#is "post, page"}}
|
||||
<footer>
|
||||
<h4>Copyright © 2019-20 ― Lorenzo Dellacà</h4>
|
||||
</footer>
|
||||
{{/is}}
|
||||
<footer class="unselectable">
|
||||
<h4>Copyright © 2019-20 ― Lorenzo Dellacà</h4>
|
||||
</footer>
|
||||
|
||||
{{!-- <foot> --}}
|
||||
{{ghost_foot}}
|
||||
|
||||
44
index.hbs
44
index.hbs
@ -1,17 +1,39 @@
|
||||
{{!< default}}
|
||||
<div class="main" id="vantajs">
|
||||
<h1>{{@site.title}}</h1>
|
||||
<div class="navbar unselectable">
|
||||
{{navigation}}
|
||||
</div>
|
||||
|
||||
<div class="navbar">
|
||||
{{navigation}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mind-site-title unselectable" id="vantajs">
|
||||
<h1>{{@site.title}}</h1>
|
||||
<i class="arrow-down"></i>
|
||||
</div>
|
||||
|
||||
{{#post}}
|
||||
<div class="mind-content">
|
||||
{{content}}
|
||||
</div>
|
||||
{{/post}}
|
||||
|
||||
<main>
|
||||
<div class="mind-content">
|
||||
<h2>Last posts</h2>
|
||||
|
||||
<div class="mind-articles-container">
|
||||
<!-- Looping through every post -->
|
||||
{{#foreach posts}}
|
||||
<article class="{{post_class}}">
|
||||
<header class="post-header">
|
||||
<h3><a href="{{url}}">{{title}}</a></h3>
|
||||
</header>
|
||||
<section class="post-excerpt">
|
||||
<p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">...</a></p>
|
||||
</section>
|
||||
<footer class="post-meta">
|
||||
{{#if primary_author.profile_image}}<img src="{{primary_author.profile_image}}" alt="Author image" />{{/if}}
|
||||
{{primary_author}}
|
||||
{{tags prefix=" on "}}
|
||||
<time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
|
||||
</footer>
|
||||
</article>
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Vanta.JS Scripts to make the background cool, but disabled on mobile -->
|
||||
<script>
|
||||
|
||||
8
page.hbs
8
page.hbs
@ -1,9 +1,9 @@
|
||||
{{!< default}}
|
||||
{{#post}}
|
||||
<div class="mind-fullscreen-title">
|
||||
<div class="navbar">
|
||||
{{navigation}}
|
||||
</div>
|
||||
<div class="navbar unselectable">
|
||||
{{navigation}}
|
||||
</div>
|
||||
<div class="mind-fullscreen-title unselectable">
|
||||
<h1>{{title}}</h1>
|
||||
<i class="arrow-down"></i>
|
||||
</div>
|
||||
|
||||
8
post.hbs
8
post.hbs
@ -1,9 +1,9 @@
|
||||
{{!< default}}
|
||||
{{#post}}
|
||||
<div class="mind-fullscreen-title">
|
||||
<div class="navbar">
|
||||
{{navigation}}
|
||||
</div>
|
||||
<div class="navbar unselectable">
|
||||
{{navigation}}
|
||||
</div>
|
||||
<div class="mind-fullscreen-title unselectable">
|
||||
<h1>{{title}}</h1>
|
||||
<i class="arrow-down"></i>
|
||||
</div>
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
{{!< default}}
|
||||
{{#page}}
|
||||
<div class="mind-fullscreen-title">
|
||||
<div class="navbar">
|
||||
{{navigation}}
|
||||
</div>
|
||||
<h1>{{title}}</h1>
|
||||
<i class="arrow-down"></i>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div class="mind-content">
|
||||
{{content}}
|
||||
</div>
|
||||
</main>
|
||||
{{/page}}
|
||||
Loading…
Reference in New Issue
Block a user