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

2020-08-13 14:23:29 +02:00 · 2020-08-13 14:23:29 +02:00 · 3b02a75451
commit 3b02a75451
parent 359e6108c9
13 changed files with 2756 additions and 2647 deletions
--- a/assets/css/home-style.css
+++ b/assets/css/home-style.css
@ -24,17 +24,68 @@ h1 {
 	position: absolute;
 }

-.mind-articles-container {
-	width: 100%;
-	text-align: center;
+.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%;
+	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 */
--- a/assets/css/page-style.css
+++ b/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%}
--- a/assets/css/screen.css
+++ b/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 */
--- a/assets/js/arrow-fade.js
+++ b/assets/js/arrow-fade.js
--- a/assets/js/jquery-3.5.1.js
+++ b/assets/js/jquery-3.5.1.js
--- a/assets/js/policy-popup.js
+++ b/assets/js/policy-popup.js
--- a/assets/js/scroll-navbar-color.js
+++ b/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();
+      }
+    }
+  });
+});
--- a/default.hbs
+++ b/default.hbs
@ -11,7 +11,12 @@
    <!-- 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>
+      <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>

--- a/index.hbs
+++ b/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,29 +6,28 @@
  </div>


-<main>
-  <div class="mind-content">
-    <h2>Last posts</h2>
+<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}}">
-     		<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>
+        <a class="post-card" href="{{url}}">
+       		<header class="post-header">
+            <img class="post-card_feature-image" src="{{feature_image}}" />
+         		<h3>{{title}}</h3>
+          </header>
+          <section class="post-excerpt">
+       			<p>{{excerpt words="26"}}</p>
+          </section>
+          <footer class="post-meta">
+            {{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>

--- a/package.json
+++ b/package.json
--- a/page.hbs
+++ b/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>
--- a/post.hbs
+++ b/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>