From 1862a8598af0def5a970821ed0a5fbd22678af25 Mon Sep 17 00:00:00 2001
From: dreamer <dreamer@puikheid.nl>
Date: Tue, 13 Oct 2026 18:24:56 +0200
Subject: [PATCH] tweak layout and style

---
 fdhview/api/screenings.py |  2 +-
 fdhview/static/info.js    |  5 +++--
 fdhview/static/style.css  | 29 ++++++++++++++++++++++-------
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/fdhview/api/screenings.py b/fdhview/api/screenings.py
index 6534124..632f305 100644
--- a/fdhview/api/screenings.py
+++ b/fdhview/api/screenings.py
@@ -27,7 +27,7 @@ async def get_infodesk_screenings(
         select(Screening)
         .where(Screening.start > now)
         .order_by(col(Screening.start))
-        .limit(6)
+        .limit(7)
     )
     screenings = await session.exec(query)
     return [ScreeningRead.model_validate(s) for s in screenings.all()]
diff --git a/fdhview/static/info.js b/fdhview/static/info.js
index 1682d54..15b2a35 100644
--- a/fdhview/static/info.js
+++ b/fdhview/static/info.js
@@ -40,8 +40,9 @@ function renderPrices(prices) {
 
 function renderClock() {
   const d = new Date();
-  document.getElementById("date").textContent =
-    d.toLocaleTimeString("nl-NL", { hour: "2-digit", minute: "2-digit" });
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mm = String(d.getMinutes()).padStart(2, "0");
+  document.getElementById("date").textContent = `${hh} ${mm}`;
 }
 
 async function refresh() {
diff --git a/fdhview/static/style.css b/fdhview/static/style.css
index 81b441e..c0588a7 100644
--- a/fdhview/static/style.css
+++ b/fdhview/static/style.css
@@ -1,6 +1,6 @@
 :root {
   --bg: #dfe2e9;
-  --bg-side: #d6dae2;
+  --bg-side: #a8adb1;
   --ink: #111318;
   --muted: #8a8f99;
   --rule: #9aa0aa;
@@ -20,9 +20,13 @@ body {
 .programme { padding: 28px 40px 40px 48px; display: flex; flex-direction: column; }
 .programme h1 {
   font-size: 92px; font-weight: 600; letter-spacing: 6px;
-  text-transform: uppercase; line-height: 1; margin-bottom: 18px;
+  text-transform: uppercase; line-height: 1;
+  margin-bottom: -27px;      /* was 18px — lets the list overlap the letters */
+  position: relative; z-index: 0;
 }
 .film {
+  position: relative;
+  background: var(--bg);
   display: grid;
   grid-template-columns: 90px 160px 1fr 170px;
   gap: 14px; align-items: start;
@@ -58,22 +62,33 @@ body {
   display: flex; gap: 18px; align-items: center;
 }
 .pill {
-  background: #b9bfc9; border-radius: 14px;
+  background: var(--bg-side); border-radius: 14px;
   padding: 4px 14px; font-size: 12px; font-weight: 600;
   letter-spacing: 1px;
   text-transform: none; /* "Boutique Cinema" reads like the photo */
 }
 .badge-last {
-  justify-self: end; align-self: start; margin-top: 3px;
+  justify-self: end; align-self: start; margin-top: -16px;
   background: var(--badge); color: #fff;
   font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
   padding: 6px 12px; text-transform: uppercase; white-space: nowrap;
 }
 
 /* ---------- right: sidebar ---------- */
-.sidebar { background: var(--bg-side); padding: 30px 36px; display: flex; flex-direction: column; }
-.sidebar .top { display: flex; justify-content: space-between; align-items: flex-start; }
-.sidebar .date { font-size: 44px; font-weight: 600; letter-spacing: 4px; }
+.sidebar { background: var(--bg-side); padding: 30px 32px; display: flex; flex-direction: column; }
+.sidebar .top {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: baseline;
+  gap: 20px;
+  margin-bottom: 4px;
+}
+.sidebar .date {
+  font-size: 56px; font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  white-space: nowrap;
+}
 .sidebar .logo { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-align: right; line-height: 1.3; text-transform: uppercase; }
 .sidebar h2 { margin-top: 56px; font-size: 20px; font-weight: 600; margin-bottom: 14px; }
 .price-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 9px; font-size: 17px; }