From 940f4311375dda3caabdc0bdd01c36bedf43d46f Mon Sep 17 00:00:00 2001 From: David Steele Date: Fri, 7 Aug 2026 13:48:55 +0700 Subject: [PATCH] Center the page title beside the logo and left align it when wrapped. The title of a page sits on the same line as the logo and was pushed to the end of that line by an auto margin, so it hung off the right edge rather than reading as balanced against the logo. Centering it is not just a matter of aligning it, since a title centered by an auto margin at each end or by text alignment stays centered when the window is too narrow to hold it beside the logo and it wraps to its own line, where a line of its own should start at the left. The space either side of the title is now a flexible item of the header rather than a margin, and the two grow equally, which centers the title in what the logo leaves over. The space that follows the title asks for no room of its own, so a line too narrow to hold both breaks before the title rather than between the title and the space that follows it, and the title starts its line at the left. The space before the title also holds it off the logo, which the column gap of the header did before. Below the narrow breakpoint the title is still given the full width so it goes under the logo. The space above and below it is halved there, since a row of its own costs a small screen height it has none of to spare, which leaves the header shorter than it was. --- doc/resource/html/default.css | 33 +++++++++++++++++++++++---- doc/xml/release/2020s/2026/2.60.0.xml | 1 + 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/doc/resource/html/default.css b/doc/resource/html/default.css index 3ba80ebd6..46c0cd99e 100644 --- a/doc/resource/html/default.css +++ b/doc/resource/html/default.css @@ -190,7 +190,10 @@ Header display: flex; flex-wrap: wrap; align-items: center; - gap: .85rem; + + /* Only there when the title does not fit beside the name, and kept tight because a window that narrow has none to spare */ + row-gap: .425rem; + padding-top: 1rem; padding-bottom: 1rem; } @@ -221,14 +224,34 @@ Header white-space: nowrap; } -/* What the page is sits opposite what the project is, on the same line and centered against it */ +/* What the page is sits in what the name leaves over, centered there by the space either side of it. The space before it is also + what holds it off the name, and the space after it asks for no room of its own, so a line too narrow to hold the title beside + the name breaks before the title rather than after it, which leaves the title at the start of a line rather than centered on + one. */ +.page-header::before, .page-header::after +{ + content: ""; + flex: 1 0 0; +} + +.page-header::before +{ + order: 1; + flex-basis: .85rem; +} + .page-header-subtitle { - margin-left: auto; + order: 2; color: var(--text-muted); font-size: 1.25rem; } +.page-header::after +{ + order: 3; +} + /*********************************************************************************************************************************** Menu ***********************************************************************************************************************************/ @@ -1242,10 +1265,11 @@ Narrow screens line-height: 1.65; } + /* The title is on a row of its own here, so the space under it is halved to give back some of what that row takes */ .page-header { padding-top: 1.5rem; - padding-bottom: 1rem; + padding-bottom: .5rem; } .page-header-title @@ -1257,7 +1281,6 @@ Narrow screens .page-header-subtitle { flex-basis: 100%; - margin-left: 0; } .section2-header diff --git a/doc/xml/release/2020s/2026/2.60.0.xml b/doc/xml/release/2020s/2026/2.60.0.xml index ce04425a9..780e0c084 100644 --- a/doc/xml/release/2020s/2026/2.60.0.xml +++ b/doc/xml/release/2020s/2026/2.60.0.xml @@ -73,6 +73,7 @@ +