From bb1d2e5761004cc1968093a629a9361ab92f43d4 Mon Sep 17 00:00:00 2001
From: Campbell Alden <campbell.alden@bibo.com.ph>
Date: Wed, 31 Aug 2022 18:05:47 +0900
Subject: [PATCH] PUBLISH: improve specific genre list pages

---
 docs/genres/comedy/index.html  | 37 ++++++++++++------
 docs/genres/drama/index.html   | 68 +++++++++++++++++++++++-----------
 docs/genres/romance/index.html | 68 +++++++++++++++++++++++-----------
 layouts/_default/taxonomy.html | 26 +++++--------
 layouts/_default/terms.html    | 21 +++++++++++
 5 files changed, 147 insertions(+), 73 deletions(-)
 create mode 100644 layouts/_default/terms.html

diff --git a/docs/genres/comedy/index.html b/docs/genres/comedy/index.html
index 10afb59..335cae9 100644
--- a/docs/genres/comedy/index.html
+++ b/docs/genres/comedy/index.html
@@ -35,21 +35,34 @@
 </header>
 <main id="content">
   <section>
-    <header style="margin-bottom: 30px;">
+    <header class="cluster s1 spacing:between" style="align-items: center; margin-bottom: 10px">
       <h1>Comedy</h1>
+      <a class="button button:large" href="https://caalden.github.io/film/genres">Back to Genres</a>
     </header>
+    <div class="cards">
+      <div class="card">
+  <div class="card-image">
+    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">The French Dispatch</h3>
+    </header>
+    <div style="text-align: justify;">Authors for a New Yorker-esque magazine report on a small town in France</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        <img src="https://caalden.github.io/film/imdb-logo-small.png" class="icon" alt="imbd logo">
+        <span class="numbers">7.2</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/the-french-dispatch/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
 
-    
-      <section>
-        <header class="cluster spacing:between p1" style="align-items: flex-end;">
-          <h2></h2>
-          <a href="" class="button button:large">See more</a>
-        </header>
-        <div class="carasol">
-          
-        </div>
-      </section>
-    
+    </div>
   </section>
 
         </main><footer>
diff --git a/docs/genres/drama/index.html b/docs/genres/drama/index.html
index f8ce72a..93854a3 100644
--- a/docs/genres/drama/index.html
+++ b/docs/genres/drama/index.html
@@ -35,31 +35,55 @@
 </header>
 <main id="content">
   <section>
-    <header style="margin-bottom: 30px;">
+    <header class="cluster s1 spacing:between" style="align-items: center; margin-bottom: 10px">
       <h1>Drama</h1>
+      <a class="button button:large" href="https://caalden.github.io/film/genres">Back to Genres</a>
     </header>
+    <div class="cards">
+      <div class="card">
+  <div class="card-image">
+    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">No Reservations</h3>
+    </header>
+    <div style="text-align: justify;">A NY City chef and her recently adopted niece adapt to their life together</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        <img src="https://caalden.github.io/film/imdb-logo-small.png" class="icon" alt="imbd logo">
+        <span class="numbers">6.3</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/no-reservations/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+<div class="card">
+  <div class="card-image">
+    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">The French Dispatch</h3>
+    </header>
+    <div style="text-align: justify;">Authors for a New Yorker-esque magazine report on a small town in France</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        <img src="https://caalden.github.io/film/imdb-logo-small.png" class="icon" alt="imbd logo">
+        <span class="numbers">7.2</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/the-french-dispatch/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
 
-    
-      <section>
-        <header class="cluster spacing:between p1" style="align-items: flex-end;">
-          <h2></h2>
-          <a href="" class="button button:large">See more</a>
-        </header>
-        <div class="carasol">
-          
-        </div>
-      </section>
-    
-      <section>
-        <header class="cluster spacing:between p1" style="align-items: flex-end;">
-          <h2></h2>
-          <a href="" class="button button:large">See more</a>
-        </header>
-        <div class="carasol">
-          
-        </div>
-      </section>
-    
+    </div>
   </section>
 
         </main><footer>
diff --git a/docs/genres/romance/index.html b/docs/genres/romance/index.html
index a93e2d4..da517dc 100644
--- a/docs/genres/romance/index.html
+++ b/docs/genres/romance/index.html
@@ -35,31 +35,55 @@
 </header>
 <main id="content">
   <section>
-    <header style="margin-bottom: 30px;">
+    <header class="cluster s1 spacing:between" style="align-items: center; margin-bottom: 10px">
       <h1>Romance</h1>
+      <a class="button button:large" href="https://caalden.github.io/film/genres">Back to Genres</a>
     </header>
+    <div class="cards">
+      <div class="card">
+  <div class="card-image">
+    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">No Reservations</h3>
+    </header>
+    <div style="text-align: justify;">A NY City chef and her recently adopted niece adapt to their life together</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        <img src="https://caalden.github.io/film/imdb-logo-small.png" class="icon" alt="imbd logo">
+        <span class="numbers">6.3</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/no-reservations/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+<div class="card">
+  <div class="card-image">
+    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">The French Dispatch</h3>
+    </header>
+    <div style="text-align: justify;">Authors for a New Yorker-esque magazine report on a small town in France</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        <img src="https://caalden.github.io/film/imdb-logo-small.png" class="icon" alt="imbd logo">
+        <span class="numbers">7.2</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/the-french-dispatch/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
 
-    
-      <section>
-        <header class="cluster spacing:between p1" style="align-items: flex-end;">
-          <h2></h2>
-          <a href="" class="button button:large">See more</a>
-        </header>
-        <div class="carasol">
-          
-        </div>
-      </section>
-    
-      <section>
-        <header class="cluster spacing:between p1" style="align-items: flex-end;">
-          <h2></h2>
-          <a href="" class="button button:large">See more</a>
-        </header>
-        <div class="carasol">
-          
-        </div>
-      </section>
-    
+    </div>
   </section>
 
         </main><footer>
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
index ab51d36..ec2a83d 100644
--- a/layouts/_default/taxonomy.html
+++ b/layouts/_default/taxonomy.html
@@ -1,21 +1,13 @@
-{{ define "main"}}
+{{define "main"}}
   <section>
-    <header style="margin-bottom: 30px;">
+    <header class="cluster s1 spacing:between" style="align-items: center; margin-bottom: 10px">
       <h1>{{.Title}}</h1>
+      <a class="button button:large" href="{{.Site.BaseURL}}genres">Back to Genres</a>
     </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}}
+    <div class="cards">
+      {{ range .Pages }}
+        {{- .Render "summary" -}}
+      {{ end }}
+    </div>
   </section>
-{{ end }}
+{{end}}
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
new file mode 100644
index 0000000..ab51d36
--- /dev/null
+++ b/layouts/_default/terms.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 }}