Centre one 42rem reading column on content, post, event and FAQ pages
This commit is contained in:
1 parent
7d09233ca2
commit
a847507b46
6 files changed
+82
-10
No files matched your search
@@ -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);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user