117 lines
3.3 KiB
CSS
117 lines
3.3 KiB
CSS
/* 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: 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;
|
|
}
|
|
|
|
/* Date above the title as a quiet meta line, with the same calendar icon as on the
|
|
post cards. The title follows directly, so the gap between them stays small
|
|
(h1 carries no top margin globally). */
|
|
.post-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
margin: 0 0 var(--space-2);
|
|
color: var(--color-text-soft);
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.post-meta ::deep .icon {
|
|
color: var(--color-accent-dark);
|
|
}
|
|
|
|
/* The first paragraph as the lead: larger and in the soft tone, so it reads as an
|
|
introduction. Pure CSS on the editor's Markdown -- if a post starts with a
|
|
heading or a list instead, there simply is no lead. Same text colour token as
|
|
the rest, so it keeps AA contrast in both schemes. */
|
|
.post-body ::deep > p:first-child {
|
|
color: var(--color-text-soft);
|
|
font-size: 1.2rem;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
/* Older/newer post at the end: two cards side by side, older on the left, newer on
|
|
the right. The grid keeps each in its column even if the other is missing. Hover
|
|
= border and shadow, nothing moves. */
|
|
.post-pager {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--space-3);
|
|
max-width: 42rem;
|
|
margin: var(--space-6) auto 0;
|
|
padding-top: var(--space-4);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
.post-pager-link {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
padding: var(--space-3) var(--space-4);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius);
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
text-decoration: none;
|
|
transition: box-shadow var(--transition), border-color var(--transition);
|
|
}
|
|
|
|
.post-pager-link:hover {
|
|
border-color: var(--color-brand);
|
|
box-shadow: var(--shadow-hover);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.post-pager-next {
|
|
grid-column: 2;
|
|
text-align: right;
|
|
}
|
|
|
|
.post-pager-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
color: var(--color-text-soft);
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.post-pager-next .post-pager-label {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.post-pager-title {
|
|
color: var(--color-brand);
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* On a phone the two cards stack: a half-width card would squeeze a long title
|
|
into a narrow column. Older first, as in the wide layout. */
|
|
@media (max-width: 40rem) {
|
|
.post-pager {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.post-pager-next {
|
|
grid-column: 1;
|
|
}
|
|
}
|