From bc0df9c764f27118d9d6b475e85f38b7e235db35 Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Sat, 9 May 2026 01:45:13 -0700
Subject: Show ratings inline with year/director using brand logos

IMDb, Rotten Tomatoes, and Metacritic scores now appear on the same
row as the subtitle with SVG brand logos instead of plain text chips.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/logos/imdb.svg       |  4 +++
 static/logos/metacritic.svg |  4 +++
 static/logos/rt.svg         |  6 +++++
 static/styles.css           | 36 ++++++++++++--------------
 templates/detail.html       | 61 +++++++++++++++++++++++----------------------
 5 files changed, 61 insertions(+), 50 deletions(-)
 create mode 100644 static/logos/imdb.svg
 create mode 100644 static/logos/metacritic.svg
 create mode 100644 static/logos/rt.svg

diff --git a/static/logos/imdb.svg b/static/logos/imdb.svg
new file mode 100644
index 0000000..e57848d
--- /dev/null
+++ b/static/logos/imdb.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38" height="20" viewBox="0 0 38 20">
+  <rect width="38" height="20" rx="3" fill="#F5C518"/>
+  <text x="19" y="15" text-anchor="middle" font-family="Arial Black, Impact, sans-serif" font-size="11" font-weight="900" fill="#000000">IMDb</text>
+</svg>
diff --git a/static/logos/metacritic.svg b/static/logos/metacritic.svg
new file mode 100644
index 0000000..28d759f
--- /dev/null
+++ b/static/logos/metacritic.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <rect width="20" height="20" rx="4" fill="#1C1C1C"/>
+  <text x="10" y="15" text-anchor="middle" font-family="Arial Black, Impact, sans-serif" font-size="13" font-weight="900" fill="#FFCC34">M</text>
+</svg>
diff --git a/static/logos/rt.svg b/static/logos/rt.svg
new file mode 100644
index 0000000..c028e86
--- /dev/null
+++ b/static/logos/rt.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <path d="M10 5 C10 5 12.5 3 14 5 C15.5 7 13 8 11 7 C13 9 15 8 16 10 C17.5 13 15 17 10 17 C5 17 2.5 13 4 10 C5 8 7 9 9 7 C7 8 4.5 7 6 5 C7.5 3 10 5 10 5 Z" fill="#FA320A"/>
+  <path d="M10 2 C10 2 11 4 13 3 C14.5 2 15 4.5 13 5" fill="#4CAF50" stroke="none"/>
+  <path d="M10 2 C10 2 9 4 7 3 C5.5 2 5 4.5 7 5" fill="#4CAF50" stroke="none"/>
+  <circle cx="8" cy="12" r="1.5" fill="#fff" opacity="0.4"/>
+</svg>
diff --git a/static/styles.css b/static/styles.css
index c7be672..9f8619b 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -548,36 +548,32 @@ h2 {
   color: var(--accent);
 }
 
-.ratings-row {
+.detail-subtitle {
   display: flex;
+  align-items: center;
+  gap: 16px;
   flex-wrap: wrap;
-  gap: 10px;
-  margin: 16px 0 20px;
+  margin-bottom: 20px;
 }
 
-.rating-chip {
+.ratings-inline {
   display: flex;
-  flex-direction: column;
-  gap: 3px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--panel);
-  padding: 10px 14px;
-  min-width: 90px;
+  align-items: center;
+  gap: 14px;
 }
 
-.rating-chip-label {
+.rating-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   color: var(--muted);
-  font-size: 0.72rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
+  font-size: 0.88rem;
+  font-weight: 600;
 }
 
-.rating-chip-value {
-  color: var(--text);
-  font-size: 1.05rem;
-  font-weight: 600;
+.rating-badge img {
+  display: block;
+  flex-shrink: 0;
 }
 
 .detail-tagline {
diff --git a/templates/detail.html b/templates/detail.html
index 5bf4b3f..9c558f7 100644
--- a/templates/detail.html
+++ b/templates/detail.html
@@ -51,39 +51,40 @@
       {% if film.original_title %}
         <p class="original-title">{{ film.original_title }}</p>
       {% endif %}
-      <p class="subtitle">
-        {% if film.year %}{{ film.year }}{% endif %}
-        {% set directors = split_credit_names(film.director) %}
-        {% if directors %}
-          {% if film.year %} · {% endif %}
-          {% for director in directors %}
-            <a class="inline-link" href="{{ director_href(director) }}">{{ director }}</a>{% if not loop.last %}, {% endif %}
-          {% endfor %}
-        {% endif %}
-      </p>
-
-      {% if ratings %}
-      <div class="ratings-row">
-        {% if ratings.imdb %}
-        <div class="rating-chip">
-          <span class="rating-chip-label">IMDb</span>
-          <span class="rating-chip-value">{{ ratings.imdb }}</span>
-        </div>
-        {% endif %}
-        {% if ratings.rt %}
-        <div class="rating-chip">
-          <span class="rating-chip-label">Rotten Tomatoes</span>
-          <span class="rating-chip-value">{{ ratings.rt }}</span>
-        </div>
-        {% endif %}
-        {% if ratings.metacritic %}
-        <div class="rating-chip">
-          <span class="rating-chip-label">Metacritic</span>
-          <span class="rating-chip-value">{{ ratings.metacritic }}</span>
+      <div class="detail-subtitle">
+        <p class="subtitle">
+          {% if film.year %}{{ film.year }}{% endif %}
+          {% set directors = split_credit_names(film.director) %}
+          {% if directors %}
+            {% if film.year %} · {% endif %}
+            {% for director in directors %}
+              <a class="inline-link" href="{{ director_href(director) }}">{{ director }}</a>{% if not loop.last %}, {% endif %}
+            {% endfor %}
+          {% endif %}
+        </p>
+        {% if ratings %}
+        <div class="ratings-inline">
+          {% if ratings.imdb %}
+          <span class="rating-badge">
+            <img src="/static/logos/imdb.svg" alt="IMDb" height="18">
+            <span>{{ ratings.imdb }}</span>
+          </span>
+          {% endif %}
+          {% if ratings.rt %}
+          <span class="rating-badge">
+            <img src="/static/logos/rt.svg" alt="Rotten Tomatoes" height="18">
+            <span>{{ ratings.rt }}</span>
+          </span>
+          {% endif %}
+          {% if ratings.metacritic %}
+          <span class="rating-badge">
+            <img src="/static/logos/metacritic.svg" alt="Metacritic" height="18">
+            <span>{{ ratings.metacritic }}</span>
+          </span>
+          {% endif %}
         </div>
         {% endif %}
       </div>
-      {% endif %}
 
       <section class="detail-grid">
         <article class="detail-panel">
-- 
cgit v1.3-2-g0d8e