site: aktueller Redesign-Stand (CSS, Layouts, Logo, Content-Feinschliff)

custom.css überarbeitet, hugo.yaml + Layouts angepasst, Logo (static/logo/)
und static/index.html ergänzt, Content-Korrekturen in library/.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-05-31 11:26:58 +02:00
parent 8662970fe5
commit e7d820b83c
15 changed files with 631 additions and 389 deletions
+195 -118
View File
@@ -1,13 +1,18 @@
/* OPENBUREAU — Flarum custom styles. Schriften via Custom Header laden. */
/* OPENBUREAU — Flarum custom styles, matches the new Republik-style site:
dark masthead with serif wordmark, paper body, serif content. */
:root {
--ob-bg: hsl(35, 14%, 96%);
--ob-bg-2: hsl(35, 14%, 93%);
--ob-text: hsl(25, 18%, 10%);
--ob-muted: hsl(25, 8%, 38%);
--ob-border: hsl(35, 14%, 84%);
--ob-accent: #b54a2c;
--ob-accent-2: #d97a5a;
--ob-bg: hsl(35, 14%, 96%);
--ob-bg-2: hsl(35, 14%, 93%);
--ob-text: hsl(25, 18%, 10%);
--ob-muted: hsl(25, 8%, 38%);
--ob-border: hsl(35, 14%, 84%);
--ob-accent: #b54a2c;
--ob-accent-2: #d97a5a;
--ob-dark: #191919; /* masthead bg, matches main site */
--ob-dark-text: #f0f0f0; /* warm white — matches main site */
--ob-dark-muted: #a9a9a9;
--ob-serif: 'Newsreader', Charter, 'Source Serif Pro', Georgia, serif;
--ob-sans: 'Inter', system-ui, -apple-system, sans-serif;
@@ -32,7 +37,7 @@ p, li, div, span, td, blockquote, .fa, em, strong {
html, body, .App {
background: var(--ob-bg) !important;
color: var(--ob-text) !important;
font-size: 16.5px !important;
font-size: 19px !important; /* matches new OPENBUREAU body */
line-height: 1.55 !important;
}
@@ -41,7 +46,7 @@ textarea, .Composer textarea, .Composer-body, .Composer-body *,
.TextEditor, .TextEditor textarea, .ComposerBody-textarea,
.RichEditor, .Post-body, .Post-body * {
font-family: var(--ob-serif) !important;
font-size: 1.02rem !important;
font-size: 1.05rem !important;
line-height: 1.55 !important;
}
@@ -49,7 +54,7 @@ input, select, .FormControl, .Search-input {
font-family: var(--ob-sans) !important;
}
/* Headlines — display sans */
/* Headlines — serif (matches new OPENBUREAU article style) */
h1, h2, h3, h4, h5,
.DiscussionListItem-title,
.DiscussionHero-title,
@@ -57,9 +62,9 @@ h1, h2, h3, h4, h5,
.Post-header h3,
.SignUpModal-title,
.LogInModal-title {
font-family: var(--ob-display) !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
font-family: var(--ob-serif) !important;
font-weight: 700 !important;
letter-spacing: -0.018em !important;
color: var(--ob-text) !important;
}
@@ -89,79 +94,130 @@ h1, h2, h3, h4, h5,
}
/* ------------------------------------------------------------------------
Header / Hero
Masthead — black bar mirroring openbureau.ch, white serif wordmark,
sans-serif nav items (Sign up / Log in / custom-added header links).
------------------------------------------------------------------------ */
.App-header {
background: var(--ob-bg) !important;
border-bottom: 1px solid var(--ob-border) !important;
background: var(--ob-dark) !important;
border-bottom: none !important;
box-shadow: none !important;
color: var(--ob-text) !important;
color: var(--ob-dark-text) !important;
}
.App-header .Button,
.App-header .item-search input {
color: var(--ob-text) !important;
background: transparent !important;
}
.App-header .Header-title,
.App-header .Header-title a {
font-family: var(--ob-display) !important;
font-weight: 700 !important;
font-size: 1.4rem !important;
letter-spacing: -0.01em !important;
color: var(--ob-text) !important;
text-transform: none !important;
.App-header-primary { background: var(--ob-dark) !important; }
.App-header-secondary { background: var(--ob-dark) !important; }
/* Wordmark image (SVG logo from openbureau.ch) */
.ob-wordmark-image {
display: block;
height: 1.8rem;
width: auto;
filter: none;
margin: 0;
}
/* Flarum's own wordmark is hidden via display:none — see masthead section */
.App-header .Header-title,
.App-header .Header-title a {
font-family: var(--ob-serif) !important;
font-weight: 700 !important;
font-size: clamp(1.4rem, 2.5vw, 1.8rem) !important;
letter-spacing: 0.02em !important;
color: var(--ob-dark-text) !important;
text-transform: uppercase !important;
border-bottom: none !important;
}
.App-header .Header-title a:hover { color: var(--ob-dark-text) !important; opacity: 0.85; }
/* Header buttons / search field — white text on dark, no borders */
.App-header .Button,
.App-header .item-search input,
.App-header-secondary .Button,
.App-header-secondary a {
color: var(--ob-dark-muted) !important;
background: transparent !important;
border: none !important;
font-family: var(--ob-display) !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
font-size: 0.85rem !important;
}
.App-header .Button:hover,
.App-header-secondary .Button:hover,
.App-header-secondary a:hover {
color: var(--ob-dark-text) !important;
background: transparent !important;
}
.App-header .Button--primary {
color: var(--ob-dark-text) !important;
background: var(--ob-accent) !important;
border: none !important;
}
.App-header .Button--primary:hover { background: var(--ob-accent-2) !important; }
/* Search input on the dark masthead */
.App-header .Search-input {
background: rgba(255,255,255,0.08) !important;
color: var(--ob-dark-text) !important;
border: none !important;
}
.App-header .Search-input::placeholder { color: var(--ob-dark-muted) !important; }
/* Hero (forum index) — clean editorial header, no heavy borders */
.Hero, .IndexPage .Hero {
background: var(--ob-bg-2) !important;
background: var(--ob-bg) !important;
color: var(--ob-text) !important;
border-bottom: 2px solid var(--ob-text) !important;
border-bottom: none !important;
text-shadow: none !important;
padding: 2.5rem 1rem !important;
padding: 2.5rem 1rem 1.5rem !important;
}
.Hero-title {
color: var(--ob-text) !important;
font-size: 2rem !important;
font-weight: 700 !important;
letter-spacing: -0.015em !important;
font-family: var(--ob-serif) !important;
font-size: clamp(2rem, 4vw, 2.8rem) !important;
font-weight: 800 !important;
letter-spacing: -0.026em !important;
line-height: 1.05 !important;
}
.Hero-subtitle {
color: var(--ob-muted) !important;
font-style: italic;
font-family: var(--ob-serif) !important;
font-size: 1.1rem !important;
margin-top: 0.4rem !important;
font-style: normal !important;
font-size: 1.25rem !important;
margin-top: 0.6rem !important;
}
/* Discussion page hero (when viewing a thread) — more present */
/* Discussion page hero (single thread) — Republik-style clean header */
.DiscussionHero {
background: var(--ob-bg-2) !important;
border-bottom: 2px solid var(--ob-text) !important;
background: var(--ob-bg) !important;
border-bottom: none !important;
box-shadow: none !important;
padding: 1.8rem 1rem !important;
padding: 2rem 1rem 1.5rem !important;
}
.DiscussionHero-title {
color: var(--ob-text) !important;
font-size: 1.8rem !important;
font-weight: 700 !important;
letter-spacing: -0.015em !important;
font-family: var(--ob-serif) !important;
font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
font-weight: 800 !important;
letter-spacing: -0.024em !important;
line-height: 1.05 !important;
}
/* Tag badge above title (e.g. "General") — pill but sharper */
/* Tag pill above title — terracotta-tinted, no #, rounded */
.DiscussionHero .TagsLabel,
.DiscussionHero .TagLabel {
display: inline-block;
background: var(--ob-bg) !important;
border: 1px solid var(--ob-border) !important;
color: var(--ob-accent) !important;
text-transform: uppercase;
font-family: var(--ob-sans) !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
padding: 0.2rem 0.55rem !important;
border-radius: 0 !important;
margin-bottom: 0.6rem !important;
background: color-mix(in oklab, var(--ob-accent) 14%, transparent) !important;
border: none !important;
color: var(--ob-text) !important;
text-transform: lowercase !important;
font-family: var(--ob-display) !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
padding: 0.3rem 0.85rem !important;
border-radius: 999px !important;
margin-bottom: 0.8rem !important;
}
/* ------------------------------------------------------------------------
@@ -175,35 +231,55 @@ h1, h2, h3, h4, h5,
box-shadow: none !important;
}
/* Discussion list items — like OPENBUREAU journal cards: clean separators */
.DiscussionListItem {
background: transparent !important;
border-bottom: 1px solid var(--ob-border) !important;
padding: 1rem 0.25rem !important;
border-top: 1px solid var(--ob-border) !important;
border-bottom: none !important;
padding: 1.4rem 0.25rem !important;
margin: 0 !important;
}
.DiscussionListItem:last-child { border-bottom: 1px solid var(--ob-border) !important; }
.DiscussionListItem:hover { background: var(--ob-bg-2) !important; }
.DiscussionListItem-title {
font-size: 1.15rem !important;
line-height: 1.25 !important;
margin-bottom: 0.3rem !important;
font-family: var(--ob-serif) !important;
font-size: 1.4rem !important;
font-weight: 700 !important;
letter-spacing: -0.018em !important;
line-height: 1.2 !important;
margin-bottom: 0.45rem !important;
}
.DiscussionListItem-title a { color: var(--ob-text) !important; }
.DiscussionListItem-title a:hover { color: var(--ob-accent) !important; }
.DiscussionListItem-info {
color: var(--ob-muted) !important;
font-size: 0.85rem !important;
font-family: var(--ob-sans) !important;
font-size: 0.9rem !important;
}
.DiscussionListItem-count {
background: transparent !important;
border: 1px solid var(--ob-border) !important;
border-radius: 0 !important;
color: var(--ob-muted) !important;
padding: 0.15rem 0.4rem !important;
background: color-mix(in oklab, var(--ob-accent) 14%, transparent) !important;
border: none !important;
border-radius: 999px !important;
color: var(--ob-text) !important;
font-family: var(--ob-display) !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
padding: 0.25rem 0.7rem !important;
}
/* ------------------------------------------------------------------------
Below-header: subtle divider + paper bg continues for the content area
------------------------------------------------------------------------ */
.App-content { background: var(--ob-bg) !important; }
/* Headlines size scale — matches OPENBUREAU sizes */
h1 { font-size: clamp(2rem, 4vw, 2.8rem) !important; line-height: 1.05 !important; font-weight: 800 !important; }
h2 { font-size: 1.6rem !important; line-height: 1.15 !important; }
h3 { font-size: 1.3rem !important; line-height: 1.2 !important; }
/* Avatar — squared, lightly desaturated, full color on hover */
.Avatar {
border-radius: 0 !important;
@@ -215,61 +291,67 @@ h1, h2, h3, h4, h5,
.Post:hover .Avatar { filter: grayscale(0%) contrast(1); }
/* ------------------------------------------------------------------------
Tags
Tags — pills (matches OPENBUREAU's tag pills)
------------------------------------------------------------------------ */
.TagsLabel {
font-family: var(--ob-sans) !important;
font-family: var(--ob-display) !important;
font-size: 0.78rem !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
}
.TagsLabel .tag {
background: transparent !important;
color: var(--ob-accent) !important;
border: 1px solid var(--ob-border) !important;
border-radius: 0 !important;
padding: 0.1rem 0.45rem !important;
display: inline-block;
background: color-mix(in oklab, var(--ob-accent) 14%, transparent) !important;
color: var(--ob-text) !important;
border: none !important;
border-radius: 999px !important;
padding: 0.3rem 0.85rem !important;
margin: 0 0.3rem 0.3rem 0 !important;
font-weight: 500 !important;
text-transform: lowercase !important;
}
.TagsLabel .tag:hover {
background: var(--ob-bg-2) !important;
border-color: var(--ob-accent) !important;
background: color-mix(in oklab, var(--ob-accent) 30%, transparent) !important;
border: none !important;
}
.TagTile {
background: var(--ob-bg-2) !important;
border-radius: 0 !important;
border: 1px solid var(--ob-border) !important;
background: color-mix(in oklab, var(--ob-accent) 8%, transparent) !important;
border-radius: 4px !important;
border: none !important;
color: var(--ob-text) !important;
box-shadow: none !important;
}
.TagTile-info h4 { color: var(--ob-text) !important; }
.TagTile-description { color: var(--ob-muted) !important; font-style: italic; font-family: var(--ob-serif) !important; }
.TagTile-info h4 { color: var(--ob-text) !important; font-family: var(--ob-serif) !important; font-weight: 700 !important; }
.TagTile-description { color: var(--ob-muted) !important; font-family: var(--ob-serif) !important; }
/* ------------------------------------------------------------------------
Buttons
Buttons — softer, rounded, no heavy borders
------------------------------------------------------------------------ */
.Button {
border-radius: 0 !important;
border-radius: 999px !important;
font-family: var(--ob-display) !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
background: transparent !important;
letter-spacing: 0.01em !important;
background: color-mix(in oklab, var(--ob-text) 6%, transparent) !important;
color: var(--ob-text) !important;
border: 1px solid var(--ob-border) !important;
border: none !important;
box-shadow: none !important;
text-transform: none !important;
padding: 0.45rem 1rem !important;
}
.Button:hover {
background: color-mix(in oklab, var(--ob-text) 12%, transparent) !important;
color: var(--ob-text) !important;
}
.Button:hover { background: var(--ob-bg-2) !important; border-color: var(--ob-text) !important; }
.Button--primary {
background: var(--ob-accent) !important;
color: #fff !important;
border-color: var(--ob-accent) !important;
border: none !important;
}
.Button--primary:hover {
background: var(--ob-accent-2) !important;
border-color: var(--ob-accent-2) !important;
color: #fff !important;
}
@@ -277,6 +359,7 @@ h1, h2, h3, h4, h5,
border: none !important;
background: transparent !important;
color: var(--ob-text) !important;
padding: 0.45rem 0.6rem !important;
}
/* ------------------------------------------------------------------------
@@ -303,42 +386,36 @@ a:hover { color: var(--ob-accent); border-bottom-color: var(--ob-accent); }
.notifications a { border-bottom: none !important; }
/* ------------------------------------------------------------------------
Discussion / Post view
Discussion / Post view — Republik-style article header + clean post stream
------------------------------------------------------------------------ */
.DiscussionPage-discussion {
background: transparent !important;
}
.DiscussionHero {
background: var(--ob-bg-2) !important;
border-bottom: 1px solid var(--ob-border) !important;
box-shadow: none !important;
}
.DiscussionHero-title { color: var(--ob-text) !important; font-size: 1.6rem !important; }
.PostStream { background: transparent !important; }
.Post {
border-bottom: 1px solid var(--ob-border) !important;
padding: 1.5rem 0 !important;
border-top: 1px solid var(--ob-border) !important;
border-bottom: none !important;
padding: 1.8rem 0 !important;
}
.Post:first-child { border-top: 1px solid var(--ob-border) !important; }
.Post:last-child { border-bottom: 1px solid var(--ob-border) !important; }
/* Author + meta on each post: Inter sans (like OPENBUREAU byline) */
.Post-header,
.Post .PostUser,
.Post .username {
font-family: var(--ob-mono) !important;
font-size: 0.85rem !important;
color: var(--ob-muted) !important;
font-weight: 500;
}
.Post .username { color: var(--ob-text) !important; }
.Post .username,
.Post .PostMeta time,
.Post .Post-header time {
font-family: var(--ob-mono) !important;
font-family: var(--ob-sans) !important;
font-size: 0.95rem !important;
color: var(--ob-muted) !important;
font-weight: 400;
}
.Post .username { color: var(--ob-text) !important; font-weight: 500 !important; }
.Post-body {
font-family: var(--ob-serif) !important;
font-size: 1.02rem !important;
font-size: 1.1rem !important;
line-height: 1.55 !important;
color: var(--ob-text) !important;
}
@@ -353,9 +430,11 @@ a:hover { color: var(--ob-accent); border-bottom-color: var(--ob-accent); }
.Post-body code, .Post-body pre {
font-family: var(--ob-mono) !important;
background: var(--ob-bg-2) !important;
border: 1px solid var(--ob-border) !important;
border-radius: 0 !important;
border: none !important;
border-radius: 4px !important;
padding: 0.1em 0.4em;
}
.Post-body pre { padding: 0.8rem 1rem; }
/* ------------------------------------------------------------------------
Sidebar (left rail with categories/tags)
@@ -430,5 +509,3 @@ a:hover { color: var(--ob-accent); border-bottom-color: var(--ob-accent); }
.Badge { border-radius: 0 !important; font-family: var(--ob-mono) !important; }
.Pagination-link { border-radius: 0 !important; font-family: var(--ob-mono) !important; }
/* Remove dark/colored header bar in default Flarum */
.App-header-primary { background: var(--ob-bg) !important; }
+114
View File
File diff suppressed because one or more lines are too long
+1
View File
@@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1772 284" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(358.333333,0,0,358.333333,1770.854115,264.122013)"></g><text x="-4.8px" y="264.122px" style="font-family:'PPRightSerifMono-Dark', 'PP Right Serif Mono';font-size:358.333px;fill:#f0f0f0;">O<tspan x="171.81px 348.42px 525.03px 701.64px 878.25px 1054.859px 1231.469px 1408.079px 1584.689px " y="264.122px 264.122px 264.122px 264.122px 264.122px 264.122px 264.122px 264.122px 264.122px ">PENBUREAU</tspan></text></svg>

After

Width:  |  Height:  |  Size: 878 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.0 KiB