/* ============================================================ KARTUL — events page Loads AFTER style.css (shares fonts, colours, nav, lang switch). ============================================================ */ :root { /* ========== TUNE HERE — events page only ====================== */ --ev-size: 40px; /* headline size of each event line */ --ev-fill: #ffe100; /* yellow */ --ev-stroke: #e5001c; /* red outline */ --ev-stroke-w: 1.5px; /* outline thickness */ --ev-gap: 1em; /* space between event lines */ /* Calendar (left column). Cells are SQUARE, so the grid's height is driven by its width: cell = --cal-w / 7, total height ≈ --cal-w / 7 * 7. If the calendar gets too tall, reduce --cal-w. */ --cal-w: 30vw; /* width of the calendar column */ --cal-line: #ffe100; /* grid lines */ --cal-ink: #ffe100; /* numbers and month label */ --cal-bg-on-active: #000; /* text colour on hover/active cells */ --cal-size: 18px; /* calendar text size */ --cal-border-w: 2px; /* grid line thickness */ --cal-event-bg: #339966; /* brand green — a day that has events */ --cal-event-hover: #e5001c; /* brand red — hover/focus AND the active day */ --cal-text-stroke-w: 1.5px; /* outline thickness on all calendar text (uses --ev-stroke colour) */ /* Right column scroll height (/events page, desktop). Uses logo peek — not full --chrome-band-min — so the list gets more room without resizing the logo. */ --events-list-max-h: calc( 100vh - var(--header-height) - var(--stage-top) - var(--logo-peek-offset) - 1.5rem ); /* ============================================================== */ } /* Header: identical to the other pages — same markup, same type system, and the same white gradient background inherited from style.css (no override). */ /* ---------- events page wrapper ---------- */ .events-page { position: relative; } .events-page { --chrome-outset: 0; } .events-page .page-chrome { z-index: 10; } /* ---------- two columns: calendar | list ---------- */ /* the background photo lives here (not on .page-events/body) because the editable Panel override is set as an inline custom property on
— header.php, which renders , is out of scope for this change */ /* Stage fills the band above the logo; only the list column scrolls (see below). */ .events-page > .events-stage { flex: 1 1 auto; min-height: calc(100vh - var(--header-height) - var(--chrome-band-min)); max-height: calc(100vh - var(--header-height) - var(--chrome-band-min)); } .events-stage { position: relative; z-index: 0; height: auto; padding-inline: var(--side-inset); padding-bottom: 24px; display: grid; grid-template-columns: var(--cal-w) 1fr; gap: 0 32px; align-items: start; } /* urgent message — sticker above calendar + list */ .events-banner { grid-column: 1 / -1; justify-self: start; max-width: min(28rem, 100%); margin: 0 0 1.25rem; padding: 0.85em 1.1em; background: var(--ev-fill); color: var(--ev-stroke); border: var(--ev-stroke-w) solid var(--ev-stroke); box-shadow: 4px 4px 0 var(--ev-stroke); transform: rotate(-2.5deg); font-family: "Kommuna", "Courier New", monospace; font-size: clamp(14px, 2.2vw, 18px); font-weight: 700; line-height: 1.25; pointer-events: auto; } .events-banner p { margin: 0; } .events-stage::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--page-bg, url("../img/bg-kitchen.png")) center / cover no-repeat; pointer-events: none; } /* ---------- calendar ---------- */ .cal { font-size: var(--cal-size); font-weight: 500; color: var(--cal-ink); /* same red-outline treatment as the events list, so month label, weekday letters and day numbers all read consistently */ -webkit-text-stroke: var(--cal-text-stroke-w) var(--ev-stroke); paint-order: stroke fill; } .cal-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; margin: 0 0 14px; padding: 0 6px; } .cal-label { text-align: center; letter-spacing: .04em; } /* month arrows — same full reset, custom states only */ .cal-nav { appearance: none; -webkit-appearance: none; margin: 0; padding: 0 8px; border: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; color: inherit; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } .cal-nav:focus { outline: none; } .cal-nav:hover, .cal-nav:focus-visible { opacity: .6; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: var(--cal-border-w) solid var(--cal-line); border-left: var(--cal-border-w) solid var(--cal-line); } /* Every cell is a SQUARE. Cell size = calendar width / 7, so the grid's height follows from --cal-w — shrink --cal-w if it grows too tall. */ .cal-dow, .cal-cell { /* full reset — no UA button styling anywhere, states are ours to define */ appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; color: var(--cal-ink); text-align: center; box-shadow: none; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; /* the square */ /* grid rules re-applied after the reset */ border-right: var(--cal-border-w) solid var(--cal-line); border-bottom: var(--cal-border-w) solid var(--cal-line); } .cal-cell { cursor: default; } .cal-cell:focus { outline: none; } /* ---- states: all custom, nothing inherited from the UA ---- */ .cal-cell.is-outside { opacity: .45; } /* days of the adjacent month */ .cal-cell[disabled] { opacity: .75; } /* a day with no events — no background at all */ /* a day WITH events: green by default, red on hover/focus */ .cal-cell.has-event { cursor: pointer; opacity: 1; background: var(--cal-event-bg); } .cal-cell.has-event:hover, .cal-cell.has-event:focus-visible { background: var(--cal-event-hover); color: var(--cal-bg-on-active); } /* the day you are currently reading in the list — same red as hover, so it reads as "active", distinct from the plain green of other event days */ .cal-cell.is-active { background: var(--cal-event-hover); color: var(--cal-bg-on-active); } /* ---------- the event list ---------- */ .events-stage[data-cal-mode="month"] .cal { position: sticky; top: var(--stage-top); align-self: start; } .events-stage[data-cal-mode="month"] .events-list { max-height: var(--events-list-max-h); overflow-y: auto; scrollbar-width: none; } .events-stage[data-cal-mode="month"] .events-list::-webkit-scrollbar { display: none; } .events-stage[data-cal-mode="scroll"] .events-list { padding: 0 4px 40vh 0; /* tail space so the last item can reach the top */ height: auto; overflow: visible; } .events-list { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: var(--ev-gap); } .events-list li { font-family: "Kommuna", "Courier New", monospace; /* same face as the rest */ font-size: var(--ev-size); font-weight: 600; line-height: 1.15; color: var(--ev-fill); -webkit-text-stroke: var(--ev-stroke-w) var(--ev-stroke); paint-order: stroke fill; /* stroke behind the fill, so letters stay crisp */ scroll-margin-top: 8px; } .events-list li.is-cancelled, .events-list li.is-cancelled a { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--ev-stroke); } .events-list-empty { font-family: "Kommuna", "Courier New", monospace; font-size: var(--ev-size); color: var(--ev-fill); -webkit-text-stroke: var(--ev-stroke-w) var(--ev-stroke); paint-order: stroke fill; opacity: 0.75; list-style: none; } /* an event with body content links to its own page — same look as plain text, underline only signals it's clickable */ .events-list a { color: inherit; text-decoration: none; } .events-list a:hover, .events-list a:focus-visible { text-decoration: underline; } /* an event with photos but no body content shows them right under the line */ .event-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .event-images img { display: block; height: 120px; width: auto; max-width: 100%; object-fit: cover; } /* ---------- single event page (site/templates/event.php) ---------- */ .event-title { font-family: "Kommuna", "Courier New", monospace; font-size: var(--ev-size); color: var(--ev-fill); -webkit-text-stroke: var(--ev-stroke-w) var(--ev-stroke); paint-order: stroke fill; margin: 0 0 .6em; } .event-title.is-cancelled { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--ev-stroke); } .event-stage .inline-img { transform: none; } .event-stage .inline-img img { display: block; width: 100%; height: var(--img-height); object-fit: cover; } @media (max-width: 780px) { :root { --ev-size: 20px; --cal-size: 13px; --cal-w: 100%; } /* fixed pseudo-element background (see .events-stage::before) */ .events-stage { height: auto; grid-template-columns: 1fr; padding-inline: var(--side-inset-mobile); padding-bottom: 0; } .cal { margin-bottom: 28px; } .events-stage[data-cal-mode="month"] .events-list { max-height: none; overflow: visible; } .events-stage[data-cal-mode="scroll"] .events-list { height: auto; overflow: visible; padding-bottom: 0 !important; /* beat JS tail-space inline style */ } .events-list li { scroll-margin-top: 16px; } }