Refine Lumi layouts and public profile

1 files changed, 39 insertions, 26 deletions

diff --git a/templates/index.html b/templates/index.html
index dc76e5d..7e74c07 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,35 +3,44 @@
 {% block title %}{{ shelf_meta.title }} · Lumière{% endblock %}
 
 {% block content %}
-  <section class="page-heading">
-    <p class="eyebrow">{{ shelf_meta.eyebrow }}</p>
-    <div class="page-heading-row">
+  <section class="shelf-hero">
+    <div class="shelf-hero-copy">
+      <p class="eyebrow">{{ shelf_meta.eyebrow }}</p>
       <h1>{{ shelf_meta.title }}</h1>
+      <p class="shelf-hero-text">{{ shelf_meta.empty_text }}</p>
+    </div>
+    <div class="shelf-hero-meta">
+      <div class="shelf-stat">
+        <span class="summary-label">Entries</span>
+        <strong>{{ total_films or 0 }}</strong>
+      </div>
       {% if active_shelf == 'queue' %}
         <a class="button-link" href="/queue/random">Surprise me</a>
       {% endif %}
     </div>
   </section>
 
-  <div class="search-row" style="margin-bottom: 20px;">
-    <input
-      type="search"
-      id="film-search"
-      placeholder="Search by title or director…"
-      autocomplete="off"
-    >
-    <select id="film-sort">
-      <option value="">Default order</option>
-      <option value="date_watched_desc">Date watched — newest</option>
-      <option value="date_watched_asc">Date watched — oldest</option>
-      <option value="title_asc">Title — A → Z</option>
-      <option value="title_desc">Title — Z → A</option>
-      <option value="year_desc">Year — newest</option>
-      <option value="year_asc">Year — oldest</option>
-      <option value="stars_desc">Stars — highest</option>
-      <option value="stars_asc">Stars — lowest</option>
-    </select>
-  </div>
+  <section class="feed-toolbar">
+    <div class="search-row">
+      <input
+        type="search"
+        id="film-search"
+        placeholder="Search by title or director…"
+        autocomplete="off"
+      >
+      <select id="film-sort">
+        <option value="">Default order</option>
+        <option value="date_watched_desc">Date watched — newest</option>
+        <option value="date_watched_asc">Date watched — oldest</option>
+        <option value="title_asc">Title — A → Z</option>
+        <option value="title_desc">Title — Z → A</option>
+        <option value="year_desc">Year — newest</option>
+        <option value="year_asc">Year — oldest</option>
+        <option value="stars_desc">Stars — highest</option>
+        <option value="stars_asc">Stars — lowest</option>
+      </select>
+    </div>
+  </section>
 
   {% if imported is not none %}
     <div class="notice">{{ imported }} entries imported.</div>
@@ -62,10 +71,14 @@
       {% if active_shelf == 'diary' and grouped_films %}
         {% for group in grouped_films %}
           <div class="month-group" data-month="{{ group.month }}">
-            <p class="month-label">{{ group.month }}</p>
-            {% for film in group.films %}
-              {% include "_film_card.html" %}
-            {% endfor %}
+            <div class="month-rail">
+              <p class="month-label">{{ group.month }}</p>
+            </div>
+            <div class="month-stack">
+              {% for film in group.films %}
+                {% include "_film_card.html" %}
+              {% endfor %}
+            </div>
           </div>
         {% endfor %}
       {% else %}