Update styles and set up genres list page

layouts/_default/list.html

@@ -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 }}

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 }}

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;

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;
+}