From 8bb77d83704420018879774281e01c700fe1b111 Mon Sep 17 00:00:00 2001
From: Campbell Alden <campbell.alden@bibo.com.ph>
Date: Wed, 19 Oct 2022 17:35:26 +0900
Subject: [PATCH] Add metadetails section with details about movies

---
 layouts/partials/head.html        |  1 +
 layouts/partials/metadetails.html | 36 +++++++++++++++++++++++++++++++
 layouts/reviews/single.html       |  1 +
 static/metadetails.css            | 19 ++++++++++++++++
 static/style.css                  |  2 +-
 5 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 layouts/partials/metadetails.html
 create mode 100644 static/metadetails.css

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 7a86821..2fae879 100644
--- a/layouts/partials/head.html
+++ b/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>
diff --git a/layouts/partials/metadetails.html b/layouts/partials/metadetails.html
new file mode 100644
index 0000000..bd1a9f3
--- /dev/null
+++ b/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>
diff --git a/layouts/reviews/single.html b/layouts/reviews/single.html
index 47ec531..9afd26c 100644
--- a/layouts/reviews/single.html
+++ b/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 -}}
diff --git a/static/metadetails.css b/static/metadetails.css
new file mode 100644
index 0000000..00d78fd
--- /dev/null
+++ b/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;
+}
diff --git a/static/style.css b/static/style.css
index 5b80772..4d7f2d4 100644
--- a/static/style.css
+++ b/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;