karim/OPENBUREAU
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e62b4c370420995b649c61a863d5e32af5f7dc9b
OPENBUREAU/static/flarum.css
T
karim e7d820b83c 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>
2026-05-31 11:26:58 +02:00

512 lines
17 KiB
CSS
Raw Blame History

/* 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-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;
--ob-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
--ob-mono: 'IBM Plex Mono', 'Courier New', ui-monospace, monospace;
/* Flarum LESS vars overridden where it accepts CSS custom props */
--primary-color: var(--ob-accent);
--secondary-color: var(--ob-text);
}
/* ------------------------------------------------------------------------
Body — paper background, serif body, editorial
Aggressive: force serif everywhere, then re-override mono/display zones
------------------------------------------------------------------------ */
html, body, .App, .App-content, .container, .IndexPage, .DiscussionPage,
.SettingsPage, .UserPage, .NotificationsPage, .Search-results,
p, li, div, span, td, blockquote, .fa, em, strong {
font-family: var(--ob-serif) !important;
}
html, body, .App {
background: var(--ob-bg) !important;
color: var(--ob-text) !important;
font-size: 19px !important; /* matches new OPENBUREAU body */
line-height: 1.55 !important;
}
/* Form fields — serif for prose, sans for short controls */
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.05rem !important;
line-height: 1.55 !important;
}
input, select, .FormControl, .Search-input {
font-family: var(--ob-sans) !important;
}
/* Headlines — serif (matches new OPENBUREAU article style) */
h1, h2, h3, h4, h5,
.DiscussionListItem-title,
.DiscussionHero-title,
.DiscussionPage .Hero-title,
.Post-header h3,
.SignUpModal-title,
.LogInModal-title {
font-family: var(--ob-serif) !important;
font-weight: 700 !important;
letter-spacing: -0.018em !important;
color: var(--ob-text) !important;
}
/* Meta lines + mono labels */
.DiscussionListItem-count,
.PostMeta,
.Post-meta,
.username,
.item-terminalPost,
.item-startTime,
.notifications-pane-header,
.Search-results {
font-family: var(--ob-mono) !important;
font-size: 0.82rem !important;
color: var(--ob-muted) !important;
}
/* Listings (tags, controls) — Inter */
.IndexPage-toolbar,
.DiscussionList-content .DiscussionListItem-info,
.TagsLabel,
.tag-name,
.NotificationsList,
.Dropdown-menu,
.Sidebar .item-newDiscussion {
font-family: var(--ob-sans) !important;
}
/* ------------------------------------------------------------------------
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-dark) !important;
border-bottom: none !important;
box-shadow: none !important;
color: var(--ob-dark-text) !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) !important;
color: var(--ob-text) !important;
border-bottom: none !important;
text-shadow: none !important;
padding: 2.5rem 1rem 1.5rem !important;
}
.Hero-title {
color: var(--ob-text) !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-family: var(--ob-serif) !important;
font-style: normal !important;
font-size: 1.25rem !important;
margin-top: 0.6rem !important;
}
/* Discussion page hero (single thread) — Republik-style clean header */
.DiscussionHero {
background: var(--ob-bg) !important;
border-bottom: none !important;
box-shadow: none !important;
padding: 2rem 1rem 1.5rem !important;
}
.DiscussionHero-title {
color: var(--ob-text) !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 pill above title — terracotta-tinted, no #, rounded */
.DiscussionHero .TagsLabel,
.DiscussionHero .TagLabel {
display: inline-block;
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;
}
/* ------------------------------------------------------------------------
Discussion list — editorial entries, no cards
------------------------------------------------------------------------ */
.IndexPage-results,
.DiscussionList-content,
.DiscussionList {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Discussion list items — like OPENBUREAU journal cards: clean separators */
.DiscussionListItem {
background: transparent !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-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-family: var(--ob-sans) !important;
font-size: 0.9rem !important;
}
.DiscussionListItem-count {
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;
filter: grayscale(30%) contrast(0.95);
transition: filter 0.3s ease;
}
.Avatar:hover,
.DiscussionListItem:hover .Avatar,
.Post:hover .Avatar { filter: grayscale(0%) contrast(1); }
/* ------------------------------------------------------------------------
Tags — pills (matches OPENBUREAU's tag pills)
------------------------------------------------------------------------ */
.TagsLabel {
font-family: var(--ob-display) !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
}
.TagsLabel .tag {
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: color-mix(in oklab, var(--ob-accent) 30%, transparent) !important;
border: none !important;
}
.TagTile {
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; font-family: var(--ob-serif) !important; font-weight: 700 !important; }
.TagTile-description { color: var(--ob-muted) !important; font-family: var(--ob-serif) !important; }
/* ------------------------------------------------------------------------
Buttons — softer, rounded, no heavy borders
------------------------------------------------------------------------ */
.Button {
border-radius: 999px !important;
font-family: var(--ob-display) !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
background: color-mix(in oklab, var(--ob-text) 6%, transparent) !important;
color: var(--ob-text) !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--primary {
background: var(--ob-accent) !important;
color: #fff !important;
border: none !important;
}
.Button--primary:hover {
background: var(--ob-accent-2) !important;
color: #fff !important;
}
.Button--link {
border: none !important;
background: transparent !important;
color: var(--ob-text) !important;
padding: 0.45rem 0.6rem !important;
}
/* ------------------------------------------------------------------------
Links
------------------------------------------------------------------------ */
a {
color: var(--ob-text);
border-bottom: 1px solid var(--ob-border);
text-decoration: none !important;
}
a:hover { color: var(--ob-accent); border-bottom-color: var(--ob-accent); }
/* Strip border-bottom in places where it'd be noisy */
.App-header a,
.Sidebar a,
.Dropdown a,
.Button,
.TagsLabel a,
.Avatar,
.Search-results a,
.DiscussionListItem-title a,
.PostUser a,
.username,
.notifications a { border-bottom: none !important; }
/* ------------------------------------------------------------------------
Discussion / Post view — Republik-style article header + clean post stream
------------------------------------------------------------------------ */
.DiscussionPage-discussion {
background: transparent !important;
}
.PostStream { background: transparent !important; }
.Post {
border-top: 1px solid var(--ob-border) !important;
border-bottom: none !important;
padding: 1.8rem 0 !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,
.Post .PostMeta time,
.Post .Post-header time {
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.1rem !important;
line-height: 1.55 !important;
color: var(--ob-text) !important;
}
.Post-body p { margin: 0.6em 0 !important; }
.Post-body blockquote {
border-left: 2px solid var(--ob-accent) !important;
padding-left: 1rem !important;
margin: 0.8rem 0 !important;
font-style: italic;
color: var(--ob-muted) !important;
}
.Post-body code, .Post-body pre {
font-family: var(--ob-mono) !important;
background: var(--ob-bg-2) !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)
------------------------------------------------------------------------ */
.Sidebar {
background: transparent !important;
}
.Sidebar .item-nav .Dropdown-toggle,
.Sidebar .item-nav a {
font-family: var(--ob-sans) !important;
color: var(--ob-text) !important;
background: transparent !important;
border-radius: 0 !important;
border-left: 2px solid transparent !important;
}
.Sidebar .item-nav .active a,
.Sidebar .item-nav a:hover {
background: var(--ob-bg-2) !important;
border-left-color: var(--ob-accent) !important;
}
/* ------------------------------------------------------------------------
Composer (reply / new discussion)
------------------------------------------------------------------------ */
.Composer {
background: var(--ob-bg) !important;
border-top: 1px solid var(--ob-border) !important;
box-shadow: 0 -2px 12px rgba(0,0,0,0.04) !important;
}
.Composer-header, .Composer-body, .Composer textarea {
background: var(--ob-bg) !important;
color: var(--ob-text) !important;
font-family: var(--ob-serif) !important;
}
/* ------------------------------------------------------------------------
Modals (sign up, log in)
------------------------------------------------------------------------ */
.Modal-content {
background: var(--ob-bg) !important;
border-radius: 0 !important;
border: 1px solid var(--ob-border) !important;
box-shadow: 0 8px 40px rgba(0,0,0,0.08) !important;
}
.Modal-header { border-bottom: 1px solid var(--ob-border) !important; }
.Modal input.FormControl, .FormControl {
background: var(--ob-bg-2) !important;
border: 1px solid var(--ob-border) !important;
border-radius: 0 !important;
color: var(--ob-text) !important;
font-family: var(--ob-sans) !important;
}
.Modal input.FormControl:focus, .FormControl:focus {
border-color: var(--ob-accent) !important;
box-shadow: 0 0 0 2px rgba(181, 74, 44, 0.15) !important;
}
/* ------------------------------------------------------------------------
Dropdown menus
------------------------------------------------------------------------ */
.Dropdown-menu {
background: var(--ob-bg) !important;
border: 1px solid var(--ob-border) !important;
border-radius: 0 !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}
/* ------------------------------------------------------------------------
Misc polish
------------------------------------------------------------------------ */
.Alert { border-radius: 0 !important; }
.Badge { border-radius: 0 !important; font-family: var(--ob-mono) !important; }
.Pagination-link { border-radius: 0 !important; font-family: var(--ob-mono) !important; }
Reference in New Issue View Git Blame Copy Permalink