began structuring index page. posts now show correctly on a 1920x1080 screen.

assets/css/home-style.css

@@ -24,17 +24,68 @@ h1 {
 	position: absolute;
 }
 
-.mind-articles-container {
+.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%;
-	text-align: center;
+	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 {
-  display: inline-block;
-	width: 500px;
-	margin: 2%;
-	vertical-align: top;
-	text-align: left;
+	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 */

assets/css/page-style.css

@@ -26,18 +26,6 @@ h1 {
 	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%}

assets/css/screen.css

@@ -2,12 +2,26 @@
 /* CSS Document */
 
 html, body {
-    font-family: 'Raleway', sans-serif;
+    font-family: 'Roboto', sans-serif;
     font-weight: 300;
     margin: 0;
     padding: 0;
     height: 100%;
     width: 100%;
+
+  	font-size: 20px;
+    line-height: 1.6;
+  	color: white;
+  	width: 100%;
+}
+
+a {
+    text-decoration: none;
+    color: paleturquoise;
+}
+
+a:hover {
+    text-decoration: underline;
 }
 
 h1 {
@@ -43,6 +57,10 @@ h4 {
     font-size: 25px;
 }
 
+main {
+  	display: block;
+    background-color: #151515;
+}
 .nav {
 	padding: 0;
 }
@@ -61,6 +79,16 @@ h4 {
 	text-decoration: none;
 	overflow: hidden;
 	padding: 0;
+
+  transition: 1s;
+}
+
+.navbar-colored {
+  background: rgba(0, 0, 0, 1);
+}
+
+.navbar-transparent {
+  background: rgba(0, 0, 0, 0.0);
 }
 
 .navbar li {
@@ -90,14 +118,6 @@ h4 {
 
 /* 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;
@@ -105,16 +125,11 @@ h4 {
 	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 {
+.mind-fullscreen-title, footer.mind-site-footer {
 	background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
 	background-size: 1000%, 100%;
 	animation: gradient 7s linear infinite;
@@ -219,8 +234,8 @@ h4 {
 
 .kg-gallery-container {
 
-}
 
+}
 .kg-gallery-image {
 
 }
@@ -279,6 +294,17 @@ h4 {
 	-o-user-select: none;
 }
 
+/* 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);
+}
+
 /* Begin media queries for elements size */
 @media (min-width: 0px) and (max-width:200px) {
 
@@ -559,11 +585,11 @@ h4 {
 }
 
 @font-face {
-  font-family: 'Raleway';
+  font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVuEorCIPrE.woff2) format('woff2');
+  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.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 */

assets/js/scroll-navbar-color.js

@@ -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();
+      }
+    }
+  });
+});

default.hbs

@@ -12,6 +12,11 @@
       <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>
+      <script src="{{asset "js/scroll-navbar-color.js"}}"></script>
+
+      <!-- TODO: REMOVE ON PRODUCTION! -->
+      <script type="text/javascript" src="http://livejs.com/live.js"></script>
+
     <!-- Scripts End -->
 
     <!-- Begin Posts & Pages only code -->
@@ -32,12 +37,16 @@
       {{/is}}
     <!-- End Index only code -->
 
-
     {{ghost_head}}
     {{!-- Outputs important meta data and settings, should always be in <head> --}}
 
   </head>
     <body class="{{body_class}}" onload="openPolicyPopup()">
+
+      <div id="navbar" class="navbar unselectable">
+          {{navigation}}
+      </div>
+
     	<div class="mind-policy-popup" id="mind-policy-popup">
     		<h4>This website uses cookies.</h4>
     		<p>We use cookies to ensure you the best experience.
@@ -51,7 +60,7 @@
       {{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}
 
 
-      <footer class="unselectable">
+      <footer class="mind-site-footer unselectable">
         <h4>Copyright © 2019-20 ― Lorenzo Dellacà</h4>
       </footer>
 

index.hbs

@@ -1,7 +1,4 @@
 {{!< default}}
-<div class="navbar unselectable">
-    {{navigation}}
-</div>
 
   <div class="mind-site-title unselectable" id="vantajs">
     			<h1>{{@site.title}}</h1>
@@ -9,30 +6,29 @@
   </div>
 
 
-<main>
-  <div class="mind-content">
+<main class="mind-index">
   <h2>Last posts</h2>
+  <div class="mind-feed">
 
-      <div class="mind-articles-container">
     <!-- Looping through every post -->
     {{#foreach posts}}
     	<article class="{{post_class}}">
+        <a class="post-card" href="{{url}}">
        		<header class="post-header">
-       		<h3><a href="{{url}}">{{title}}</a></h3>
+            <img class="post-card_feature-image" src="{{feature_image}}" />
+         		<h3>{{title}}</h3>
           </header>
           <section class="post-excerpt">
-     			<p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">...</a></p>
+       			<p>{{excerpt words="26"}}</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>
+            {{primary_author.name}}
+            {{#if primary_author.profile_image}}<img class="post-card_profile-image" src="{{primary_author.profile_image}}" alt="Author image" />{{/if}}
           </footer>
+        </a>
       </article>
     {{/foreach}}
   </div>
-  </div>
 </main>
 
   	<!-- Vanta.JS Scripts to make the background cool, but disabled on mobile -->

page.hbs

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

post.hbs

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