Add metadetails section with details about movies

layouts/partials/head.html

@@ -11,6 +11,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   <!-- Google tag (gtag.js) -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>

layouts/partials/metadetails.html

@@ -0,0 +1,36 @@
+<dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="{{- .Params.imdb_link -}}" title="Link to IMDb page for {{ .Title }}">IMDb</a>
+      </dt>
+      <dd class="numbers">{{- .Params.imdb -}}</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="{{- .Params.rotten_tomatoes_link -}}" title="Link to Rotten Tomatoes page for {{ .Title }}">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">{{- .Params.rotten_tomatoes -}}</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="{{- .Params.metacritic_link -}}" title="Link to Metacritic page for {{ .Title }}">Metacritic</a>
+      </dt>
+      <dd class="numbers">{{- .Params.metacritic -}}</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">{{- .Params.year -}}</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">{{- .Params.mpaa -}}</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">{{- .Params.box_office -}}</dd>
+    </div>
+  </div>
+</dl>

layouts/reviews/single.html

@@ -17,6 +17,7 @@
       {{- .PublishDate | time.Format ":date_long" -}}
     </h2>
     {{ partial "quicklook.html" . }}
+    {{ partial "metadetails.html" . }}
   </header>
   <div class="core-content">
     {{- .Content -}}

static/metadetails.css

@@ -0,0 +1,19 @@
+.metadetails-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.metadetails-row {
+  display: flex;
+  gap: 30px;
+  align-items: center;
+  justify-content: center;
+}
+
+.metadetails-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

static/style.css

@@ -44,7 +44,7 @@
 
   --numbers-font-family: 'Monaco', sans-serif;
   --numbers-font-weight: 400;
-  --numbers-font-line-height: 1;
+  --numbers-font-line-height: 1.2;
   --numbers-font-size: 16px;
   --numbers-font-size-large: 40px;
   --numbers-font-letter-spacing: -0.02em;