From a3df69ff5218cee132a6def9d860cd0276cc0cd4 Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Wed, 6 May 2026 14:34:01 -0700
Subject: Add year review and inline diary ratings

---
 static/styles.css | 221 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 221 insertions(+)

(limited to 'static/styles.css')

diff --git a/static/styles.css b/static/styles.css
index f7c6fbc..b9ab7dd 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -278,6 +278,57 @@ h2 {
   font-weight: 800;
 }
 
+.star-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  width: auto;
+  margin-left: auto;
+}
+
+.star-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.15em;
+  min-height: 0;
+  padding: 0;
+  margin: 0;
+  border: 0 !important;
+  border-radius: 0;
+  background: none !important;
+  box-shadow: none !important;
+  appearance: none;
+  color: var(--subtle);
+  font-size: 1.1rem;
+  font-weight: 700;
+  line-height: 1;
+  opacity: 0.6;
+}
+
+.star-button.is-active {
+  color: var(--accent);
+  opacity: 1;
+}
+
+.star-button.is-preview {
+  color: var(--accent-strong);
+  opacity: 1;
+}
+
+.star-button:hover {
+  color: var(--accent-strong);
+  opacity: 1;
+  background: none !important;
+}
+
+.star-button:focus-visible {
+  outline: none;
+  color: var(--accent-strong);
+  opacity: 1;
+  background: none !important;
+}
+
 .meta-row,
 .detail-meta {
   display: flex;
@@ -380,6 +431,27 @@ h2 {
   width: 100%;
 }
 
+.detail-poster {
+  display: grid;
+  gap: 16px;
+  align-content: start;
+}
+
+.detail-aside-meta {
+  display: grid;
+  gap: 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  padding: 16px;
+}
+
+.detail-aside-meta strong {
+  display: block;
+  margin-top: 4px;
+  color: var(--text);
+}
+
 .detail-body h1 {
   margin-bottom: 10px;
 }
@@ -392,6 +464,45 @@ h2 {
   margin-top: 18px;
 }
 
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 18px;
+}
+
+.detail-panel {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  padding: 16px;
+}
+
+.detail-panel .eyebrow {
+  margin-bottom: 10px;
+}
+
+.detail-tagline {
+  margin: 0 0 12px;
+  color: var(--accent-strong);
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 1.08rem;
+}
+
+.detail-overview {
+  margin: 0;
+  color: #e3dacd;
+}
+
+.detail-cast {
+  margin-top: 16px;
+}
+
+.detail-cast p {
+  margin: 6px 0 0;
+  color: var(--muted);
+}
+
 .notes-body {
   margin-top: 28px;
   max-width: 68ch;
@@ -731,6 +842,101 @@ textarea:focus {
   color: var(--muted);
 }
 
+.review-hero {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 48px 0 22px;
+}
+
+.review-intro {
+  max-width: 60ch;
+  color: var(--muted);
+}
+
+.year-picker {
+  display: grid;
+  gap: 8px;
+  min-width: 180px;
+}
+
+.year-picker label {
+  margin: 0;
+}
+
+.review-metrics {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 14px;
+  margin-bottom: 18px;
+}
+
+.review-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.review-panel {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  padding: 18px;
+}
+
+.review-panel-wide {
+  grid-column: 1 / -1;
+}
+
+.year-bars {
+  display: grid;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.year-bar-row {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+}
+
+.year-bar-track {
+  height: 10px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--panel-soft);
+}
+
+.year-bar-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, rgba(240, 184, 77, 0.35), var(--accent));
+}
+
+.highlight-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 14px;
+  margin-top: 12px;
+}
+
+.highlight-card {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 14px;
+  align-items: start;
+}
+
+.highlight-card h2 {
+  margin-top: 0;
+}
+
+.highlight-meta {
+  color: var(--subtle);
+}
+
 @media (max-width: 760px) {
   .shell {
     width: min(100% - 24px, 1120px);
@@ -783,6 +989,21 @@ textarea:focus {
     flex-direction: column;
   }
 
+  .review-hero {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .review-metrics,
+  .review-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .highlight-card {
+    grid-template-columns: 1fr;
+    align-items: start;
+  }
+
   .heatmap-months {
     margin-left: 38px;
   }
-- 
cgit v1.3-2-g0d8e