diff --git a/assets/css/custom.css b/assets/css/custom.css
index 17f3278..ebd1501 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -153,33 +153,27 @@ a:hover {
}
/* Logo as background image (paths-only SVG, no font dependency) */
-/* Wordmark-Schrift: Honk (expressive Color-Font, COLRv1), self-gehostet.
- Bei fehlender Color-Font-Unterstützung greift die Fallback-Farbe unten. */
-@font-face {
- font-family: 'Honk';
- font-style: normal;
- font-weight: 400;
- font-display: swap;
- src: url("/fonts/honk-latin.woff2") format("woff2");
-}
-
+/* Wortmark: eigener SVG-Schriftzug „openbureau" (logo-ob2.svg). */
.wordmark-link {
border: none;
margin: 0;
padding: 0;
display: block;
justify-self: center;
- width: auto;
+ width: clamp(170px, 24vw, 280px);
+ aspect-ratio: 1772 / 284;
height: auto;
- font-family: 'Honk', var(--font-family-display), system-ui, sans-serif;
- font-weight: 400;
- font-size: clamp(2rem, 5vw, 3.1rem);
- line-height: 1;
- letter-spacing: 0.01em;
- text-transform: lowercase;
- color: #fff; /* Fallback, falls Color-Font nicht unterstützt wird */
+ background-image: url("/logo/logo-ob2.svg");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+}
+.wordmark-text {
+ position: absolute;
+ width: 1px; height: 1px;
+ overflow: hidden;
+ clip: rect(0 0 0 0);
}
-.wordmark-text { display: inline-block; }
.wordmark-link:hover,
.wordmark-link:focus { border: none; opacity: 0.85; }
@@ -284,14 +278,16 @@ a:hover {
gap: 0;
}
-/* ── Journal: 2-Spalten-Karten-Raster, durchgehend 10px Abstände ─────────── */
+/* ── Journal: 2-Spalten-MASONRY (Multi-Column) — Spalten packen UNABHÄNGIG ──
+ Multi-Column statt Grid: jede Karte fließt frei, links und rechts sind nicht
+ auf gemeinsame Zeilenhöhen gekoppelt (ein hoher Eintrag links lässt rechts
+ eigenständig weiterlaufen). break-inside:avoid hält Karten zusammen. */
/* 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;
+ columns: 2;
+ column-gap: 10px;
padding: 0 10px 10px;
margin: 0;
}
@@ -300,7 +296,9 @@ a:hover {
border-radius: 12px;
background: var(--color-bg-secondary);
padding: 1.5rem;
- margin: 0;
+ margin: 0 0 10px;
+ break-inside: avoid;
+ -webkit-column-break-inside: avoid;
}
.journal-entry:last-child { border: none; }
/* In den Karten links bündig statt zentriert */
@@ -311,7 +309,7 @@ a:hover {
border-radius: 8px; margin-bottom: 0.9rem;
}
@media (max-width: 720px) {
- .journal-list { grid-template-columns: 1fr; }
+ .journal-list { columns: 1; }
}
/* Card link: image (optional) + body block */
@@ -790,18 +788,17 @@ a.byline-author:hover, a.journal-author:hover { color: var(--accent); }
natürliche Höhe (align-items:start → keine Zeilen-Stretchung; ein hoher
Eintrag zieht den Nachbarn NICHT mit).
════════════════════════════════════════════════════════════════════════ */
-.journal-list { align-items: start; }
-
.journal-list .journal-entry,
.journal-list .journal-entry--layout-image,
.journal-list .journal-entry--layout-icon,
.journal-list .journal-entry--layout-text {
- margin: 0;
+ margin: 0 0 10px;
padding: 1.25rem;
position: relative;
overflow: hidden;
border-radius: 12px;
- align-self: start;
+ break-inside: avoid;
+ -webkit-column-break-inside: avoid;
}
.journal-list .journal-entry--layout-image {
background: var(--color-bg-secondary);
diff --git a/static/logo/LOGO-OB.svg b/static/logo/LOGO-OB.svg
new file mode 100644
index 0000000..6ebd313
--- /dev/null
+++ b/static/logo/LOGO-OB.svg
@@ -0,0 +1,21 @@
+
+
+
diff --git a/static/logo/logo-ob2.svg b/static/logo/logo-ob2.svg
new file mode 100644
index 0000000..30db1ff
--- /dev/null
+++ b/static/logo/logo-ob2.svg
@@ -0,0 +1,14 @@
+
+
+