Add card styles and some more information to fill them out

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>