From 6aed9460ad0555c9f51eaaf09aad1dd89e69bdfe Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Sat, 9 May 2026 01:33:30 -0700
Subject: Center stars with h1 by moving eyebrow above flex row

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/styles.css   |  5 ++++-
 templates/form.html | 26 +++++++++++++-------------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index 288cde2..1b4b4d9 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -153,10 +153,13 @@ button:hover {
 }
 
 .form-heading {
+  padding: 48px 0 26px;
+}
+
+.form-heading-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 48px 0 26px;
 }
 
 .form-heading .star-button {
diff --git a/templates/form.html b/templates/form.html
index 05006e0..83e888e 100644
--- a/templates/form.html
+++ b/templates/form.html
@@ -14,20 +14,20 @@
       {% set current_stars = film.stars if film and film.stars else 0 %}
       <input type="hidden" id="stars" name="stars" value="{{ current_stars }}">
       <div class="form-heading">
-        <div>
-          <p class="eyebrow">Diary Entry</p>
+        <p class="eyebrow">Diary Entry</p>
+        <div class="form-heading-row">
           <h1>{{ page_title }}</h1>
-        </div>
-        <div class="star-control" role="group" aria-label="Rate film" data-form-stars data-current-stars="{{ current_stars }}">
-          {% for value in range(1, 4) %}
-            <button
-              type="button"
-              class="star-button {% if current_stars >= value %}is-active{% endif %}"
-              data-stars="{{ value }}"
-              aria-label="{{ value }} star{% if value > 1 %}s{% endif %}"
-              aria-pressed="{% if current_stars >= value %}true{% else %}false{% endif %}"
-            >✦</button>
-          {% endfor %}
+          <div class="star-control" role="group" aria-label="Rate film" data-form-stars data-current-stars="{{ current_stars }}">
+            {% for value in range(1, 4) %}
+              <button
+                type="button"
+                class="star-button {% if current_stars >= value %}is-active{% endif %}"
+                data-stars="{{ value }}"
+                aria-label="{{ value }} star{% if value > 1 %}s{% endif %}"
+                aria-pressed="{% if current_stars >= value %}true{% else %}false{% endif %}"
+              >✦</button>
+            {% endfor %}
+          </div>
         </div>
       </div>
 
-- 
cgit v1.3-2-g0d8e