WebDev/mind-overflow-website-ghost-theme
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

WIP: blog implementation on homepage

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
assets/css/home-style.css
View File

@ -1,15 +1,12 @@
@charset "utf-8"; @charset "utf-8";
/* CSS Document */ /* CSS Document */
html, body { h1 {
-moz-user-select: none; font-size: 90px;
-webkis-user-select: none; margin-top: 20px;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
} }
.main { .mind-site-title {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0%; margin: 0%;
@ -23,14 +20,21 @@ html, body {
animation-direction: alternate-reverse; animation-direction: alternate-reverse;
} }
h1 { .mind-site-title h1 {
font-size: 90px; position: absolute;
margin-top: 20px;
} }
.navbar { .mind-articles-container {
margin-top: auto; width: 100%;
padding-bottom: 20px; text-align: center;
}
article {
display: inline-block;
width: 500px;
margin: 2%;
vertical-align: top;
text-align: left;
} }
/* ANIMATED GRADIENT BACKGROUND */ /* ANIMATED GRADIENT BACKGROUND */
@ -45,10 +49,6 @@ h1 {
h1 { h1 {
font-size: 20px; font-size: 20px;
} }
.navbar a {
font-size: 10px;
padding: 4px;
}
} }
@media (min-width: 200px) and (max-width: 300px) { @media (min-width: 200px) and (max-width: 300px) {
@ -56,10 +56,6 @@ h1 {
h1 { h1 {
font-size: 39px; font-size: 39px;
} }
.navbar a {
font-size: 11px;
padding: 8px;
}
} }
@media (min-width: 300px) and (max-width: 400px) { @media (min-width: 300px) and (max-width: 400px) {
@ -67,10 +63,6 @@ h1 {
h1 { h1 {
font-size: 52px; font-size: 52px;
} }
.navbar a {
font-size: 16px;
padding: 8px;
}
} }
@media (min-width: 400px) and (max-width: 500px) { @media (min-width: 400px) and (max-width: 500px) {
@ -78,38 +70,24 @@ h1 {
h1 { h1 {
font-size: 64px; font-size: 64px;
} }
.navbar a {
font-size: 21px;
padding: 8px;
}
} }
@media (min-width: 500px) and (max-width: 600px) { @media (min-width: 500px) and (max-width: 600px) {
h1 { h1 {
font-size: 64px; font-size: 64px;
} }
.navbar a {
font-size: 26px;
padding: 8px;
}
} }
@media (min-width: 600px) and (max-width: 700px) { @media (min-width: 600px) and (max-width: 700px) {
h1 { h1 {
font-size: 76px; font-size: 76px;
} }
.navbar a {
font-size: 27px;
}
} }
@media (min-width: 700px) and (max-width: 1000px) { @media (min-width: 700px) and (max-width: 1000px) {
h1 { h1 {
font-size: 80px; font-size: 80px;
} }
.navbar a {
font-size: 29px;
}
} }
/* 4K+ MONITORS*/ /* 4K+ MONITORS*/
@ -118,7 +96,4 @@ h1 {
h1 { h1 {
font-size: 180px; font-size: 180px;
} }
.navbar a {
font-size: 40px;
}
} }

90
assets/css/page-style.css
View File

@ -5,10 +5,6 @@ html, body {
background-color: black; background-color: black;
} }
.navbar {
padding-top: 20px;
}
h1 { h1 {
font-size: 120px; font-size: 120px;
margin: 0; margin: 0;
@ -18,55 +14,16 @@ h1 {
bottom: 10%; 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 { .mind-fullscreen-title {
height: 100%; height: 100%;
width: 100%;
text-align: center; text-align: center;
} }
.mind-content { .mind-fullscreen-title h1 {
font-family: 'Montserrat', sans-serif; position: absolute;
font-weight: 200;
background-color: #151515;
font-size: 25px;
color: white;
width: 100%; width: 100%;
text-align: left; bottom: 10%;
box-sizing: border-box;
padding-top: 20px;
padding-left: 10%;
padding-right: 10%;
padding-bottom: 20px;
} }
/* COLORED TEXT SELECTION */ /* COLORED TEXT SELECTION */
@ -97,12 +54,6 @@ h1 {
font-size: 15px; font-size: 15px;
padding-top: 20px; padding-top: 20px;
} }
.mind-content {
font-size: 10px;
}
.navbar a {
font-size: 10px;
}
li { li {
padding: 5px; padding: 5px;
} }
@ -121,12 +72,6 @@ h1 {
font-size: 16px; font-size: 16px;
padding-top: 25px; padding-top: 25px;
} }
.mind-content {
font-size: 13px;
}
.navbar a {
font-size: 11px;
}
li { li {
padding: 6px; padding: 6px;
} }
@ -145,12 +90,6 @@ h1 {
font-size: 19px; font-size: 19px;
padding-top: 28px; padding-top: 28px;
} }
.mind-content {
font-size: 16px;
}
.navbar a {
font-size: 16px;
}
li { li {
padding: 8px; padding: 8px;
} }
@ -169,12 +108,6 @@ h1 {
font-size: 22px; font-size: 22px;
padding-top: 31px; padding-top: 31px;
} }
.mind-content {
font-size: 18px;
}
.navbar a {
font-size: 21px;
}
li { li {
padding: 10px; padding: 10px;
} }
@ -190,12 +123,6 @@ h1 {
h3 { h3 {
font-size: 25px; font-size: 25px;
} }
.mind-content {
font-size: 20px;
}
.navbar a {
font-size: 26px;
}
li { li {
padding: 13px; padding: 13px;
} }
@ -211,12 +138,6 @@ h1 {
h3 { h3 {
font-size: 30px; font-size: 30px;
} }
.mind-content {
font-size: 23px;
}
.navbar a {
font-size: 29px;
}
} }
/* 4K+ MONITORS*/ /* 4K+ MONITORS*/
@media (min-width: 2100px) { @media (min-width: 2100px) {
@ -228,9 +149,6 @@ h1 {
font-size: 45px; font-size: 45px;
padding: 40px; padding: 40px;
} }
.mind-content {
font-size: 25px;
}
li { li {
padding: 20px; padding: 20px;
} }

152
assets/css/screen.css
View File

@ -2,8 +2,8 @@
/* CSS Document */ /* CSS Document */
html, body { html, body {
font-family: 'Montserrat', sans-serif; font-family: 'Raleway', sans-serif;
font-weight: 800; font-weight: 300;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
@ -13,9 +13,7 @@ html, body {
h1 { h1 {
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 800; font-weight: 800;
width: 100%;
color: white; color: white;
position: absolute;
} }
h2 { h2 {
@ -24,7 +22,7 @@ h2 {
color: white; color: white;
margin: 0; margin: 0;
padding: 38px 0 0; padding: 38px 0 0;
font-size: 40px; font-size: 60px;
} }
h3 { h3 {
@ -45,17 +43,16 @@ h4 {
font-size: 25px; font-size: 25px;
} }
a {
text-decoration: none;
color: paleturquoise;
}
.nav { .nav {
padding: 0; padding: 0;
} }
.navbar { .navbar {
position: fixed;
width: 100%;
top: 0;
z-index: 100;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -63,13 +60,7 @@ a {
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;
padding: 0;
/* Disable text selection */
-moz-user-select: none;
-webkis-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
} }
.navbar li { .navbar li {
@ -97,6 +88,41 @@ a {
-webkit-text-fill-color: transparent; -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 */ /* Begin policy popup */
/* todo: this makes the page a little bit higher & larger, adding bars. fix it */ /* todo: this makes the page a little bit higher & larger, adding bars. fix it */
@ -162,6 +188,26 @@ a {
/* End policy popup */ /* 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 */ /* Begin Ghost mandatory CSS */
.kg-width-wide { .kg-width-wide {
@ -224,6 +270,15 @@ a {
} }
/* End Ghost mandatory CSS */ /* 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 */ /* Begin media queries for elements size */
@media (min-width: 0px) and (max-width:200px) { @media (min-width: 0px) and (max-width:200px) {
@ -253,6 +308,14 @@ a {
margin: 10px; margin: 10px;
padding: 5px 8px; padding: 5px 8px;
} }
.navbar a {
font-size: 10px;
}
.mind-content {
font-size: 10px;
}
} }
@media (min-width: 200px) and (max-width: 300px) { @media (min-width: 200px) and (max-width: 300px) {
@ -284,6 +347,14 @@ a {
margin: 10px; margin: 10px;
padding: 10px 15px; padding: 10px 15px;
} }
.navbar a {
font-size: 11px;
}
.mind-content {
font-size: 13px;
}
} }
@media (min-width: 300px) and (max-width: 400px) { @media (min-width: 300px) and (max-width: 400px) {
@ -313,6 +384,14 @@ a {
margin: 10px; margin: 10px;
padding: 10px 15px; padding: 10px 15px;
} }
.navbar a {
font-size: 16px;
}
.mind-content {
font-size: 16px;
}
} }
@media (min-width: 400px) and (max-width: 500px) { @media (min-width: 400px) and (max-width: 500px) {
@ -342,6 +421,14 @@ a {
margin: 10px; margin: 10px;
padding: 10px 15px; padding: 10px 15px;
} }
.navbar a {
font-size: 21px;
}
.mind-content {
font-size: 18px;
}
} }
@media (min-width: 500px) and (max-width: 600px) { @media (min-width: 500px) and (max-width: 600px) {
@ -367,6 +454,14 @@ a {
font-size: 11px; font-size: 11px;
margin: 10px; margin: 10px;
} }
.navbar a {
font-size: 26px;
}
.mind-content {
font-size: 20px;
}
} }
@media (min-width: 600px) and (max-width: 700px) { @media (min-width: 600px) and (max-width: 700px) {
@ -392,6 +487,14 @@ a {
font-size: 11px; font-size: 11px;
margin: 10px; margin: 10px;
} }
.navbar a {
font-size: 29px;
}
.mind-content {
font-size: 23px;
}
} }
@media (min-width: 700px) and (max-width: 1000px) { @media (min-width: 700px) and (max-width: 1000px) {
@ -423,6 +526,10 @@ a {
.mind-policy-popup button { .mind-policy-popup button {
font-size: 15px; font-size: 15px;
} }
.mind-content {
font-size: 25px;
}
} }
/* End media queries */ /* End media queries */
@ -450,4 +557,13 @@ a {
font-weight: 200; font-weight: 200;
src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_aZA3gnD_g.woff2) format('woff2'); 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 */ /* End fonts */

35
default.hbs
View File

@ -7,27 +7,30 @@
<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>
<!-- Scripts End --> <!-- Scripts End -->
{{#is "post, page"}} <!-- Begin Posts & Pages only code -->
<link rel="stylesheet" type="text/css" href="{{asset "css/page-style.css"}}" /> {{#is "post, page"}}
<title>{{@site.title}} - {{meta_title}}</title> <link rel="stylesheet" type="text/css" href="{{asset "css/page-style.css"}}" />
<!-- Scripts Begin --> <title>{{@site.title}} - {{meta_title}}</title>
<script src="{{asset "js/arrow-fade.js"}}" async></script>
<!-- Scripts End -->
{{/is}}
{{#is "index"}} {{/is}}
<title>{{meta_title}}</title> <!-- End Posts & Pages only code -->
<link rel="stylesheet" type="text/css" href="{{asset "css/home-style.css"}}" /> <!-- Begin Index only code -->
{{/is}} {{#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}} {{ghost_head}}
@ -48,11 +51,9 @@
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}} {{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}
{{#is "post, page"}} <footer class="unselectable">
<footer> <h4>Copyright © 2019-20 ― Lorenzo Dellacà</h4>
<h4>Copyright © 2019-20 ― Lorenzo Dellacà</h4> </footer>
</footer>
{{/is}}
{{!-- <foot> --}} {{!-- <foot> --}}
{{ghost_foot}} {{ghost_foot}}

46
index.hbs
View File

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

8
page.hbs
View File

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

8
post.hbs
View File

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

16
static-page.hbs
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}}