diff options
| author | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-05-09 01:33:30 -0700 |
|---|---|---|
| committer | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-05-09 01:33:30 -0700 |
| commit | 6aed9460ad0555c9f51eaaf09aad1dd89e69bdfe (patch) | |
| tree | 55ac95ccd4568323cad2441f590d242ce8fdfc51 | |
| parent | 596d80d15845da3fb105c26a30457da8ee698be7 (diff) | |
Center stars with h1 by moving eyebrow above flex row
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
| -rw-r--r-- | static/styles.css | 5 | ||||
| -rw-r--r-- | 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> |