Add card styles and some more information to fill them out

.gitignore

@@ -1 +1,2 @@
 .hugo_build.lock
+scratch/

archetypes/reviews.md

@@ -3,5 +3,7 @@ title: "{{ replace .Name "-" " " | title }}"
 date: {{ .Date }}
 draft: true
 rating: 5
+imdb: 0.0
+image: https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX300.jpg
 ---
 

content/reviews/the-french-dispatch.md

@@ -3,6 +3,8 @@ title: "The French Dispatch"
 date: 2022-08-17T17:18:04+09:00
 draft: false
 rating: 5
+imdb: 7.2
+image: https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX300.jpg
 summary: "A new film from Wes Anderson styled after a magazine"
 ---
 

docs/style.css

@@ -181,3 +181,10 @@ a:hover {
   background: var(--color-secondary);
   color: var(--color-primary);
 }
+
+.s1 {
+  gap: 10px;
+}
+.s2 {
+  gap: 20px;
+}

layouts/_default/single.html

@@ -2,6 +2,9 @@
 <article>
   <header>
     <h1>{{- .Title -}}</h1>
+    {{ if .Params.image }}
+      <img src={{.Params.image}} alt="Poster">
+    {{ end }}
     {{ if .Params.rating }}
       <strong>Rating</strong>
       {{ range seq $.Params.rating }}

layouts/_default/summary.html

@@ -1,12 +1,26 @@
-<div>
-  <div>
-    <h2>
-      <a href="{{ .RelPermalink }}">
-        {{ .Title }}
-      </a>
-    </h2>
+<div class="card">
+  <div class="card-image">
+    <img class="card-image" src={{ .Params.image }} />
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">
+          {{ .Title }}
+        </a>
+      </h3>
+    </header>
     <div>
       {{ .Summary }}
     </div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        <img src="{{site.BaseURL}}imdb-logo-small.png" class="icon">
+        <span class="numbers">{{- .Params.imdb -}}</span>
+      </div>
+      <div>
+        <a class="button" href="{{ .RelPermalink }}">
+          Read review
+        </a>
+    </div>
   </div>
 </div>

layouts/index.html

@@ -2,9 +2,11 @@
   <div>
     {{ .Content }}
   </div>
-  <div>
-    {{ range first 10 .Site.RegularPages }}
-      {{ .Render "summary"}}
+  <div class="cluster s1">
+    {{ range (where .Site.Pages "Section" "reviews") }}
+       {{ range .Pages }}
+          {{ .Render "summary" }}
+       {{ end }}
     {{ end }}
   </div>
 {{end}}

layouts/partials/footer.html

@@ -1,2 +1,3 @@
 <footer>
+  <span>{{ .Site.Copyright }}</span>
 </footer>

layouts/partials/head.html

@@ -3,6 +3,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
   <link rel="stylesheet" href="/film/style.css">
+  <link rel="stylesheet" href="/film/card.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inika:wght@400;700&family=Merriweather:wght@400;700&family=Rufina&display=swap" rel="stylesheet">

layouts/partials/header.html

@@ -1,4 +1,4 @@
 <header class="header">
   <h2 class="title">CaAlden: <span class="color:accent">Films</span></h2>
-  {{- partial "nav.html" -}}
+  {{- partial "nav.html" . -}}
 </header>

layouts/partials/nav.html

@@ -1,10 +1,10 @@
 <nav class="navbar">
   <ul class="navbar-list">
     <li class="navbar-item button:large">
-      <a href="{{ site.BaseURL }}about" class="button button:large">about</a>
+      <a href="{{ .Site.BaseURL }}about" class="button button:large color:invert">about</a>
     </li>
     <li class="navbar-item button:large">
-      <a href="{{ site.BaseURL }}" class="button button:large">home</a>
+      <a href="{{ .Site.BaseURL }}" class="button button:large color:invert">home</a>
     </li>
   </ul>
 </nav>

static/card.css

@@ -0,0 +1,46 @@
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: 10px;
+  background: var(--color-primary);
+  aspect-ratio: 2 / 3;
+  max-width: 250px;
+  max-height: 380px;
+  padding: 10px;
+}
+
+.card .card-content {
+  flex-basis: 0.0001%;
+}
+.card .card-image {
+  flex-basis: 99.9999%;
+}
+
+.card:hover .card-content {
+  flex-basis: 50%;
+  padding-top: 10px;
+}
+.card:hover .card-image {
+  flex-basis: 50%;
+}
+
+.card-content {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: space-between;
+  transition: flex-basis 250ms ease-out;
+}
+
+.card-image {
+  transition: flex-basis 250ms ease-out;
+  flex-grow: 1;
+  flex-basis: 100%;
+  object-fit: cover;
+  display: flex;
+  overflow: hidden;
+  border-radius: 8px;
+}
+

static/style.css

@@ -122,7 +122,6 @@ button, .button {
 
   background: transparent;
   /* inherit font & color from ancestor */
-  color: inherit;
   font: inherit;
 
   /* Corrects font smoothing for webkit */
@@ -181,3 +180,28 @@ a:hover {
   background: var(--color-secondary);
   color: var(--color-primary);
 }
+
+.cluster {
+  display: flex;
+}
+.spacing\:between {
+  justify-content: space-between;
+}
+.align\:center {
+  align-items: center;
+}
+
+.icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.s1 {
+  gap: 10px;
+}
+
+.p1 {
+  padding: 10px;
+}