WIP: blog implementation on homepage

assets/css/home-style.css

@@ -1,15 +1,12 @@
 @charset "utf-8";
 /* 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%;
 	width: 100%;
 	margin: 0%;
@@ -23,14 +20,21 @@ html, body {
 	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 */
@@ -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;
-	}
 }

assets/css/page-style.css

@@ -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 {
+.mind-fullscreen-title h1 {
-	font-family: 'Montserrat', sans-serif;
+	position: absolute;
-	font-weight: 200;
-	background-color: #151515;
-	font-size: 25px;
-	color: white;
 	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 */
@@ -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;
 	}

assets/css/screen.css

@@ -2,8 +2,8 @@
 /* CSS Document */
 
 html, body {
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'Raleway', sans-serif;
-    font-weight: 800;
+    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;
-
+	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 {
@@ -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 */

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 -->
 
+    <!-- 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 class="unselectable">
-        <footer>
         <h4>Copyright © 2019-20 ― Lorenzo Dellacà</h4>
       </footer>
-      {{/is}}
 
       {{!-- <foot> --}}
       {{ghost_foot}}

index.hbs

@@ -1,17 +1,39 @@
 {{!< default}}
-<div class="main" id="vantajs">
+<div class="navbar unselectable">
-  			<h1>{{@site.title}}</h1>
-
-  			<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}}
+
+<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>

page.hbs

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

post.hbs

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

static-page.hbs

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