Finish creating /tags/ page

The tags page was finally completed, and shows every tag
with its own image.

A "see all tags" link was added in the header of every
(single) tag's page, in case of a missing description.

Also, the "secondary navigation" div now has a relative
position and a higher z-index, so that the tags page's
header does not cast a shadow on it.

Signed-off-by: Lorenzo Dellacà <lorenzo.dellaca@mind-overflow.net>

assets/css/screen.css

@@ -10,10 +10,13 @@ TABLE OF CONTENTS
   1.4.     Footer
   1.5.     Header
 2.       Index Style
-3.       Post Feed
+3.       Feeds
-4.       Post Cards
+  3.1.     Post Feed
+  3.2.     Tag Feed
+4.       Post & Tag Cards
   4.1.     Big Post Card style
   4.2.     Navbar Post Card Style
+  4.3.     Tag Card Style
 5.       Pages & Posts style
   5.1.     Header
   5.2.     Content
@@ -245,6 +248,9 @@ is applied by the script on scroll.
 	padding: 0;
 
 	background-color: rgb(50, 50, 50);
+
+  position: relative;
+  z-index: 4;
 }
 
 .mind-global-navbar_secondary li {
@@ -351,9 +357,13 @@ Used to style the index/homepage.
 	font-size: 90px;
 }
 
-/* 3. Post Feed
+/* 3. Feeds
 --------------------------------------------------
-Used to style the post feed, seen in the homepage & custom-tags page.
+*/
+
+/* 3.1. Post Feed
+--------------------------------------------------
+Used to style the post feed, seen in the index/home page.
 */
 
 .mind-feed-content_main {
@@ -363,8 +373,19 @@ Used to style the post feed, seen in the homepage & custom-tags page.
 	padding: 50px 0;
 }
 
+/* 3.2. Tag Feed
+--------------------------------------------------
+Used to style the tag feed, seen in the custom-tags page.
+*/
 
-/* 4. Post Cards
+.mind-tag-content_main {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+	grid-gap: 30px;
+	padding: 50px 0;
+}
+
+/* 4. Post & Tag Cards
 --------------------------------------------------
 */
 
@@ -525,6 +546,55 @@ footer.mind-post-card-big_footer {
 }
 
 
+/* 4.3. Tag Card Style
+--------------------------------------------------
+*/
+
+.mind-tag-card_main {
+	/* Layout */
+	display: flex;
+	flex-direction: column;
+  height: 100%;
+
+	/* Style */
+	background-color: rgb(40, 40, 40);
+	border-radius: 5px;
+	box-shadow: 0 0 2px rgb(0,0,0), 0 2px 3px rgb(0,0,0);
+	transition: .3s;
+}
+
+.mind-tag-card_main:hover {
+	transform:translate3d(0,-5px,0);
+	box-shadow: 0 0 2px rgb(0,0,0), 0 2px 10px rgb(0,0,0);
+}
+.mind-tag-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: 200px;
+	max-height: 100%;
+
+
+	border-radius: 5px;
+}
+.mind-tag-card_header {
+  margin: auto;
+}
+
+.mind-tag-card_header h4 {
+  font-size: 20px;
+  text-align: center;
+  margin: 10px;
+}
 /* 5. Pages & Posts style
 --------------------------------------------------
 style shared between pages and posts (eg. title).

custom-tags.hbs

@@ -9,14 +9,16 @@
 </div>
 
 <main>
-  <nav class="navbar-secondary unselectable">
+  <nav class="mind-global-navbar_secondary unselectable">
     {{navigation type="secondary"}}
   </nav>
   <div class="mind-content_main">
-    <div class="mind-feed-content_main">
+    <div class="mind-tag-content_main">
-      {{#foreach tags}}
+      {{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}
-        {{> "tag-card-big"}}
+        {{#foreach tags}}
-      {{/foreach}}
+          {{> "tag-card-big"}}
+        {{/foreach}}
+      {{/get}}
     </div>
   </div>
 </main>

partials/tag-card-big.hbs

@@ -1,17 +1,8 @@
 <article class="{{post_class}}">
-  <a class="mind-post-card-big_main" href="{{url}}">
+  <a class="mind-tag-card_main" href="{{url}}">
-    <img class="mind-post-card-big_feature-image" src="{{img_url feature_image size="m"}}" />
+    <img class="mind-tag-card_feature-image" src="{{img_url feature_image size="s"}}" />
-    <header class="mind-post-card-big_header">
+    <header class="mind-tag-card_header">
-      <p class="mind-post-card-big_meta"><span class="mind-post-card-big_tag">{{primary_tag.name}}</span>
+      <h4>{{name}}</h4>
-        • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
-      <h3>{{title}}</h3>
     </header>
-    <section class="mind-post-card-big_excerpt">
-      <p>{{excerpt words="26"}}</p>
-    </section>
-    <footer class="mind-post-card-big_footer">
-      {{primary_author.name}}
-      {{#if primary_author.profile_image}}<img class="mind-post-card-big_author-image" src="{{img_url primary_author.profile_image size="xxs"}}" alt="Author image" />{{/if}}
-    </footer>
   </a>
 </article>

tag.hbs

@@ -10,6 +10,7 @@
           {{description}}
         {{else}}
           {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
+              • <a  class="mind-post-header_tag" href="/tags/">see all tags</a>
         {{/if}}
       </p>
     </div>