database/pgbackrest
1
0
Fork 0
mirror of https://github.com/pgbackrest/pgbackrest.git synced 2026-10-23 21:28:56 +03:00
Code Activity

Center the page title beside the logo and left align it when wrapped.

Browse Source 
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.
This commit is contained in:
David Steele
2026-08-07 13:48:55 +07:00
parent 3650bfe69b
commit 940f431137
2 changed files with 29 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
doc/resource/html/default.css
View File

@@ -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

1
doc/xml/release/2020s/2026/2.60.0.xml
View File

@@ -73,6 +73,7 @@
<commit subject="Jump straight to a section rather than gliding to it."/>
<commit subject="Fade an end the menu carries on past rather than cutting it flat."/>
<commit subject="Put the bar of a section2 header under the title rather than beside it."/>
<commit subject="Center the page title beside the logo and left align it when wrapped."/>
<release-item-contributor-list>
<release-item-contributor id="david.steele"/>