From 870c36de1f6e97e5ca470eb63b5c77a9d7171681 Mon Sep 17 00:00:00 2001
From: Campbell Alden <campbell.alden@bibo.com.ph>
Date: Wed, 31 Aug 2022 17:57:49 +0900
Subject: [PATCH] Update styles and set up genres list page

---
 layouts/_default/list.html     | 17 -----------------
 layouts/_default/taxonomy.html | 21 +++++++++++++++++++++
 static/card.css                |  8 ++++++--
 static/style.css               |  9 ++++++++-
 4 files changed, 35 insertions(+), 20 deletions(-)
 delete mode 100644 layouts/_default/list.html

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
deleted file mode 100644
index 9de393d..0000000
--- a/layouts/_default/list.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{{ define "main" }}
-  <article>
-      <header>
-          <h1>{{.Title}}</h1>
-      </header>
-      <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
-      {{.Content}}
-  </article>
-  <ul>
-  <!-- Ranges through content/posts/*.md -->
-  {{ range .Pages }}
-      <li>
-          <a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a>
-      </li>
-  {{ end }}
-  </ul>
-{{ end }}
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
index e69de29..ab51d36 100644
--- a/layouts/_default/taxonomy.html
+++ b/layouts/_default/taxonomy.html
@@ -0,0 +1,21 @@
+{{ define "main"}}
+  <section>
+    <header style="margin-bottom: 30px;">
+      <h1>{{.Title}}</h1>
+    </header>
+
+    {{range .Pages }}
+      <section>
+        <header class="cluster spacing:between p1" style="align-items: flex-end;">
+          <h2>{{.Data.Term}}</h2>
+          <a href="{{ .Data.Term | urlize }}" class="button button:large">See more</a>
+        </header>
+        <div class="carasol">
+          {{range first 25 .Data.Pages | shuffle }}
+            {{ .Render "summary" }}
+          {{end}}
+        </div>
+      </section>
+    {{end}}
+  </section>
+{{ end }}
diff --git a/static/card.css b/static/card.css
index 57727ed..b4c52b3 100644
--- a/static/card.css
+++ b/static/card.css
@@ -23,10 +23,12 @@
 
 .card:hover .card-content {
   flex-basis: 50%;
+  transition-delay: 0ms;
   padding-top: 10px;
 }
 .card:hover .card-image {
   flex-basis: 50%;
+  transition-delay: 0ms;
 }
 
 .card-content {
@@ -35,11 +37,13 @@
   flex-direction: column;
   gap: 10px;
   justify-content: space-between;
-  transition: flex-basis 250ms ease-out;
+  transition: all 250ms ease-out;
+  transition-delay: 250ms;
 }
 
 .card-image {
-  transition: flex-basis 250ms ease-out;
+  transition: all 250ms ease-out;
+  transition-delay: 250ms;
   flex-grow: 1;
   flex-basis: 100%;
   object-fit: cover;
diff --git a/static/style.css b/static/style.css
index d56b255..d1b108c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -90,7 +90,7 @@ main {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  max-width: 900px;
+  max-width: 930px;
 }
 
 .title, h1 {
@@ -284,3 +284,10 @@ a:hover {
 .http-header {
   class="home-page-header" margin-top: 10vh;
 }
+
+.carasol {
+  display: flex;
+  overflow: auto;
+  gap: 10px;
+  padding-bottom: 20px;
+}