From a847507b46b5ba5e57d8b252d119cf189a3bf92c Mon Sep 17 00:00:00 2001 From: tleininger Date: Thu, 1 Oct 2026 18:48:55 +0200 Subject: [PATCH] Centre one 42rem reading column on content, post, event and FAQ pages --- .../Features/Events/EventList.razor.css | 17 ++++++++++++- .../Features/Faqs/FaqList.razor.css | 17 +++++++++++++ .../Features/Pages/ContentPage.razor.css | 11 +++++++++ .../Features/Posts/PostDetail.razor.css | 24 ++++++++++++------- .../Features/Posts/PostList.razor.css | 17 +++++++++++++ Elternbeirat.Web/wwwroot/app.css | 6 ++++- 6 files changed, 82 insertions(+), 10 deletions(-) create mode 100644 Elternbeirat.Web/Features/Faqs/FaqList.razor.css create mode 100644 Elternbeirat.Web/Features/Pages/ContentPage.razor.css diff --git a/Elternbeirat.Web/Features/Events/EventList.razor.css b/Elternbeirat.Web/Features/Events/EventList.razor.css index 2f4f073..a437c84 100644 --- a/Elternbeirat.Web/Features/Events/EventList.razor.css +++ b/Elternbeirat.Web/Features/Events/EventList.razor.css @@ -1,14 +1,29 @@ /* The card grid (.event-list) is shared with the home-page embed and lives in the global app.css; the card itself is EventCard. Only the page's own parts are here. */ +/* Same centred 42rem reading column as a content page (ContentPage.razor.css), so + every page of the site shares one column under the header. */ +h1, +h2, +article, +p, +.event-list, +.past-events { + max-width: 42rem; + margin-inline: auto; +} + +/* auto, not 0: this rule outweighs the column rule above and would otherwise pull + the button back to the left edge of the page. */ .events-subscribe { - margin: var(--space-4) 0; + margin: var(--space-4) auto; } /* Past events: one folded-up card. Opened, a compact list grouped by year, deliberately quieter than the upcoming cards above. The open/close triangle is the shared .disclosure rule in app.css, the same as on the FAQ topics. */ .past-events { + box-sizing: border-box; /* padding inside the 42rem, flush with the text */ margin-top: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); diff --git a/Elternbeirat.Web/Features/Faqs/FaqList.razor.css b/Elternbeirat.Web/Features/Faqs/FaqList.razor.css new file mode 100644 index 0000000..55e4009 --- /dev/null +++ b/Elternbeirat.Web/Features/Faqs/FaqList.razor.css @@ -0,0 +1,17 @@ +/* Same centred 42rem reading column as a content page (ContentPage.razor.css), so + every page of the site shares one column under the header. The topic cards and + the questions inside them live in the global app.css. */ +h1, +article, +p, +.faq-topic { + box-sizing: border-box; /* padding inside the 42rem, flush with the text */ + max-width: 42rem; + margin-inline: auto; +} + +/* The intro's last paragraph drops its margin (app.css), so the first card would + sit right under the text; this gives it the same air as between sections. */ +article { + margin-bottom: var(--space-5); +} diff --git a/Elternbeirat.Web/Features/Pages/ContentPage.razor.css b/Elternbeirat.Web/Features/Pages/ContentPage.razor.css new file mode 100644 index 0000000..4297684 --- /dev/null +++ b/Elternbeirat.Web/Features/Pages/ContentPage.razor.css @@ -0,0 +1,11 @@ +/* A content page is one reading column: its text, boxes and card grids all stop at + 42rem (app.css). Left-aligned in the 72rem layout that column left a wide empty + strip on the right of a desktop screen; centred, the empty space splits evenly and + the page sits balanced under the header. Title and body share the column, so they + keep one left edge. The children inside keep margin 0 and simply fill it. */ +h1, +article, +p { + max-width: 42rem; + margin-inline: auto; +} diff --git a/Elternbeirat.Web/Features/Posts/PostDetail.razor.css b/Elternbeirat.Web/Features/Posts/PostDetail.razor.css index cbf12b6..17c0ba8 100644 --- a/Elternbeirat.Web/Features/Posts/PostDetail.razor.css +++ b/Elternbeirat.Web/Features/Posts/PostDetail.razor.css @@ -1,13 +1,21 @@ -/* The article: a reading column of about 68 characters with generous leading, so a - long post reads like a page, not like a form. Everything inside follows this - width -- the global 42rem cap on paragraphs, lists and boxes is lifted here, or - the text would stop short of the column it sits in. */ +/* The article: the site's centred 42rem reading column (as on a content page, + ContentPage.razor.css) with generous leading, so a long post reads like a page, + not like a form. Everything inside follows this width -- the global 42rem cap on + paragraphs, lists and boxes is lifted here, so nothing stops short of the column + (the post's own leading makes the text a touch wider than elsewhere). */ .post { - max-width: 68ch; - margin-top: var(--space-4); + max-width: 42rem; + margin: var(--space-4) auto 0; line-height: 1.75; } +/* The back link is an inline button, which margin: auto cannot centre. A left + margin of half the free space puts it on the column's left edge instead, and + max() keeps it at 0 once the screen is narrower than the column. */ +.btn-quiet { + margin-left: max(0px, (100% - 42rem) / 2); +} + .post ::deep :is(p, ul, ol, blockquote, .aufruf, .hinweis) { max-width: none; } @@ -46,8 +54,8 @@ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); - max-width: 68ch; - margin-top: var(--space-6); + max-width: 42rem; + margin: var(--space-6) auto 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); } diff --git a/Elternbeirat.Web/Features/Posts/PostList.razor.css b/Elternbeirat.Web/Features/Posts/PostList.razor.css index b7e0b0a..a880788 100644 --- a/Elternbeirat.Web/Features/Posts/PostList.razor.css +++ b/Elternbeirat.Web/Features/Posts/PostList.razor.css @@ -10,3 +10,20 @@ grid-column: 1 / -1; } } + +/* Same centred 42rem reading column as a content page (ContentPage.razor.css), so + every page of the site shares one column under the header. Two cards still fit + side by side in it. */ +h1, +article, +p, +.post-list { + max-width: 42rem; + margin-inline: auto; +} + +/* The intro's last paragraph drops its margin (app.css), so the first card would + sit right under the text; this gives it the same air as between sections. */ +article { + margin-bottom: var(--space-5); +} diff --git a/Elternbeirat.Web/wwwroot/app.css b/Elternbeirat.Web/wwwroot/app.css index 30e0259..7da3ef1 100644 --- a/Elternbeirat.Web/wwwroot/app.css +++ b/Elternbeirat.Web/wwwroot/app.css @@ -1050,13 +1050,17 @@ main:focus { a normal heading; every group is a block of its own. One raster for all of them, so the cards line up across groups: a group of one person gets the same card width as a group of six, not a stretched one. 17rem fits a long double name. + Like every other block it stays in the 42rem reading column, so the cards share + the edges of the text above and below them; that leaves room for two columns + (three would need 52.5rem), one on a phone. The cards of a row share one height (the grid's default stretch), so a row reads as a calm band; the card itself keeps its content at the top (align-content). */ .markdown-body .team > ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-3); - max-width: none; + box-sizing: border-box; + max-width: 42rem; margin: 0 0 var(--space-4); padding: 0; list-style: none;