tweak layout and style

This commit is contained in:
dreamer committed 2026-10-13 18:24:56 +02:00
1 parent b44800b5f1
commit 1862a8598a
3 files changed
+26 -10

No files matched your search

+1 -1
View File
@@ -27,7 +27,7 @@ async def get_infodesk_screenings(
select(Screening) select(Screening)
.where(Screening.start > now) .where(Screening.start > now)
.order_by(col(Screening.start)) .order_by(col(Screening.start))
.limit(6) .limit(7)
) )
screenings = await session.exec(query) screenings = await session.exec(query)
return [ScreeningRead.model_validate(s) for s in screenings.all()] return [ScreeningRead.model_validate(s) for s in screenings.all()]
+3 -2
View File
@@ -40,8 +40,9 @@ function renderPrices(prices) {
function renderClock() { function renderClock() {
const d = new Date(); const d = new Date();
document.getElementById("date").textContent = const hh = String(d.getHours()).padStart(2, "0");
d.toLocaleTimeString("nl-NL", { hour: "2-digit", minute: "2-digit" }); const mm = String(d.getMinutes()).padStart(2, "0");
document.getElementById("date").textContent = `${hh} ${mm}`;
} }
async function refresh() { async function refresh() {
+22 -7
View File
@@ -1,6 +1,6 @@
:root { :root {
--bg: #dfe2e9; --bg: #dfe2e9;
--bg-side: #d6dae2; --bg-side: #a8adb1;
--ink: #111318; --ink: #111318;
--muted: #8a8f99; --muted: #8a8f99;
--rule: #9aa0aa; --rule: #9aa0aa;
@@ -20,9 +20,13 @@ body {
.programme { padding: 28px 40px 40px 48px; display: flex; flex-direction: column; } .programme { padding: 28px 40px 40px 48px; display: flex; flex-direction: column; }
.programme h1 { .programme h1 {
font-size: 92px; font-weight: 600; letter-spacing: 6px; 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 { .film {
position: relative;
background: var(--bg);
display: grid; display: grid;
grid-template-columns: 90px 160px 1fr 170px; grid-template-columns: 90px 160px 1fr 170px;
gap: 14px; align-items: start; gap: 14px; align-items: start;
@@ -58,22 +62,33 @@ body {
display: flex; gap: 18px; align-items: center; display: flex; gap: 18px; align-items: center;
} }
.pill { .pill {
background: #b9bfc9; border-radius: 14px; background: var(--bg-side); border-radius: 14px;
padding: 4px 14px; font-size: 12px; font-weight: 600; padding: 4px 14px; font-size: 12px; font-weight: 600;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: none; /* "Boutique Cinema" reads like the photo */ text-transform: none; /* "Boutique Cinema" reads like the photo */
} }
.badge-last { .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; background: var(--badge); color: #fff;
font-size: 11px; font-weight: 600; letter-spacing: 1.5px; font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
padding: 6px 12px; text-transform: uppercase; white-space: nowrap; padding: 6px 12px; text-transform: uppercase; white-space: nowrap;
} }
/* ---------- right: sidebar ---------- */ /* ---------- right: sidebar ---------- */
.sidebar { background: var(--bg-side); padding: 30px 36px; display: flex; flex-direction: column; } .sidebar { background: var(--bg-side); padding: 30px 32px; display: flex; flex-direction: column; }
.sidebar .top { display: flex; justify-content: space-between; align-items: flex-start; } .sidebar .top {
.sidebar .date { font-size: 44px; font-weight: 600; letter-spacing: 4px; } 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 .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; } .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; } .price-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 9px; font-size: 17px; }