diff --git a/assets/css/custom.css b/assets/css/custom.css index 9a3c07f..58a4ba7 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -83,6 +83,7 @@ body { padding: 0; margin: 0; min-height: 100vh; + overflow-x: hidden; gap: var(--spacing-sm); display: grid; grid-template-rows: auto 1fr auto; @@ -278,11 +279,35 @@ a:hover { gap: 0; } -.journal-entry { - border-top: 1px solid var(--color-border); - padding: 1.6rem 0 1.7rem; +/* ── Journal: 2-Spalten-Karten-Raster, durchgehend 10px Abstände ─────────── */ +/* Volle Breite (aus der 72ch-Spalte ausbrechen) */ +.journal { width: 100vw; position: relative; left: 50%; margin-left: -50vw; } +.journal-header { padding: 0 10px; } +.journal-list { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + padding: 0 10px 10px; + margin: 0; +} +.journal-entry { + border: none; + border-radius: 12px; + background: var(--color-bg-secondary); + padding: 1.5rem; + margin: 0; +} +.journal-entry:last-child { border: none; } +/* In den Karten links bündig statt zentriert */ +.journal-list .journal-entry .journal-entry-body { justify-items: start; text-align: left; } +.journal-list .journal-entry .journal-entry-body > * { max-width: none; } +.journal-list .journal-bg-image { + width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + border-radius: 8px; margin-bottom: 0.9rem; +} +@media (max-width: 720px) { + .journal-list { grid-template-columns: 1fr; } } -.journal-entry:last-child { border-bottom: 1px solid var(--color-border); } /* Card link: image (optional) + body block */ .journal-entry-link, @@ -305,8 +330,8 @@ a:hover { /* Center non-hero entries' content (excluding icon-mode which has horizontal layout) */ .journal-entry:not(.journal-entry--hero):not([data-image="icon"]) .journal-entry-body { - justify-items: center; - text-align: center; + justify-items: start; + text-align: left; } .journal-entry:not(.journal-entry--hero):not([data-image="icon"]) .journal-entry-body > * { max-width: 55ch;