PUBLISH: Republish all reviews with the new metadata

docs/404.html

@@ -20,6 +20,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>

docs/about/index.html

@@ -23,6 +23,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>

docs/favorites/index.html

@@ -23,6 +23,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>

docs/genres/action/index.html

@@ -20,6 +20,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>

docs/genres/adventure/index.html

@@ -20,6 +20,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>

docs/genres/comedy/index.html

@@ -20,6 +20,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>

docs/genres/crime/index.html

@@ -20,6 +20,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>

docs/genres/drama/index.html

@@ -20,6 +20,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>

docs/genres/family/index.html

@@ -20,6 +20,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>

docs/genres/horror/index.html

@@ -20,6 +20,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>

docs/genres/index.html

@@ -20,6 +20,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -58,51 +59,21 @@
           
             <div class="card">
   <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2MDc0NDY0M15BMl5BanBnXkFtZTcwOTgzMTYyNQ@@._V1_SX800.webp alt="Fright Night" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjA3NzI1ODc1MV5BMl5BanBnXkFtZTcwMzI5NjQwNg@@._V1_SX800.webp alt="In Time" />
-    
-      <a class="card-favorite-star" href="https://caalden.github.io/film/favorites">
-        <span hidden>Favorite</span>
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="yellow" stroke="gold" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-
-      </a>
     
   </div>
   <section class="card-content">
     <header>
-      <h3 class="subtitle">Fright Night</h3>
+      <h3 class="subtitle">In Time</h3>
     </header>
-    <div>A high school student suspects his next door neighbor is a vampire</div>
+    <div>A dystopian future where time is literally money</div>
     <div class="cluster spacing:between">
       <div class="cluster s1 align:center">
         Rating:
         <span class="numbers">4/5</span>
       </div>
       <div>
-        <a class="button" href="/film/reviews/fright-night/">
+        <a class="button" href="/film/reviews/in-time/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
-            <div class="card">
-  <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Beverly Hills Cop" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle">Beverly Hills Cop</h3>
-    </header>
-    <div>A Detroit cop comes to Beverly Hills to find the man who murdered his friend</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">4/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/beverly-hills-cop/">
           Read review
         </a>
     </div>
@@ -134,6 +105,60 @@
 </div>
 
           
+            <div class="card">
+  <div class="card-image">
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Beverly Hills Cop" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">Beverly Hills Cop</h3>
+    </header>
+    <div>A Detroit cop comes to Beverly Hills to find the man who murdered his friend</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">4/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/beverly-hills-cop/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
+            <div class="card">
+  <div class="card-image">
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2MDc0NDY0M15BMl5BanBnXkFtZTcwOTgzMTYyNQ@@._V1_SX800.webp alt="Fright Night" />
+    
+      <a class="card-favorite-star" href="https://caalden.github.io/film/favorites">
+        <span hidden>Favorite</span>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="yellow" stroke="gold" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+
+      </a>
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">Fright Night</h3>
+    </header>
+    <div>A high school student suspects his next door neighbor is a vampire</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">4/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/fright-night/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
             <div class="card">
   <div class="card-image">
     <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" />
@@ -158,30 +183,6 @@
 </div>
 
           
-            <div class="card">
-  <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjA3NzI1ODc1MV5BMl5BanBnXkFtZTcwMzI5NjQwNg@@._V1_SX800.webp alt="In Time" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle">In Time</h3>
-    </header>
-    <div>A dystopian future where time is literally money</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">4/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/in-time/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
         </div>
       </section>
     
@@ -360,30 +361,6 @@
 </div>
 
           
-            <div class="card">
-  <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Kingsman: The Secret Service" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle card-title-long">Kingsman: The Secret Service</h3>
-    </header>
-    <div>A secret British spy agency unravels a billionaire&rsquo;s evil plot</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">4/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/kingsman/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
             <div class="card">
   <div class="card-image">
     <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" />
@@ -408,16 +385,6 @@
 </div>
 
           
-        </div>
-      </section>
-    
-      <section>
-        <header class="cluster spacing:between p1" style="align-items: flex-end;">
-          <h2>Comedy</h2>
-          <a href="comedy" class="button button:large">See more</a>
-        </header>
-        <div class="carasol">
-          
             <div class="card">
   <div class="card-image">
     <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Kingsman: The Secret Service" />
@@ -442,6 +409,16 @@
 </div>
 
           
+        </div>
+      </section>
+    
+      <section>
+        <header class="cluster spacing:between p1" style="align-items: flex-end;">
+          <h2>Comedy</h2>
+          <a href="comedy" class="button button:large">See more</a>
+        </header>
+        <div class="carasol">
+          
             <div class="card">
   <div class="card-image">
     <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="The French Dispatch" />
@@ -468,21 +445,21 @@
           
             <div class="card">
   <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Kingsman: The Secret Service" />
     
   </div>
   <section class="card-content">
     <header>
-      <h3 class="subtitle">Now You See Me 2</h3>
+      <h3 class="subtitle card-title-long">Kingsman: The Secret Service</h3>
     </header>
-    <div>A group of magicians are coerced into pulling off another heist</div>
+    <div>A secret British spy agency unravels a billionaire&rsquo;s evil plot</div>
     <div class="cluster spacing:between">
       <div class="cluster s1 align:center">
         Rating:
-        <span class="numbers">2/5</span>
+        <span class="numbers">4/5</span>
       </div>
       <div>
-        <a class="button" href="/film/reviews/now-you-see-me-2/">
+        <a class="button" href="/film/reviews/kingsman/">
           Read review
         </a>
     </div>
@@ -544,6 +521,30 @@
 </div>
 
           
+            <div class="card">
+  <div class="card-image">
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">Now You See Me 2</h3>
+    </header>
+    <div>A group of magicians are coerced into pulling off another heist</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">2/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/now-you-see-me-2/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
         </div>
       </section>
     
@@ -602,6 +603,30 @@
 </div>
 
           
+            <div class="card">
+  <div class="card-image">
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="The French Dispatch" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">The French Dispatch</h3>
+    </header>
+    <div>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">
+        Rating:
+        <span class="numbers">4/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/the-french-dispatch/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
             <div class="card">
   <div class="card-image">
     <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTg0MTU5ODkwM15BMl5BanBnXkFtZTYwMzgxNzY3._V1_SX800.webp alt="Holes" />
@@ -632,30 +657,6 @@
 </div>
 
           
-            <div class="card">
-  <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="The French Dispatch" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle">The French Dispatch</h3>
-    </header>
-    <div>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">
-        Rating:
-        <span class="numbers">4/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/the-french-dispatch/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
         </div>
       </section>
     
@@ -702,21 +703,21 @@
           
             <div class="card">
   <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BZDg0MWNmNjktMGEwZC00ZDlmLWI1MTUtMDBmNjQzMWM2NjBjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Whisper of the Heart" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="The French Dispatch" />
     
   </div>
   <section class="card-content">
     <header>
-      <h3 class="subtitle">Whisper of the Heart</h3>
+      <h3 class="subtitle">The French Dispatch</h3>
     </header>
-    <div>A slice of life story about a bookish middle school girl living in Tokyo</div>
+    <div>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">
         Rating:
-        <span class="numbers">5/5</span>
+        <span class="numbers">4/5</span>
       </div>
       <div>
-        <a class="button" href="/film/reviews/whisper-of-the-heart/">
+        <a class="button" href="/film/reviews/the-french-dispatch/">
           Read review
         </a>
     </div>
@@ -750,21 +751,21 @@
           
             <div class="card">
   <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="The French Dispatch" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BZDg0MWNmNjktMGEwZC00ZDlmLWI1MTUtMDBmNjQzMWM2NjBjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Whisper of the Heart" />
     
   </div>
   <section class="card-content">
     <header>
-      <h3 class="subtitle">The French Dispatch</h3>
+      <h3 class="subtitle">Whisper of the Heart</h3>
     </header>
-    <div>Authors for a New Yorker-esque magazine report on a small town in France</div>
+    <div>A slice of life story about a bookish middle school girl living in Tokyo</div>
     <div class="cluster spacing:between">
       <div class="cluster s1 align:center">
         Rating:
-        <span class="numbers">4/5</span>
+        <span class="numbers">5/5</span>
       </div>
       <div>
-        <a class="button" href="/film/reviews/the-french-dispatch/">
+        <a class="button" href="/film/reviews/whisper-of-the-heart/">
           Read review
         </a>
     </div>

docs/genres/mystery/index.html

@@ -20,6 +20,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>

docs/genres/romance/index.html

@@ -20,6 +20,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>

docs/genres/sci-fi/index.html

@@ -20,6 +20,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>

docs/genres/thriller/index.html

@@ -20,6 +20,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>

docs/index.html

@@ -24,6 +24,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>

docs/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;
+}

docs/ratings/index.html

@@ -23,6 +23,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>

docs/reviews/beverly-hills-cop/index.html

@@ -31,6 +31,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -98,6 +99,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt0086960" title="Link to IMDb page for Beverly Hills Cop">IMDb</a>
+      </dt>
+      <dd class="numbers">7.3/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/beverly_hills_cop" title="Link to Rotten Tomatoes page for Beverly Hills Cop">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">83%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/beverly-hills-cop" title="Link to Metacritic page for Beverly Hills Cop">Metacritic</a>
+      </dt>
+      <dd class="numbers">66/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">1984</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">R</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$234,760,478</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>I ended up watching this because it came up in a <a href="https://framed.wtf">framed</a> and I realized that it&rsquo;s one of those movies I&rsquo;ve heard referenced a million times but haven&rsquo;t seen.</p>

docs/reviews/fright-night/index.html

@@ -31,6 +31,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -102,6 +103,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt1438176" title="Link to IMDb page for Fright Night">IMDb</a>
+      </dt>
+      <dd class="numbers">6.4/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/fright_night_2011" title="Link to Rotten Tomatoes page for Fright Night">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">72%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/fright-night" title="Link to Metacritic page for Fright Night">Metacritic</a>
+      </dt>
+      <dd class="numbers">64/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">2011</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">R</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$18,302,607</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>Horror is sometimes a difficult genre to persuade people to watch. Many people make a blanket claim to never watch horror movies, but to those people I offer up <em>Fright Night</em> as a gateway into the genre. This movie strikes a great balance between more comedic or light hearted elements along with sinister horror. Most of the levity comes from Colin Farrell leaning into and really hamming it up as the movies antagonist.</p>

docs/reviews/holes/index.html

@@ -31,6 +31,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -104,6 +105,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt0311289" title="Link to IMDb page for Holes">IMDb</a>
+      </dt>
+      <dd class="numbers">7.0/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/holes" title="Link to Rotten Tomatoes page for Holes">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">78%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/holes" title="Link to Metacritic page for Holes">Metacritic</a>
+      </dt>
+      <dd class="numbers">71/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">2003</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">PG</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$67,406,573</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>I could go either way on this film when it comes to a recommendation. I think its plot and characters are well suited for child viewers which is probably why I remembered it so fondly. As an adult I&rsquo;m not sure I would recommend watching it. Many of the characters are fairly one dimensional and aren&rsquo;t always given enough time to interact with one another to earn the emotional payoffs that are set up.</p>

docs/reviews/in-time/index.html

@@ -31,6 +31,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -98,6 +99,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt1637688" title="Link to IMDb page for In Time">IMDb</a>
+      </dt>
+      <dd class="numbers">6.7/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/in_time" title="Link to Rotten Tomatoes page for In Time">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">37%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/in-time" title="Link to Metacritic page for In Time">Metacritic</a>
+      </dt>
+      <dd class="numbers">53/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">2011</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">PG-13</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$37,520,095</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>This movie gets a recommendation from me, but I have a few specific things that perhaps bias my opinion. As a flat sci-fi action movie, I think this film works. There are aspects of a rags-to-riches story here that people may find entertaining. It falls back on a relatively anti-capitalist message which is a take you don&rsquo;t typically see in mainstream blockbusters.</p>

docs/reviews/kingsman/index.html

@@ -31,6 +31,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -98,6 +99,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt2802144" title="Link to IMDb page for Kingsman: The Secret Service">IMDb</a>
+      </dt>
+      <dd class="numbers">7.7/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/kingsman_the_secret_service" title="Link to Rotten Tomatoes page for Kingsman: The Secret Service">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">75%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/kingsman-the-secret-service" title="Link to Metacritic page for Kingsman: The Secret Service">Metacritic</a>
+      </dt>
+      <dd class="numbers">60/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">2014</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">R</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$128,261,724</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p><em>Kingsman</em> is easy for me to recommend because on a base level the plot is entertaining, the fight scenes are engaging and varied, and the movie&rsquo;s higher level commentary on society and meta level commentary on spy movies are all interesting.</p>

docs/reviews/no-reservations/index.html

@@ -31,6 +31,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -96,6 +97,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt0481141" title="Link to IMDb page for No Reservations">IMDb</a>
+      </dt>
+      <dd class="numbers">6.3/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/no_reservations" title="Link to Rotten Tomatoes page for No Reservations">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">42%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/no-reservations" title="Link to Metacritic page for No Reservations">Metacritic</a>
+      </dt>
+      <dd class="numbers">50/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">2007</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">PG</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$43,107,979</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>The story sets up a female chef in the city who’s work has become her obsession, but her lifestyle is radically changed by a family tragedy. Via this tragedy the film sets itself up with some ambitious topics to tackle, however, unfortunately for the most part it doesn’t address these themes. The movie is trying to be a full drama and a full romance and it just doesn’t fully work.</p>

docs/reviews/now-you-see-me-2/index.html

@@ -31,6 +31,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -98,6 +99,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt3110958" title="Link to IMDb page for Now You See Me 2">IMDb</a>
+      </dt>
+      <dd class="numbers">6.4/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/now_you_see_me_2" title="Link to Rotten Tomatoes page for Now You See Me 2">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">34%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/now-you-see-me-2" title="Link to Metacritic page for Now You See Me 2">Metacritic</a>
+      </dt>
+      <dd class="numbers">46/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">2016</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">PG-13</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$65,075,540</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>I will just come out and say, I don&rsquo;t recommend this movie. I can&rsquo;t recommend it if you haven&rsquo;t seen the first one because the plot relies heavily on the events from the previous film, but at the same time, I wouldn&rsquo;t recommend this to people who like the first film because it fails to recreate the style that made that movie enjoyable.</p>

docs/reviews/now-you-see-me/index.html

@@ -31,6 +31,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -104,6 +105,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt1670345" title="Link to IMDb page for Now You See Me">IMDb</a>
+      </dt>
+      <dd class="numbers">7.2/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/now_you_see_me" title="Link to Rotten Tomatoes page for Now You See Me">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">50%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/now-you-see-me" title="Link to Metacritic page for Now You See Me">Metacritic</a>
+      </dt>
+      <dd class="numbers">50/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">2013</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">PG-13</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$117,723,989</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>I have seen <em>Now You See Me</em> many times and still haven&rsquo;t gotten bored of it. At a base level, it is a fun crime movie with lots of twists and turns. Layered on top of that, the filmmakers put a lot of effort into making the magic tricks they depict realistic. Even if you ignore the plot, there is all the entertainment of a regular magic show.</p>

docs/reviews/the-french-dispatch/index.html

@@ -31,6 +31,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -98,6 +99,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt8847712" title="Link to IMDb page for The French Dispatch">IMDb</a>
+      </dt>
+      <dd class="numbers">7.2/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/the_french_dispatch" title="Link to Rotten Tomatoes page for The French Dispatch">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">75%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/the-french-dispatch" title="Link to Metacritic page for The French Dispatch">Metacritic</a>
+      </dt>
+      <dd class="numbers">74/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">2021</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">R</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$16,124,375</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>I found this movie very charming and would certainly recommend it. I am a sucker for Wes Anderson films and this was no exception. <strong>The French Dispatch</strong> is very funny without many outright jokes and is visually pleasing in the standard Wes Anderson style. It is made up of several view points and individual stories with a binding narrative that pulls things together just well enough that the movie as a whole feels coherent.</p>

docs/reviews/whisper-of-the-heart/index.html

@@ -31,6 +31,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">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -98,6 +99,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt0113824" title="Link to IMDb page for Whisper of the Heart">IMDb</a>
+      </dt>
+      <dd class="numbers">7.9/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/whisper-of-the-heart" title="Link to Rotten Tomatoes page for Whisper of the Heart">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">94%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/whisper-of-the-heart" title="Link to Metacritic page for Whisper of the Heart">Metacritic</a>
+      </dt>
+      <dd class="numbers">75/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">1995</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">G</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$498,156</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>Recommending Studio Ghibli movies is pretty easy, and this is no exception. The art and music are both excellent and the story is cute and light hearted. It&rsquo;s difficult to give specific reasons for watching the movie without getting into spoilers because the content of the film is what gives it the atmosphere that makes me want to recommend it.</p>

docs/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;