tweak layout and style
This commit is contained in:
1 parent
b44800b5f1
commit
1862a8598a
3 files changed
+26
-10
No files matched your search
@@ -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()]
|
||||||
|
|||||||
@@ -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() {
|
||||||
|
|||||||
@@ -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; }
|
||||||
|
|||||||
Reference in new issue
Block a user