Lots of changes

- add tags.hbs
- add home.hbs, copy of index.hbs
- change <h1> global font size
 make some animations faster
- make post title & footer background black instead of animated gradient
- make "services" link in navbar white instead of animated gradient
- move some css classes to screen.css to allow tags.hbs accessing them
- fix policy popup being covered (issue #001)
- fix policy popup style
- fig kg-bookmark thumbnail image
- add PT Serif font
- add category and posted date under post title
- move big post cards to post-card-big.hbs, so both index, home and tags can access it
- mode post post cards style to new post-card-style.css file
- update page.hbs, now rendering correctly and including content
- add "l" size to package.json, to allow more high-res images

assets/css/home-style.css

@@ -57,124 +57,3 @@ h1 {
   display: flex;
   align-items: center;
 }
-
-.mind-feed_main {
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr;
-	grid-gap: 30px;
-	padding: 50px 0;
-}
-
-.post-card_main {
-	font-family: 'Montserrat', sans-serif;
-	font-weight: 400;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-	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;
-	font-size: 18px;
-}
-
-.post-card_main:hover {
-	box-shadow: 1px 3px 15px 2px black;
-
-	/* TODO: decide:
-	1. move up
-	transform:translate3d(0,-5px,0);
-
-	2. scale up
-	transform: scale(1.04);
-
-	3. scale down
-	transform: scale(0.96);
-
-	ATM: move up
-	*/
-	transform:translate3d(0,-5px,0);
-}
-
-.post-card_header {
-	font-family: 'Roboto', sans-serif;
-	font-weight: 300;
-	padding: 20px 30px 0;
-}
-
-.post-card_excerpt {
-  text-align: justify;
-	padding: 0 30px;
-}
-
-a.post-card_main {
-	color: rgb(200, 200, 200);
-}
-
-.post-card_meta {
-	font-weight: 700;
-	text-transform: uppercase;
-	font-size: 14px;
-	margin: 10px 5px 0;
-	color: rgb(180, 180, 180);
-}
-
-.post-card_tag {
-	color: #3fd5ff;
-}
-
-a.post-card_main:hover {
-	text-decoration: none;
-}
-
-footer.post-card_footer {
-	display: flex;
-	align-items: flex-end;
-	height: 100%;
-	margin-top: 20px;
-	justify-content: flex-end;
-	padding: 0 20px 20px;
-}
-
-article {
-	box-sizing: border-box;
-}
-
-.post-card_author-image {
-	border-radius: 100%;
-	margin-left: 10px;
-	max-width: 30px;
-}
-
-.post-card_feature-image {
-
-	/*
-	The following 3 statements are used
-	to make all images have the same size.
-
-	This has the downside of being relatively more difficult to scale,
-	so if you want to go back to normal viewing (full image)
-	only leave:
-	width: 100%;
-	*/
-	object-fit: cover;
-	width: 100%;
-	height: 217px;
-	max-height: 100%;
-
-
-	border-radius: 5px;
-}
-
-/* ARROW BOUNCE */
-@keyframes bounce {
-	0% { top: 94%; }
-	50% { top: 92%; }
-	100% { top: 94%; }
-}

assets/css/page-style.css

@@ -1,31 +1,6 @@
 @charset "utf-8";
 /* CSS Document */
 
-h1 {
-	font-size: 90px;
-	margin: 0;
-	box-sizing: border-box;
-	padding-left: 5%;
-	padding-right: 5%;
-	bottom: 10%;
-}
-
-.mind-page-title {
-	height: 400px;
-	width: 100%;
-	display: flex;
-	align-items: flex-end;
-	justify-content: center;
-	text-align: center;
-	position: relative;
-	z-index: 3;
-	box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
-}
-
-.mind-page-title h1 {
-	/* Leave space for the floating arrow */
-	margin-bottom: 4%;
-}
 
 .mind-post_main {
 	max-width: 1260px;
@@ -194,6 +169,7 @@ img.mind-post_feature-image {
 }
 
 .post-card-sidebar_meta {
+	font-family: 'Roboto';
 	font-weight: 700;
 	text-transform: uppercase;
 	font-size: 12px;
@@ -205,13 +181,10 @@ img.mind-post_feature-image {
 	padding: 0 5px 10px;
 }
 
-.post-card-sidebar_tag {
+/* MEDIA QUERIES FOR RESPONSIVE DESIGN */
-	color: #3fd5ff;
+@media screen and (max-width: 1300px) {
-}
+	.mind-post_main {
 
-/* ARROW BOUNCE */
+	}
-@keyframes bounce {
-	0% { top: 88%; }
-	50% { top: 85%; }
-	100% { top: 88%; }
 }
+/* END MEDIA QUERIES */

assets/css/post-card-style.css

@@ -0,0 +1,101 @@
+
+.post-card_main {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+	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;
+	font-size: 19px;
+}
+
+.post-card_main:hover {
+	box-shadow: 1px 3px 15px 2px black;
+
+	/* TODO: decide:
+	1. move up
+	transform:translate3d(0,-5px,0);
+
+	2. scale up
+	transform: scale(1.04);
+
+	3. scale down
+	transform: scale(0.96);
+
+	ATM: move up
+	*/
+	transform:translate3d(0,-5px,0);
+}
+
+.post-card_header {
+	font-family: 'Roboto', sans-serif;
+	font-weight: 300;
+	padding: 20px 30px 0;
+}
+
+.post-card_excerpt {
+  text-align: justify;
+	padding: 0 30px;
+}
+
+a.post-card_main {
+	color: rgb(200, 200, 200);
+}
+
+.post-card_meta {
+	font-weight: 700;
+	text-transform: uppercase;
+	font-size: 14px;
+	margin: 10px 5px 0;
+	color: rgb(180, 180, 180);
+}
+
+a.post-card_main:hover {
+	text-decoration: none;
+}
+
+footer.post-card_footer {
+	display: flex;
+	align-items: flex-end;
+	height: 100%;
+	margin-top: 20px;
+	justify-content: flex-end;
+	padding: 0 20px 20px;
+}
+
+article {
+	box-sizing: border-box;
+}
+
+.post-card_author-image {
+	border-radius: 100%;
+	margin-left: 10px;
+	max-width: 30px;
+}
+
+.post-card_feature-image {
+
+	/*
+	The following 3 statements are used
+	to make all images have the same size.
+
+	This has the downside of being relatively more difficult to scale,
+	so if you want to go back to normal viewing (full image)
+	only leave:
+	width: 100%;
+	*/
+	object-fit: cover;
+	width: 100%;
+	height: 217px;
+	max-height: 100%;
+
+
+	border-radius: 5px;
+}

assets/css/screen.css

@@ -27,6 +27,10 @@ h1, h2, h3, h4, h5, h6 {
 	color: rgb(230, 230, 230);
 }
 
+h1 {
+	font-size: 70px;
+}
+
 h2 {
   font-size: 35px;
 }
@@ -73,7 +77,7 @@ text-decoration: none;
 overflow: hidden;
 padding: 0;
 
-transition: 1s;
+transition: .5s;
 }
 /* This class is applied by a JS script, so that users with JS disabled
 can still see the navbar, but it won't move while they're scrolling.
@@ -104,7 +108,7 @@ is applied by the script on scroll.
   margin-left: -30px;
   width: 30px;
   height: 30px;
-  transition: 1s;
+  transition: .5s;
 }
 
 .navbar li {
@@ -127,7 +131,9 @@ is applied by the script on scroll.
 }
 
 .navbar li.nav-services {
+  /* TODO: choose if background should be colorful or white */
 	background: linear-gradient(to right, #33ffc5 20%, #fc33ff, #ff3370, #ff3333, #3dff33, #33ffc5);
+  /*background: white;*/
 	background-size: 800px, 800px;
 	color: aquamarine;
 	text-fill-color: transparent;
@@ -141,6 +147,44 @@ is applied by the script on scroll.
   margin: auto;
 }
 
+.mind-feed_main {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-gap: 30px;
+	padding: 50px 0;
+}
+
+.mind-page-title {
+	height: 400px;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-end;
+	text-align: center;
+	position: relative;
+	z-index: 3;
+	box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
+}
+
+.mind-page-title div {
+/* Leave space for the floating arrow */
+	margin: 0;
+	margin-bottom: 70px;
+}
+
+.mind-page-title p {
+	font-family: 'Roboto';
+	font-weight: 700;
+	text-transform: uppercase;
+	color: rgb(200, 200, 200);
+	font-size: 15px
+}
+
+.post-card-sidebar_tag, .mind-page-title a, .post-card_tag {
+	color: #3fd5ff;
+}
+
 /* Begin Main Content */
 main {
   display: block;
@@ -156,20 +200,22 @@ footer.mind-site-footer_main {
     grid-template-columns: 1fr 1fr;
     position: relative;
     z-index: 3;
+    font-family: 'Montserrat', sans-serif;
+    color: white;
 }
 
 .mind-site-footer_main p {
-      font-family: 'Montserrat', sans-serif;
       font-weight: 800;
-      color: white;
       margin: 0;
       padding: 20px;
       font-size: 25px;
 }
 
 /* .mind-page-title is only used by pages (homepage has a different title style), however other pages have the footer too. */
+/* TODO: choose if background should be colorful or black */
 .mind-page-title, footer.mind-site-footer_main {
-	background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
+	/*background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);*/
+  background: rgb(10, 10, 10);
 	background-size: 1000%, 100%;
 	animation: gradient 7s linear infinite;
 	animation-direction: alternate-reverse;
@@ -183,7 +229,7 @@ nav.mind-site-footer_nav {
 /* End footer */
 
 /* 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, also adding scrollbars. fix it */
 
 .mind-policy-popup {
   display: none; /*Hidden, we want to show it via JavaScript */
@@ -220,7 +266,6 @@ nav.mind-site-footer_nav {
   font-weight: 200;
   color: white;
   font-size: 16px;
-  padding: 0 20px;
 }
 
 
@@ -237,7 +282,6 @@ nav.mind-site-footer_nav {
   color: white;
   padding: 15px 30px;
   text-align: center;
-  margin: 20px;
   float: right;
 }
 
@@ -247,7 +291,7 @@ nav.mind-site-footer_nav {
 
 /* End policy popup */
 
-.arrow-down {
+.mind-all-title_arrow-down {
 	border: solid white;
 	opacity: 0.4;
 	border-width: 0 2px 2px 0;
@@ -256,10 +300,35 @@ nav.mind-site-footer_nav {
 	margin-left: -6px;
 	position: absolute;
 	transform: rotate(45deg);
-	animation: bounce 1.5s infinite;
 	transition: 1s;
 }
 
+div.mind-policy-popup {
+  z-index: 100;
+  padding: 20px 20px;
+}
+
+.mind-all-title_arrow-down-big {
+animation: arrow-bounce-big 1.5s infinite;
+}
+
+.mind-all-title_arrow-down-mid {
+animation: arrow-bounce-mid 1.5s infinite;
+}
+
+/* ARROW BOUNCE */
+@keyframes arrow-bounce-mid {
+	0% { top: 89%; }
+	50% { top: 87%; }
+	100% { top: 89%; }
+}
+
+/* ARROW BOUNCE */
+@keyframes arrow-bounce-big {
+	0% { top: 94%; }
+	50% { top: 92%; }
+	100% { top: 94%; }
+}
 /* Begin Ghost mandatory CSS */
 
   /* Begin images
@@ -356,7 +425,7 @@ nav.mind-site-footer_nav {
   }
 
   .kg-bookmark-description {
-    margin-top: 12px;
+    margin: 12px 0;
     max-height: 48px;
     font-size: 14px;
 
@@ -400,15 +469,17 @@ nav.mind-site-footer_nav {
   }
 
   .kg-bookmark-thumbnail {
+    box-sizing: border-box;
     font-size: 0;
     max-height: 100%;
-    min-width: 33%;
+    max-width: 30%;
   }
 
   .kg-bookmark-thumbnail img {
+    box-sizing: border-box;
     border-radius: 0 5px 5px 0;
     object-fit: cover;
-    height: 157px;
+    height: 100%;
     width: 100%;
   }
 
@@ -537,5 +608,13 @@ img {
   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;
 }
 
+@font-face {
+  font-family: 'PT Serif';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('PT Serif'), local('PTSerif-Regular'), url(https://fonts.gstatic.com/s/ptserif/v11/EJRVQgYoZZY2vCFuvAFWzr8.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/arrow-fade.js

@@ -4,9 +4,9 @@ $(document).ready(function(){
 		if($(this).scrollTop() >
 		//$(window).height()*0.3){
 		100) {
-			$(".arrow-down").css({"opacity" : "0"});
+			$(".mind-all-title_arrow-down").css({"opacity" : "0"});
 		} else {
-			$(".arrow-down").css({"opacity" : "0.4"});
+			$(".mind-all-title_arrow-down").css({"opacity" : "0.4"});
 		}
 	})
 })

default.hbs

@@ -23,19 +23,31 @@
       {{#is "post, page"}}
 
         <link rel="stylesheet" type="text/css" href="{{asset "css/page-style.css"}}" />
-        <script src="{{asset "js/remark42-comments.js"}}"></script>
 
           <title>{{meta_title}} – {{@site.title}}</title>
 
       {{/is}}
+      {{#is "post"}}
+        <script src="{{asset "js/remark42-comments.js"}}"></script>
+      {{/is}}
     <!-- End Posts & Pages only code -->
 
+    <!-- Begin Tags only code -->
+    {{# is "tag"}}
+      <link rel="stylesheet" type="text/css" href="{{asset "css/tag-style.css"}}" />
+    {{/is}}
+    <!-- End Tags only code -->
+
     <!-- Begin Index only code -->
       {{#is "index"}}
         <title>{{@site.title}}</title>
 
         <link rel="stylesheet" type="text/css" href="{{asset "css/home-style.css"}}" />
       {{/is}}
+
+      {{#is "index, tag"}}
+              <link rel="stylesheet" type="text/css" href="{{asset "css/post-card-style.css"}}" />
+      {{/is}}
     <!-- End Index only code -->
 
     {{ghost_head}}

home.hbs

@@ -0,0 +1,44 @@
+{{!< default}}
+
+<div class="mind-site-title unselectable" id="vantajs">
+  			<h1>{{@site.title}}</h1>
+        <i class="mind-all-title_arrow-down mind-all-title_arrow-down-big"></i>
+</div>
+
+
+<main>
+  <nav class="navbar-secondary unselectable">
+    {{navigation type="secondary"}}
+  </nav>
+  <div class="mind-content_main">
+    <div class="mind-feed_main">
+
+      <!-- Looping through every post -->
+      {{#foreach posts}}
+      	{{> "post-card-big"}}
+      {{/foreach}}
+    </div>
+  </div>
+</main>
+
+<!-- Vanta.JS Scripts to make the background cool, but disabled on mobile -->
+<script>
+	if(window.screen.width > 800)
+	{
+		document.write('<script src="{{asset "js/three.r95.min.js"}}"><\/script>' +
+					   '<script src="{{asset "js/vanta.net.min.js"}}"><\/script>' +
+					   '<script>' +
+					   		'VANTA.NET({'+
+					   			'el: "#vantajs",'+
+					   			'color: 0x3fd5ff,'+
+						   		'backgroundColor: 0x190f2b,'+
+						   		'mouseControls: true,'+
+					   			'touchControls: true,'+
+					   			'minHeight: 200.00,'+
+					   			'minWidth: 200.00,'+
+					   			'scale: 1.00,'+
+					   			'scaleMobile: 1.00'+
+							'})'+
+						'<\/script>');
+    }
+</script>

index.hbs

@@ -2,7 +2,7 @@
 
 <div class="mind-site-title unselectable" id="vantajs">
   			<h1>{{@site.title}}</h1>
-        <i class="arrow-down"></i>
+        <i class="mind-all-title_arrow-down mind-all-title_arrow-down-big"></i>
 </div>
 
 
@@ -15,21 +15,7 @@
 
       <!-- Looping through every post -->
       {{#foreach posts}}
-      	<article class="{{post_class}}">
+      	{{> "post-card-big"}}
-          <a class="post-card_main" href="{{url}}">
-            <img class="post-card_feature-image" src="{{img_url feature_image size="m"}}" />
-         		<header class="post-card_header">
-              <p class="post-card_meta"><span class="post-card_tag">{{primary_tag.name}}</span> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
-           		<h3>{{title}}</h3>
-            </header>
-            <section class="post-card_excerpt">
-         			<p>{{excerpt words="26"}}</p>
-            </section>
-            <footer class="post-card_footer">
-              {{primary_author.name}}
-              {{#if primary_author.profile_image}}<img class="post-card_author-image" src="{{img_url primary_author.profile_image size="xxs"}}" alt="Author image" />{{/if}}
-            </footer>
-          </a>
         </article>
       {{/foreach}}
     </div>

package.json

@@ -1,7 +1,7 @@
 {
     "name": "mindtheme",
     "description": "Mind Overflow's official website style",
-    "version": "0.0.4",
+    "version": "0.0.5",
     "engines": {
         "ghost-api": "v3"
     },
@@ -24,6 +24,9 @@
           },
           "m": {
             "width": 600
+          },
+          "l": {
+            "width": 1200
           }
         }
     }

page.hbs

@@ -1,12 +1,24 @@
 {{!< default}}
-{{#post}}
+<div class="mind-page-title unselectable">
-  <div class="mind-page-title unselectable">
+  {{#post}}
-    <h1>{{title}}</h1>
+    <div>
-    <i class="arrow-down"></i>
+      <h1>{{title}}</h1>
-  </div>
-
-  <main>
-    <div class="mind-content_main">
     </div>
-  </main>
+  {{/post}}
-{{/post}}
+  <i class="mind-all-title_arrow-down mind-all-title_arrow-down-mid"></i>
+</div>
+
+<main>
+	<div class="mind-content_main">
+    <div class="mind-page_main">
+      {{#post}}
+      <div class="mind-post_content">
+        <div class="mind-post_content-header">
+          <img class="mind-post_feature-image" src="{{img_url feature_image size="l"}}"/>
+        </div>
+        {{content}}
+      </div>
+      {{/post}}
+    </div>
+  </div>
+</main>

partials/post-card-big.hbs

@@ -0,0 +1,17 @@
+<article class="{{post_class}}">
+  <a class="post-card_main" href="{{url}}">
+    <img class="post-card_feature-image" src="{{img_url feature_image size="m"}}" />
+    <header class="post-card_header">
+      <p class="post-card_meta"><span class="post-card_tag">{{primary_tag.name}}</span>
+        • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
+      <h3>{{title}}</h3>
+    </header>
+    <section class="post-card_excerpt">
+      <p>{{excerpt words="26"}}</p>
+    </section>
+    <footer class="post-card_footer">
+      {{primary_author.name}}
+      {{#if primary_author.profile_image}}<img class="post-card_author-image" src="{{img_url primary_author.profile_image size="xxs"}}" alt="Author image" />{{/if}}
+    </footer>
+  </a>
+</article>

post.hbs

@@ -1,9 +1,13 @@
 {{!< default}}
 <div class="mind-page-title unselectable">
   {{#post}}
+
+<div>
     <h1>{{title}}</h1>
+    <p><a href="{{primary_tag.url}}">{{primary_tag.name}}</a> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
+</div>
   {{/post}}
-  <i class="arrow-down"></i>
+  <i class="mind-all-title_arrow-down mind-all-title_arrow-down-mid"></i>
 </div>
 
 <main>
@@ -14,7 +18,7 @@
       {{#post}}
       <div class="mind-post_content">
         <div class="mind-post_content-header">
-          <img class="mind-post_feature-image" src="{{img_url feature_image}}"/>
+          <img class="mind-post_feature-image" src="{{img_url feature_image size="l"}}"/>
         </div>
         {{content}}
         <hr>

tag.hbs

@@ -0,0 +1,52 @@
+{{!< default}}
+
+<div class="mind-page-title unselectable">
+  {{#tag}}
+
+    <div>
+      <h1>{{name}}</h1>
+      <p>
+        {{#if description}}
+          {{description}}
+        {{else}}
+          {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
+        {{/if}}
+      </p>
+    </div>
+  {{/tag}}
+  <i class="mind-all-title_arrow-down mind-all-title_arrow-down-mid"></i>
+</div>
+
+<main>
+  <div class="mind-content_main">
+    <div class="mind-feed_main">
+
+      <!-- Looping through every post -->
+      {{#foreach posts}}
+      	{{> "post-card-big"}}
+      {{/foreach}}
+    </div>
+  </div>
+</main>
+
+<!-- Vanta.JS Scripts to make the background cool, but disabled on mobile -->
+<script>
+	if(window.screen.width > 800)
+	{
+		document.write('<script src="{{asset "js/three.r95.min.js"}}"><\/script>' +
+					   '<script src="{{asset "js/vanta.net.min.js"}}"><\/script>' +
+					   '<script>' +
+					   		'VANTA.NET({'+
+					   			'el: "#vantajs",'+
+					   			'color: 0x3fd5ff,'+
+						   		'backgroundColor: 0x190f2b,'+
+						   		'mouseControls: true,'+
+					   			'touchControls: true,'+
+					   			'minHeight: 200.00,'+
+					   			'minWidth: 200.00,'+
+					   			'scale: 1.00,'+
+					   			'scaleMobile: 1.00'+
+							'})'+
+						'<\/script>');
+    }
+</script>