From 75dd9ca9970ae33995c3ed38e2e0126c47fa72ec Mon Sep 17 00:00:00 2001 From: Hauke Mehrtens Date: Sat, 22 Aug 2026 20:23:00 +0200 Subject: [PATCH] Separate date and name in the upcoming events table The two columns of the table on the start page touched each other, so the entry read "Donnerstag, 27.08., 19:00 UhrClub Discordia". The table is created with the classes "table table-condensed", which no stylesheet of the site defines, and the table styling that the theme applies inside prose addresses "tbody td". The table is delivered empty and its rows are added through the DOM, where a tr appended to a table stays a direct child instead of being put into a tbody the way the HTML parser would. The rows are therefore outside of any tbody and the padding of the theme never applied. Give the column holding the date its own padding, and keep the date on one line, it is one piece of information and reads badly broken after the weekday. The padding alone does not fit, though. The table stands in a prose column that the theme limits to 65 characters so that running text stays readable, and a date and the name of an event next to each other are wider than that, so the names would be wrapped over several lines. Lift the limit off the column and put it back on everything in it except the table, which leaves the table room to grow while the heading and the paragraph around it keep their width. That much space then has to be filled sensibly. The theme lays a table out as a block, "table { display: block; overflow: auto }", so that a wide one can be scrolled sideways, and a block fills its parent instead of shrinking to its content the way a table does. Spanning the page the entries would all sit at its left edge. Ask for the width of the content with fit-content, which the automatic margins then centre. Addressing the table by its id keeps all of this to the start page and takes precedence over the theme, whose prose rules are written with :where() and carry no specificity. Measured in a browser at 1280, 768 and 500 pixels: date and name share one line at the first two, the table is 602 pixels wide with the same distance left and right, and at 500 the column is narrower than the table, so the table fills it and only the longest name wraps. The page never scrolls sideways. Fixes: c28f04c6e85c ("switch to ics files; make calendars work; fix some minor issues") Assisted-by: Claude:claude-opus-5 Signed-off-by: Hauke Mehrtens --- assets/css/upcoming.css | 36 ++++++++++++++++++++++++++++++++ layouts/shortcodes/upcoming.html | 2 ++ 2 files changed, 38 insertions(+) create mode 100644 assets/css/upcoming.css diff --git a/assets/css/upcoming.css b/assets/css/upcoming.css new file mode 100644 index 0000000..05b096d --- /dev/null +++ b/assets/css/upcoming.css @@ -0,0 +1,36 @@ +/* The rows of the table are added by JavaScript and end up as direct children + of the table, so the table styling of the theme, which addresses tbody, does + not reach them. Separate the date from the name of the event ourselves, and + keep the date on one line, it is one piece of information and reads badly + broken after the weekday. */ +#upcoming td:first-child { + padding-inline-end: 1em; + white-space: nowrap; +} + +/* The table stands in a prose column, which the theme limits to 65 characters + so that running text stays readable. A date and the name of an event next to + each other do not fit into that, so the names were wrapped over several + lines. Lift the limit off the column and put it back on everything in it + except the table, which leaves the table room to grow while the text around + it keeps its width. */ +section.prose:has(> #upcoming) { + max-width: none; +} + +section.prose:has(> #upcoming) > :not(#upcoming) { + max-width: 65ch; + margin-inline: auto; +} + +/* The theme lays a table out as a block, "table { display: block; overflow: + auto }", so that a wide one can be scrolled sideways. A block fills its + parent instead of shrinking to its content the way a table does, so across + the whole width of the page the entries would stay at its left edge. + fit-content asks for the width of the content, which the automatic margins + then centre, and it never exceeds the column, so a display too narrow for + the table still wraps the names instead of overflowing. */ +#upcoming { + width: fit-content; + margin-inline: auto; +} diff --git a/layouts/shortcodes/upcoming.html b/layouts/shortcodes/upcoming.html index 18173b3..d0cc46d 100644 --- a/layouts/shortcodes/upcoming.html +++ b/layouts/shortcodes/upcoming.html @@ -1,3 +1,5 @@ +{{- $css := resources.Get "css/upcoming.css" | minify | fingerprint -}} {{- $js := resources.Get "js/upcoming.js" | js.Build (dict "minify" true "format" "esm" "target" "es2020") | fingerprint -}} +