Rework post page (lead, pager), add skip link, unified focus ring, reduced motion and keyboard-accessible menu

2026-10-01 16:48:52 +02:00
1 parent ae362639e3
commit ba65b18d29
@@ -1,15 +1,108 @@
-/* Push the whole article body down from the "all posts" link above it. Wraps the
-   date, heading and body, so scoped CSS applies (the date sits in the PostDate
-   child component and would not be reachable on its own). The date's own look
-   comes from PostDate.razor.css. */
-.post-content {
-    margin-top: 1.5rem;
+/* 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. */
+.post {
+    max-width: 68ch;
+    margin-top: var(--space-4);
+    line-height: 1.75;
 }

-/* The post title is the first h2 in the content, sitting right under its date, so
-   drop the large default heading gap above it (h1..h4 carry --space-5 top margin
-   globally); date and title belong together. Scoped to :first-of-type so h2
-   subheadings inside the Markdown body keep their normal spacing. */
-.post-content h2:first-of-type {
-    margin-top: var(--space-1);
+.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: 68ch;
+    margin-top: var(--space-6);
+    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;
+    }
 }