WIP: blog implementation on homepage

This commit is contained in:
Bea 2020-08-12 18:55:35 +02:00
parent ba5943c94a
commit 359e6108c9
8 changed files with 215 additions and 199 deletions

View File

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

View File

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

View File

@ -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 */

View File

@ -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 -->
<!-- Begin Posts & Pages only code -->
{{#is "post, page"}}
<link rel="stylesheet" type="text/css" href="{{asset "css/page-style.css"}}" />
<title>{{@site.title}} - {{meta_title}}</title>
<!-- Scripts Begin -->
<script src="{{asset "js/arrow-fade.js"}}" async></script>
<!-- Scripts End -->
{{/is}}
<!-- End Posts & Pages only code -->
<!-- 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>
<footer class="unselectable">
<h4>Copyright © 2019-20 ― Lorenzo Dellacà</h4>
</footer>
{{/is}}
{{!-- <foot> --}}
{{ghost_foot}}

View File

@ -1,17 +1,39 @@
{{!< default}}
<div class="main" id="vantajs">
<h1>{{@site.title}}</h1>
<div class="navbar">
<div class="navbar unselectable">
{{navigation}}
</div>
<div class="mind-site-title unselectable" id="vantajs">
<h1>{{@site.title}}</h1>
<i class="arrow-down"></i>
</div>
{{#post}}
<main>
<div class="mind-content">
{{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>
{{/post}}
</div>
</main>
<!-- Vanta.JS Scripts to make the background cool, but disabled on mobile -->
<script>

View File

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

View File

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

View File

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