karim/OPENBUREAU
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
karim
2026-05-31 11:26:58 +02:00
parent 8662970fe5
commit e7d820b83c
15 changed files with 631 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/custom.css
+218 -206
View File
@@ -17,9 +17,9 @@
--font-family-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-family-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
--font-family-mono-shibui: var(--font-family-mono); --font-family-mono-shibui: var(--font-family-mono);
--font-size-base: 1.0625rem; --font-size-base: 1.1875rem; /* +2pt vs. 1.0625 — better body legibility */
--font-size-small: 0.875rem; --font-size-small: 0.875rem;
--font-size-code: 0.92rem; --font-size-code: 0.95rem;
--spacing-base: 1.7em; --spacing-base: 1.7em;
--spacing-xs: calc(var(--spacing-base) * 0.25); --spacing-xs: calc(var(--spacing-base) * 0.25);
@@ -46,7 +46,7 @@
--accent-soft: #d97a5a; --accent-soft: #d97a5a;
/* Republik-aligned tokens */ /* Republik-aligned tokens */
--color-dark-panel: #191919; /* masthead/footer/hero (Republik #191919) */ --color-dark-panel: #191919; /* masthead/footer/hero */
--color-dark-panel-text: #f0f0f0; --color-dark-panel-text: #f0f0f0;
--color-dark-panel-muted: #a9a9a9; --color-dark-panel-muted: #a9a9a9;
@@ -150,19 +150,28 @@ a:hover {
/* override: stack wordmark above nav, both within content column */ /* override: stack wordmark above nav, both within content column */
} }
/* Logo as background image (paths-only SVG, no font dependency) */
.wordmark-link { .wordmark-link {
border: none; border: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: inline-block; display: block;
justify-self: center; justify-self: center;
/* Republik-style: serif wordmark, all caps, white on black */ width: clamp(140px, 18vw, 200px);
font-family: var(--font-family-serif); height: clamp(22px, 2.8vw, 32px);
font-weight: 700; background-image: url("/logo/logo.svg");
font-size: clamp(1.5rem, 3vw, 2rem); background-repeat: no-repeat;
letter-spacing: 0.02em; background-position: center;
background-size: contain;
color: transparent;
font-size: 0;
line-height: 1; line-height: 1;
color: #fff; }
.wordmark-sr {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
} }
.wordmark-link:hover, .wordmark-link:hover,
.wordmark-link:focus { color: #fff; border: none; opacity: 0.85; } .wordmark-link:focus { color: #fff; border: none; opacity: 0.85; }
@@ -285,7 +294,6 @@ a:hover {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
.journal-entry-link:hover .journal-title { color: var(--section-color, var(--accent)); }
.journal-entry-body { .journal-entry-body {
display: grid; display: grid;
@@ -312,11 +320,12 @@ a:hover {
line-height: 1; line-height: 1;
} }
/* Byline: single smooth serif line, "Von Author, DD.MM.YYYY" — Republik-style */ /* Byline: single smooth sans line, "Von Author, DD.MM.YYYY" — Republik-style */
.journal-byline { .journal-byline {
font-family: var(--font-family-serif); font-family: var(--font-family-sans);
font-size: 1rem; font-size: 0.95rem;
font-style: italic; font-style: normal;
font-weight: 400;
line-height: 1.4; line-height: 1.4;
color: var(--color-text-muted); color: var(--color-text-muted);
margin: 0; margin: 0;
@@ -324,13 +333,10 @@ a:hover {
} }
.journal-byline .journal-author { .journal-byline .journal-author {
color: var(--color-text-primary); color: var(--color-text-primary);
font-style: normal;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: none;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
} }
.journal-byline .journal-date { font-variant-numeric: tabular-nums; font-style: normal; } .journal-byline .journal-date { font-variant-numeric: tabular-nums; }
/* Legacy .journal-meta retained for backwards-compat if any markup references it */ /* Legacy .journal-meta retained for backwards-compat if any markup references it */
.journal-meta { .journal-meta {
@@ -360,7 +366,7 @@ a:hover {
font-size: 0.9rem; font-size: 0.9rem;
letter-spacing: 0.12em; letter-spacing: 0.12em;
} }
.journal-author::before { content: "Von "; color: var(--color-text-muted); font-weight: 400; font-style: italic; } .journal-author::before { content: "Von "; color: var(--color-text-muted); font-weight: 400; }
.journal-entry--hero .journal-author::before { color: var(--color-dark-panel-muted); } .journal-entry--hero .journal-author::before { color: var(--color-dark-panel-muted); }
.journal-title { .journal-title {
@@ -391,35 +397,96 @@ a:hover {
[data-color="amagumo"] { --section-color: var(--palette-amagumo); } [data-color="amagumo"] { --section-color: var(--palette-amagumo); }
[data-color="yuki"] { --section-color: var(--palette-yuki); } [data-color="yuki"] { --section-color: var(--palette-yuki); }
/* Hero treatment — first entry as a coloured Republik-style block. /* ------------------------------------------------------------------------
Full-bleed dark panel, white serif title, light meta on top. */ Journal entries — three Republik-style layouts (set in front matter
/* Hero entry — Republik pattern. via `layout: image|icon|text`). Every entry is a full-bleed coloured
Without cover_image: warm terracotta panel, centered text on it. or image panel; per-section/per-post colour drives the bg.
With cover_image: image fills the hero as background, text sits - image: cover image fills panel; text on dark gradient overlay; white type
at the bottom on a dark gradient that fades into the terracotta. */ - icon: coloured bg; small centred image above text; dark type
.journal-entry--hero { - text: coloured bg; no image; dark type
------------------------------------------------------------------------ */
/* Base panel — break out of the boxed content column */
.journal-entry--layout-image,
.journal-entry--layout-icon,
.journal-entry--layout-text {
list-style: none;
border: none; border: none;
background: #3a1a0d; margin: 0 calc(50% - 50vw);
color: var(--color-dark-panel-text);
padding: 0; padding: 0;
margin: 0 calc(50% - 50vw) var(--spacing-lg); position: relative;
border-top: 10px solid var(--section-color, var(--accent)); overflow: hidden;
} }
.journal-entry--hero:last-child { border-bottom: none; }
.journal-entry--hero .journal-entry-link { .journal-entry--layout-image .journal-entry-link,
.journal-entry--layout-icon .journal-entry-link,
.journal-entry--layout-text .journal-entry-link {
display: block;
width: 100%;
color: inherit;
text-decoration: none;
border: none;
}
/* Centred body, generous padding */
.journal-entry--layout-image .journal-entry-body,
.journal-entry--layout-icon .journal-entry-body,
.journal-entry--layout-text .journal-entry-body {
max-width: 60ch;
margin: 0 auto;
padding: 3.5rem 1.75rem 3rem;
display: grid;
justify-items: center;
row-gap: 1.1rem;
text-align: center;
}
.journal-entry--layout-image .journal-entry-body > *,
.journal-entry--layout-icon .journal-entry-body > *,
.journal-entry--layout-text .journal-entry-body > * {
margin: 0;
max-width: 60ch;
}
/* Title sizes per layout — image (hero) is bigger, icon/text more modest */
.journal-entry--layout-image .journal-title {
font-size: clamp(2rem, 3.8vw, 2.8rem);
line-height: 1.08;
letter-spacing: -0.026em;
font-weight: 800;
}
.journal-entry--layout-icon .journal-title,
.journal-entry--layout-text .journal-title {
font-size: clamp(1.7rem, 3vw, 2.2rem);
line-height: 1.1;
letter-spacing: -0.022em;
font-weight: 800;
}
.journal-entry--layout-image .journal-summary,
.journal-entry--layout-icon .journal-summary,
.journal-entry--layout-text .journal-summary {
font-size: 1.15rem;
line-height: 1.4;
max-width: 42ch;
}
.journal-entry--layout-image .journal-byline,
.journal-entry--layout-icon .journal-byline,
.journal-entry--layout-text .journal-byline {
font-size: 0.95rem;
}
/* ---- Layout: IMAGE (full-bleed photo as background, no overlay) ---- */
.journal-entry--layout-image {
background: #1a1a1a;
color: #fff;
}
.journal-entry--layout-image .journal-entry-link {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
position: relative; min-height: 70vh;
overflow: hidden;
color: inherit;
min-height: auto;
} }
/* When a hero image is present, give the link a viewport-anchored height */ .journal-bg-image {
.journal-entry--hero:has(.journal-hero-image) .journal-entry-link {
min-height: 72vh;
}
.journal-hero-image {
position: absolute; position: absolute;
inset: 0; inset: 0;
width: 100%; width: 100%;
@@ -429,155 +496,109 @@ a:hover {
margin: 0; margin: 0;
filter: none; filter: none;
} }
.journal-hero-image:hover { filter: none; } .journal-bg-image:hover { filter: none; }
.journal-entry--hero .journal-entry-body { .journal-entry--layout-image .journal-entry-body {
position: relative; position: relative;
z-index: 2; z-index: 2;
display: grid;
justify-items: center;
row-gap: 1.1rem;
padding: 2.6rem 1.75rem 3rem;
text-align: center;
background: #3a1a0d;
}
/* When a hero image is present, body sits at the bottom over a gradient
so text reads cleanly over the photo while the photo stays visible above. */
.journal-entry--hero:has(.journal-hero-image) .journal-entry-body {
padding-top: 7rem;
background: linear-gradient(180deg,
rgba(58,26,13,0) 0%,
rgba(58,26,13,0.55) 25%,
rgba(58,26,13,0.92) 65%,
#3a1a0d 100%);
}
.journal-entry--hero .journal-entry-body > * {
max-width: 60ch; max-width: 60ch;
margin: 0; padding-top: 3rem;
background: transparent;
color: #fff;
} }
.journal-entry--hero .journal-summary { max-width: 38ch; } /* Solid white text — no shadow halo. Legibility comes from the slight
darkening of the image at the bottom (where the body sits). */
.journal-entry--layout-image .journal-title,
.journal-entry--layout-image .journal-rubric,
.journal-entry--layout-image .journal-summary,
.journal-entry--layout-image .journal-byline {
color: #fff;
text-shadow: none;
}
.journal-entry--layout-image .journal-section {
background: rgba(0, 0, 0, 0.45);
color: #fff;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.journal-entry--layout-image .journal-byline,
.journal-entry--layout-image .journal-byline .journal-author,
.journal-entry--layout-image .journal-byline .journal-date,
.journal-entry--layout-image .journal-byline .journal-author::before { color: #fff; }
.journal-entry--layout-image .journal-byline .journal-author { text-decoration: none; }
/* ------------------------------------------------------------------------ /* ---- Layout: ICON (coloured bg + small centred image, image is NOT tinted) ---- */
Non-hero card with cover image — two presentation modes: .journal-entry--layout-icon {
background: var(--section-color, var(--accent));
1) default (wide): Republik-style — image as full-card wide banner above body. color: var(--color-text-primary);
2) icon mode: small square/portrait thumbnail next to the body text, }
with the card background filled in --section-color (when set). .journal-icon-image {
Trigger by adding `image_mode: icon` in the front matter
(which adds `data-image="icon"` to the <li>).
------------------------------------------------------------------------ */
/* Default wide banner image (no data-image) */
.journal-entry:not(.journal-entry--hero) .journal-card-image {
display: block; display: block;
width: 100%; max-width: 240px;
aspect-ratio: 16 / 9; max-height: 240px;
object-fit: cover; width: auto;
margin: 0 0 1rem; height: auto;
filter: grayscale(40%); margin: 0 auto 1rem;
transition: filter 0.4s ease;
}
.journal-entry-link:hover .journal-card-image { filter: grayscale(0%); }
/* Icon mode — colored card with thumbnail to the right */
.journal-entry[data-image="icon"]:not(.journal-entry--hero) {
border: none;
background: color-mix(in oklab, var(--section-color, var(--accent)) 12%, transparent);
padding: 1.2rem 1.4rem;
border-radius: 4px;
border-left: 4px solid var(--section-color, var(--accent));
}
.journal-entry[data-image="icon"]:not(.journal-entry--hero) + .journal-entry { border-top: none; }
.journal-entry[data-image="icon"]:not(.journal-entry--hero) .journal-entry-link {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 1.4rem;
align-items: start;
}
.journal-entry[data-image="icon"]:not(.journal-entry--hero) .journal-entry-body {
grid-column: 1;
}
.journal-entry[data-image="icon"]:not(.journal-entry--hero) .journal-card-image {
grid-column: 2;
grid-row: 1;
width: 96px;
height: 96px;
aspect-ratio: 1 / 1;
object-fit: cover;
margin: 0;
border-radius: 4px;
filter: none; filter: none;
} }
@media (max-width: 540px) { .journal-icon-image:hover { filter: none; }
.journal-entry[data-image="icon"]:not(.journal-entry--hero) .journal-card-image {
width: 64px;
height: 64px;
}
}
.journal-entry--hero .journal-section {
/* on the dark hero bg: brighter tint, light text */
background: color-mix(in oklab, var(--section-color, var(--accent-soft)) 45%, transparent);
color: var(--color-dark-panel-text);
}
.journal-entry--hero .journal-byline { color: var(--color-dark-panel-muted); }
.journal-entry--hero .journal-byline .journal-author { color: var(--color-dark-panel-text); }
.journal-entry--hero .journal-byline .journal-author::before { color: var(--color-dark-panel-muted); }
.journal-entry--hero .journal-title {
font-size: clamp(2.1rem, 4.2vw, 3rem);
line-height: 1.02;
letter-spacing: -0.028em;
font-weight: 800;
color: var(--color-dark-panel-text);
}
.journal-entry--hero .journal-summary {
font-size: 1.35rem;
line-height: 1.35;
color: var(--color-dark-panel-text);
max-width: 38ch;
}
.journal-entry--hero .journal-byline {
font-size: 1.05rem;
color: var(--color-dark-panel-muted);
}
.journal-entry--hero .journal-byline .journal-author {
color: var(--color-dark-panel-text);
}
.journal-entry--hero .journal-tags { color: var(--color-dark-panel-muted); }
.journal-entry--hero .journal-entry-link:hover .journal-title { color: var(--accent-soft); }
.journal-summary { /* ---- Layout: TEXT (coloured bg only) ---- */
font-family: var(--font-family-serif); .journal-entry--layout-text {
font-size: var(--font-size-base); background: var(--section-color, var(--accent));
line-height: 1.45;
color: var(--color-text-primary); color: var(--color-text-primary);
max-width: 60ch;
} }
.journal-tags { /* now extends .tag-pills — base styles come from there */ } /* Section pill on coloured panels — darker overlay on the colour bg */
.journal-entry--layout-icon .journal-section,
.journal-entry--layout-text .journal-section {
background: color-mix(in oklab, var(--color-text-primary) 10%, transparent);
color: var(--color-text-primary);
}
/* Hero tags — sit inside the dark hero block, below the link, centered */ /* All text on coloured panels is solid text-primary — including byline */
.journal-entry--hero > .tag-pills { .journal-entry--layout-icon .journal-title,
.journal-entry--layout-text .journal-title,
.journal-entry--layout-icon .journal-summary,
.journal-entry--layout-text .journal-summary,
.journal-entry--layout-icon .journal-byline,
.journal-entry--layout-text .journal-byline,
.journal-entry--layout-icon .journal-byline .journal-author,
.journal-entry--layout-text .journal-byline .journal-author,
.journal-entry--layout-icon .journal-byline .journal-date,
.journal-entry--layout-text .journal-byline .journal-date,
.journal-entry--layout-icon .journal-byline .journal-author::before,
.journal-entry--layout-text .journal-byline .journal-author::before {
color: var(--color-text-primary);
}
/* Tags sit centred inside the coloured panel, below the link */
.journal-entry--layout-image > .tag-pills,
.journal-entry--layout-icon > .tag-pills,
.journal-entry--layout-text > .tag-pills {
margin: 0 auto; margin: 0 auto;
padding: 0 1.75rem 2.2rem; padding: 0 1.75rem 2.6rem;
max-width: var(--container-width); max-width: var(--container-width);
text-align: center; text-align: center;
} }
.journal-entry--hero > .tag-pills a { .journal-entry--layout-image > .tag-pills a {
background: color-mix(in oklab, var(--section-color, var(--accent-soft)) 30%, transparent); background: color-mix(in oklab, var(--section-color, var(--accent-soft)) 30%, transparent);
color: var(--color-dark-panel-text); color: var(--color-dark-panel-text);
} }
.journal-entry--hero > .tag-pills a:hover { .journal-entry--layout-image > .tag-pills a:hover {
background: color-mix(in oklab, var(--section-color, var(--accent-soft)) 50%, transparent); background: color-mix(in oklab, var(--section-color, var(--accent-soft)) 50%, transparent);
} }
.journal-entry--layout-icon > .tag-pills a,
.journal-entry--layout-text > .tag-pills a {
background: color-mix(in oklab, var(--color-text-primary) 12%, transparent);
color: var(--color-text-primary);
}
.journal-entry--layout-icon > .tag-pills a:hover,
.journal-entry--layout-text > .tag-pills a:hover {
background: color-mix(in oklab, var(--color-text-primary) 22%, transparent);
}
/* Non-hero tags — sit just below the body of the card */ .journal-tags { /* extends .tag-pills */ }
.journal-entry:not(.journal-entry--hero) > .tag-pills {
margin-top: 0.6rem;
}
/* In icon-mode card: tags align with the body (left of the thumbnail) */
.journal-entry[data-image="icon"]:not(.journal-entry--hero) > .tag-pills {
margin-top: 0.6rem;
padding-left: 0;
}
.more { .more {
margin-top: var(--spacing-md); margin-top: var(--spacing-md);
@@ -787,57 +808,49 @@ a:hover {
.single-summary { .single-summary {
font-family: var(--font-family-serif); font-family: var(--font-family-serif);
font-style: normal; font-style: normal;
font-size: 1.25rem; font-size: 1.4rem;
line-height: 1.4; line-height: 1.4;
color: var(--color-text-primary); color: var(--color-text-primary);
margin: 0 0 var(--spacing-sm); margin: 0 0 var(--spacing-md); /* breathing room before byline */
max-width: 55ch; max-width: 55ch;
} }
.single-byline { .single-byline {
font-family: var(--font-family-serif); font-family: var(--font-family-sans);
font-style: italic; font-size: 0.95rem;
font-size: 1rem; line-height: 1.4;
color: var(--color-text-muted);
margin: 0 0 0.6rem;
}
/* Reading time + last-modified — sits just below the byline */
.single-meta {
font-family: var(--font-family-sans);
font-size: 0.9rem;
line-height: 1.4; line-height: 1.4;
color: var(--color-text-muted); color: var(--color-text-muted);
margin: 0; margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: baseline;
} }
.single-meta .reading-time,
.single-meta .lastmod { font-variant-numeric: tabular-nums; }
.single-byline .byline-author { .single-byline .byline-author {
color: var(--color-text-primary); color: var(--color-text-primary);
font-style: normal;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: none;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
} }
.single-byline .byline-author::before { .single-byline .byline-author::before {
content: "Von "; content: "Von ";
color: var(--color-text-muted); color: var(--color-text-muted);
font-style: italic;
font-weight: 400; font-weight: 400;
text-decoration: none; text-decoration: none;
} }
.single-byline .byline-date { font-style: normal; font-variant-numeric: tabular-nums; } .single-byline .byline-date { font-variant-numeric: tabular-nums; }
.single-byline {
font-family: var(--font-family-mono);
font-size: 0.85rem;
color: var(--color-text-muted);
margin: 0 0 var(--spacing-xs);
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: baseline;
}
.byline-author { color: var(--color-text-primary); font-weight: 500; } .byline-author { color: var(--color-text-primary); font-weight: 500; }
.byline-date { font-variant-numeric: tabular-nums; } .byline-date { font-variant-numeric: tabular-nums; }
.single-summary {
font-family: var(--font-family-serif);
font-style: italic;
font-size: 1.02rem;
line-height: 1.45;
margin: var(--spacing-xs) 0 0;
max-width: 55ch;
}
.single-content h2 { .single-content h2 {
font-family: var(--font-family-serif); font-family: var(--font-family-serif);
font-size: 1.45rem; font-size: 1.45rem;
@@ -928,8 +941,8 @@ a:hover {
} }
.time { .time {
font-family: var(--font-family-mono); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: 0.9rem;
color: var(--color-text-muted); color: var(--color-text-muted);
margin-top: var(--spacing-md); margin-top: var(--spacing-md);
padding-top: var(--spacing-sm); padding-top: var(--spacing-sm);
@@ -938,8 +951,8 @@ a:hover {
.back-nav-wrap { .back-nav-wrap {
margin-top: var(--spacing-md); margin-top: var(--spacing-md);
font-family: var(--font-family-mono); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: 0.9rem;
} }
.back-link { border: none; color: var(--color-text-muted); } .back-link { border: none; color: var(--color-text-muted); }
.back-link:hover { color: var(--accent); } .back-link:hover { color: var(--accent); }
@@ -951,11 +964,10 @@ a:hover {
margin-top: var(--spacing-lg); margin-top: var(--spacing-lg);
padding-top: var(--spacing-sm); padding-top: var(--spacing-sm);
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
font-family: var(--font-family-mono); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: 0.85rem;
color: var(--color-text-muted); color: var(--color-text-muted);
text-transform: uppercase; letter-spacing: 0.01em;
letter-spacing: 0.03em;
} }
.page-foot-nav ol { .page-foot-nav ol {
list-style: none; list-style: none;
content/library/buerofuehrung/warum-offen.md
+9 -8
View File
@@ -4,18 +4,19 @@ date: 2026-05-22
tags: ["büroführung", "praxis", "open-source"] tags: ["büroführung", "praxis", "open-source"]
summary: "Ein offenes Architekturbüro ist nicht karitativ — es ist praktischer, robuster, ehrlicher." summary: "Ein offenes Architekturbüro ist nicht karitativ — es ist praktischer, robuster, ehrlicher."
color: sakura color: sakura
layout: text
--- ---
Architektur ist traditionell ein geschlossener Beruf. Wettbewerbe sind nicht-öffentlich, Verträge nicht-verhandelbar, Werkzeuge proprietär. Wissen wird gehortet, weil es als Wettbewerbsvorteil verstanden wird. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Wir bezweifeln, dass das stimmt. Duis aute irure dolor in reprehenderit.
**Offen** zu arbeiten heisst hier dreierlei: **Lorem ipsum** dolor sit amet:
1. **Texte und Notizen sind öffentlich.** Wer mitlesen will, kann das. 1. **Consectetur adipiscing elit.** Sed do eiusmod tempor incididunt ut labore.
2. **Werkzeuge sind frei.** Programme wie DOSSIER und RAPPORT sind quelloffen, andere dürfen sie nutzen, anpassen, weiterbauen. 2. **Ut enim ad minim veniam.** Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
3. **Verträge und Honorare sind dokumentiert.** Wir zeigen, wie ein offenes Büro sich finanziert, ohne das gegen sich zu drehen. 3. **Duis aute irure dolor.** In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Das ist kein karitatives Projekt. Es ist eine Wette darauf, dass **Offenheit produktiver ist als Abschottung** — für die Praxis, für die Kollegen, für die Disziplin. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt — **mollit anim id est laborum** — sed ut perspiciatis unde omnis iste.
— mehr dazu in den folgenden Notizen. — natus error sit voluptatem accusantium.
content/library/software/dossier.md
+3 -3
View File
@@ -7,10 +7,10 @@ summary: "Projektorganisation für ein Architekturbüro — von der Anfrage zur
external: "https://dossier.gabrielevarano.ch" external: "https://dossier.gabrielevarano.ch"
color: kori color: kori
cover_image: /images/tokyo-metro.jpg cover_image: /images/tokyo-metro.jpg
image_mode: icon layout: icon
--- ---
**DOSSIER** ist die Projektverwaltung von OPENBUREAU. **Lorem ipsum dolor sit amet**, consectetur adipiscing elit.
Eine Anwendung, die ein Projekt von der ersten Anfrage bis zur Schlussrechnung begleitet — strukturiert, nachvollziehbar, offen. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua — ut enim ad minim veniam, quis nostrud exercitation.
→ [dossier.gabrielevarano.ch](https://dossier.gabrielevarano.ch) → [dossier.gabrielevarano.ch](https://dossier.gabrielevarano.ch)
content/library/software/eigene-werkzeuge.md
+6 -5
View File
@@ -4,13 +4,14 @@ date: 2026-05-21
tags: ["software", "praxis", "tools"] tags: ["software", "praxis", "tools"]
summary: "DOSSIER und RAPPORT sind keine Lifestyle-Projekte — sie sind Reaktion auf konkrete Lücken." summary: "DOSSIER und RAPPORT sind keine Lifestyle-Projekte — sie sind Reaktion auf konkrete Lücken."
color: yuyake color: yuyake
layout: text
--- ---
Wir benutzen viel fremde Software. Aber an zwei Stellen kam keiner der existierenden Werkzeuge an die Praxis heran, die wir brauchten — also haben wir selbst gebaut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua — ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- **[DOSSIER](https://dossier.gabrielevarano.ch)** organisiert Projekte: von der ersten Anfrage über Vertrag, Planstände, Rechnungen bis zur Übergabe. Strukturiert genug, um nichts zu verlieren; offen genug, um nicht im Weg zu stehen. - **[DOSSIER](https://dossier.gabrielevarano.ch)** — duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
- **[RAPPORT](https://rapport.gabrielevarano.ch)** hält Stunden, Wege und Aufwand fest. Nicht als Überwachung, sondern als Material für die nächste Honoraroffert. - **[RAPPORT](https://rapport.gabrielevarano.ch)** — sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Beide sind quelloffen. Beide sind im Aufbau. Beide sind so geschrieben, dass ein anderes Büro sie morgen für sich nutzen könnte. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Eine vollständige Liste der **anderen** Werkzeuge, die wir empfehlen, findet sich unter [Werkzeuge](/library/werkzeuge). Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet — [Werkzeuge](/library/werkzeuge).
content/library/software/rapport.md
+3 -2
View File
@@ -6,9 +6,10 @@ tags: ["software", "eigene-werkzeuge"]
summary: "Zeit- und Aufwandserfassung für ein Architekturbüro." summary: "Zeit- und Aufwandserfassung für ein Architekturbüro."
external: "https://rapport.gabrielevarano.ch" external: "https://rapport.gabrielevarano.ch"
color: kusa color: kusa
layout: text
--- ---
**RAPPORT** erfasst Stunden, Wege und Aufwand. **Lorem ipsum dolor sit amet**, consectetur adipiscing elit.
Material für transparente Honorarofferten, nicht für Überwachung. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
→ [rapport.gabrielevarano.ch](https://rapport.gabrielevarano.ch) → [rapport.gabrielevarano.ch](https://rapport.gabrielevarano.ch)
content/library/software/stack.md
+16 -15
View File
@@ -5,29 +5,30 @@ weight: 30
tags: ["software", "stack", "empfehlungen"] tags: ["software", "stack", "empfehlungen"]
summary: "Programme und Dienste, die wir Tag für Tag benutzen — kuratiert und kommentiert." summary: "Programme und Dienste, die wir Tag für Tag benutzen — kuratiert und kommentiert."
cover_image: /images/tokyo-metro.jpg cover_image: /images/tokyo-metro.jpg
layout: image
--- ---
Diese Liste wächst. Sie ist kein Inventar, sondern eine **Position**: jedes Werkzeug steht für eine Entscheidung über die Arbeitsweise des Büros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore — **lorem ipsum**: ut enim ad minim veniam, quis nostrud exercitation ullamco.
## Zeichnen & Modellieren ## Lorem Ipsum I
- **Rhino + Grasshopper** — das Rückgrat des geometrischen Arbeitens. Wir entwickeln eigene Plugins ([Rhino-Panel](https://gitea.kgva.ch)). - **Lorem ipsum** — dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor ([lorem ipsum](https://gitea.kgva.ch)).
- **Blender** — für freie 3D-Arbeiten, Visualisierungen, Animation. - **Dolor sit** — ut labore et dolore magna aliqua, ut enim ad minim veniam.
## Schreiben & Dokumentieren ## Lorem Ipsum II
- **Markdown + Hugo** — alle Texte, auch diese hier, sind `.md` und werden statisch generiert. - **Consectetur** — quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
- **Zotero** — Literatur und Quellen. - **Adipiscing** — duis aute irure dolor in reprehenderit.
## Koordination ## Lorem Ipsum III
- **Gitea** (selbst-gehostet) — Code, Texte, Repositories. - **Eiusmod tempor** (lorem ipsum) — incididunt ut labore et dolore magna.
- **Flarum** (selbst-gehostet) — Diskussion und Gespräch. - **Ut enim ad minim** (lorem ipsum) — veniam, quis nostrud exercitation.
- **Nextcloud** (selbst-gehostet) — Dateien, Kalender, Kontakte. - **Quis nostrud** (lorem ipsum) — ullamco laboris nisi ut aliquip.
## Eigene Werkzeuge ## Lorem Ipsum IV
- **[DOSSIER](/library/software/dossier/)** — Projektverwaltung. - **[DOSSIER](/library/software/dossier/)** — lorem ipsum.
- **[RAPPORT](/library/software/rapport/)** — Stundenerfassung. - **[RAPPORT](/library/software/rapport/)** — dolor sit amet.
— diese Seite wird laufend erweitert. — sed ut perspiciatis unde omnis iste natus error sit voluptatem.
content/library/theorie/typologie-als-werkzeug.md
+5 -4
View File
@@ -4,12 +4,13 @@ date: 2026-05-20
tags: ["theorie", "typologie", "methode"] tags: ["theorie", "typologie", "methode"]
summary: "Erste Notiz über Typologie nicht als Katalog, sondern als operatives Werkzeug im Entwurf." summary: "Erste Notiz über Typologie nicht als Katalog, sondern als operatives Werkzeug im Entwurf."
color: ajisai color: ajisai
layout: text
--- ---
Typologie wird oft als Inhaltsverzeichnis missverstanden: eine Liste von Grundrissen, sortiert nach Funktion. Diese Lesart ist bequem und falsch. Lorem ipsum dolor sit amet, consectetur adipiscing elit: sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Eine Typologie ist ein **Denkwerkzeug**. Sie macht das Wiederkehrende sichtbar und damit das Besondere argumentierbar. Erst wenn wir das Übliche kennen, können wir das Eigentümliche begründen. Ullamco laboris nisi ut **aliquip ex ea commodo consequat**. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Im Entwurf bedeutet das: nicht "welcher Typ ist das?", sondern "**gegen welchen Typ** entwerfen wir hier?". Excepteur sint occaecat: nicht "cupidatat non proident?", sondern "**sunt in culpa** qui officia deserunt mollit?".
— ein erster Notiz, weitere folgen. — sed ut perspiciatis, weitere folgen.
hugo.yaml
+1 -1
View File
@@ -4,7 +4,7 @@ title: "OPENBUREAU"
theme: "openbureau" theme: "openbureau"
enableRobotsTXT: true enableRobotsTXT: true
enableGitInfo: false enableGitInfo: true
hasCJKLanguage: false hasCJKLanguage: false
defaultContentLanguage: de defaultContentLanguage: de
layouts/_default/baseof.html
+3 -1
View File
@@ -9,7 +9,9 @@
<body> <body>
<a href="#main-content" class="skip-link">Skip to content</a> <a href="#main-content" class="skip-link">Skip to content</a>
<header role="banner" class="site-header"> <header role="banner" class="site-header">
<a href="{{ "/" | relURL }}" class="wordmark-link">OPENBUREAU</a> <a href="{{ "/" | relURL }}" class="wordmark-link" aria-label="OPENBUREAU">
<span class="wordmark-sr">OPENBUREAU</span>
</a>
<nav class="site-nav" aria-label="Site"> <nav class="site-nav" aria-label="Site">
{{ partial "menu.html" (dict "menuID" "main" "page" .) }} {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
</nav> </nav>
layouts/_default/single.html
+11 -10
View File
@@ -23,6 +23,17 @@
{{- if .Date -}}<time class="byline-date" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "02.01.2006" }}</time>{{- end -}} {{- if .Date -}}<time class="byline-date" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "02.01.2006" }}</time>{{- end -}}
</p> </p>
{{ end }} {{ end }}
{{/* Reading time + last-modified — Republik-style, directly below byline */}}
{{ $showReadingTime := .Params.showreadingtime | default site.Params.showreadingtime | default true }}
{{ $showLastMod := .Params.showlastmod | default site.Params.showlastmod | default false }}
{{ $hasLastmod := and $showLastMod .Lastmod (ne (.Lastmod.Format "2006-01-02") (.Date.Format "2006-01-02")) }}
{{ if or (and $showReadingTime .ReadingTime) $hasLastmod }}
<p class="single-meta">
{{ if and $showReadingTime .ReadingTime }}<span class="reading-time">{{ .ReadingTime }} min Lesezeit</span>{{ end }}
{{ if $hasLastmod }}{{ if and $showReadingTime .ReadingTime }} · {{ end }}<span class="lastmod">Aktualisiert am {{ .Lastmod.Format "02.01.2006" }}</span>{{ end }}
</p>
{{ end }}
</header> </header>
{{/* Table of Contents */}} {{/* Table of Contents */}}
@@ -45,16 +56,6 @@
{{- range . -}}<li><a href="/tags/{{ . | urlize }}/">{{ . }}</a></li>{{- end -}} {{- range . -}}<li><a href="/tags/{{ . | urlize }}/">{{ . }}</a></li>{{- end -}}
</ul> </ul>
{{- end }} {{- end }}
{{ $showReadingTime := .Params.showreadingtime | default site.Params.showreadingtime | default true }}
{{ $showLastMod := .Params.showlastmod | default site.Params.showlastmod | default false }}
{{ $hasLastmod := and $showLastMod .Lastmod (ne (.Lastmod.Format "2006-01-02") (.Date.Format "2006-01-02")) }}
{{ if or (and $showReadingTime .ReadingTime) $hasLastmod }}
<div class="time">
{{ if and $showReadingTime .ReadingTime }}<span class="reading-time">{{ .ReadingTime }} min Lesezeit</span>{{ end }}
{{ if $hasLastmod }}{{ if and $showReadingTime .ReadingTime }} · {{ end }}<span class="lastmod">Zuletzt aktualisiert: {{ .Lastmod.Format "02.01.2006" }}</span>{{ end }}
</div>
{{ end }}
</article> </article>
{{ end }} {{ end }}
layouts/index.html
+14 -16
View File
@@ -16,19 +16,24 @@
{{ with .Parent }}{{ $section = path.Base .RelPermalink }}{{ end }} {{ with .Parent }}{{ $section = path.Base .RelPermalink }}{{ end }}
{{ $author := .Params.author | default site.Params.author.name }} {{ $author := .Params.author | default site.Params.author.name }}
{{ $cover := .Params.cover_image }} {{ $cover := .Params.cover_image }}
{{ $isHero := eq . (index $journal 0) }} {{/* Layout: explicit `layout:` in front matter, else derive:
{{ $imageMode := .Params.image_mode | default "wide" }} - cover_image present → image
<li class="journal-entry{{ if $isHero }} journal-entry--hero{{ end }}{{ if $cover }} journal-entry--has-image{{ end }}" - none → text */}}
{{ $layout := .Params.layout }}
{{ if not $layout }}
{{ $layout = cond (ne $cover nil) "image" "text" }}
{{ end }}
<li class="journal-entry journal-entry--layout-{{ $layout }}"
data-section="{{ $section }}" data-section="{{ $section }}"
{{ with .Params.color }}data-color="{{ . }}"{{ end }} {{ with .Params.color }}data-color="{{ . }}"{{ end }}>
{{ if and $cover (not $isHero) }}data-image="{{ $imageMode }}"{{ end }}>
<a class="journal-entry-link" href="{{ .RelPermalink }}"> <a class="journal-entry-link" href="{{ .RelPermalink }}">
{{ if and $isHero $cover }} {{ if and $cover (eq $layout "image") }}
<img class="journal-hero-image" src="{{ $cover | relURL }}" alt="" loading="eager" /> <img class="journal-bg-image" src="{{ $cover | relURL }}" alt="" loading="eager" />
{{ else if $cover }}
<img class="journal-card-image" src="{{ $cover | relURL }}" alt="" loading="lazy" />
{{ end }} {{ end }}
<div class="journal-entry-body"> <div class="journal-entry-body">
{{ if and $cover (eq $layout "icon") }}
<img class="journal-icon-image" src="{{ $cover | relURL }}" alt="" loading="lazy" />
{{ end }}
{{ with .Parent }} {{ with .Parent }}
<p class="journal-rubric"><span class="journal-section">{{ .Title }}</span></p> <p class="journal-rubric"><span class="journal-section">{{ .Title }}</span></p>
{{ end }} {{ end }}
@@ -43,13 +48,6 @@
</p> </p>
</div> </div>
</a> </a>
{{/* Tags rendered OUTSIDE the entry-link so the inner <a> tags
don't auto-close the outer link (invalid HTML: <a> in <a>). */}}
{{- with .Params.tags }}
<ul class="tag-pills journal-tags">
{{- range . -}}<li><a href="/tags/{{ . | urlize }}/">{{ . }}</a></li>{{- end -}}
</ul>
{{- end }}
</li> </li>
{{ end }} {{ end }}
</ol> </ol>
static/flarum.css
+188 -111
View File
@@ -1,4 +1,5 @@
/* 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 { :root {
--ob-bg: hsl(35, 14%, 96%); --ob-bg: hsl(35, 14%, 96%);
@@ -9,6 +10,10 @@
--ob-accent: #b54a2c; --ob-accent: #b54a2c;
--ob-accent-2: #d97a5a; --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-serif: 'Newsreader', Charter, 'Source Serif Pro', Georgia, serif;
--ob-sans: 'Inter', system-ui, -apple-system, sans-serif; --ob-sans: 'Inter', system-ui, -apple-system, sans-serif;
--ob-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --ob-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
@@ -32,7 +37,7 @@ p, li, div, span, td, blockquote, .fa, em, strong {
html, body, .App { html, body, .App {
background: var(--ob-bg) !important; background: var(--ob-bg) !important;
color: var(--ob-text) !important; color: var(--ob-text) !important;
font-size: 16.5px !important; font-size: 19px !important; /* matches new OPENBUREAU body */
line-height: 1.55 !important; line-height: 1.55 !important;
} }
@@ -41,7 +46,7 @@ textarea, .Composer textarea, .Composer-body, .Composer-body *,
.TextEditor, .TextEditor textarea, .ComposerBody-textarea, .TextEditor, .TextEditor textarea, .ComposerBody-textarea,
.RichEditor, .Post-body, .Post-body * { .RichEditor, .Post-body, .Post-body * {
font-family: var(--ob-serif) !important; font-family: var(--ob-serif) !important;
font-size: 1.02rem !important; font-size: 1.05rem !important;
line-height: 1.55 !important; line-height: 1.55 !important;
} }
@@ -49,7 +54,7 @@ input, select, .FormControl, .Search-input {
font-family: var(--ob-sans) !important; font-family: var(--ob-sans) !important;
} }
/* Headlines — display sans */ /* Headlines — serif (matches new OPENBUREAU article style) */
h1, h2, h3, h4, h5, h1, h2, h3, h4, h5,
.DiscussionListItem-title, .DiscussionListItem-title,
.DiscussionHero-title, .DiscussionHero-title,
@@ -57,9 +62,9 @@ h1, h2, h3, h4, h5,
.Post-header h3, .Post-header h3,
.SignUpModal-title, .SignUpModal-title,
.LogInModal-title { .LogInModal-title {
font-family: var(--ob-display) !important; font-family: var(--ob-serif) !important;
font-weight: 600 !important; font-weight: 700 !important;
letter-spacing: -0.01em !important; letter-spacing: -0.018em !important;
color: var(--ob-text) !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 { .App-header {
background: var(--ob-bg) !important; background: var(--ob-dark) !important;
border-bottom: 1px solid var(--ob-border) !important; border-bottom: none !important;
box-shadow: none !important; box-shadow: none !important;
color: var(--ob-text) !important; color: var(--ob-dark-text) !important;
} }
.App-header .Button, .App-header-primary { background: var(--ob-dark) !important; }
.App-header .item-search input { .App-header-secondary { background: var(--ob-dark) !important; }
color: var(--ob-text) !important;
background: transparent !important; /* Wordmark image (SVG logo from openbureau.ch) */
} .ob-wordmark-image {
.App-header .Header-title, display: block;
.App-header .Header-title a { height: 1.8rem;
font-family: var(--ob-display) !important; width: auto;
font-weight: 700 !important; filter: none;
font-size: 1.4rem !important; margin: 0;
letter-spacing: -0.01em !important;
color: var(--ob-text) !important;
text-transform: none !important;
} }
/* 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 { .Hero, .IndexPage .Hero {
background: var(--ob-bg-2) !important; background: var(--ob-bg) !important;
color: var(--ob-text) !important; color: var(--ob-text) !important;
border-bottom: 2px solid var(--ob-text) !important; border-bottom: none !important;
text-shadow: none !important; text-shadow: none !important;
padding: 2.5rem 1rem !important; padding: 2.5rem 1rem 1.5rem !important;
} }
.Hero-title { .Hero-title {
color: var(--ob-text) !important; color: var(--ob-text) !important;
font-size: 2rem !important; font-family: var(--ob-serif) !important;
font-weight: 700 !important; font-size: clamp(2rem, 4vw, 2.8rem) !important;
letter-spacing: -0.015em !important; font-weight: 800 !important;
letter-spacing: -0.026em !important;
line-height: 1.05 !important;
} }
.Hero-subtitle { .Hero-subtitle {
color: var(--ob-muted) !important; color: var(--ob-muted) !important;
font-style: italic;
font-family: var(--ob-serif) !important; font-family: var(--ob-serif) !important;
font-size: 1.1rem !important; font-style: normal !important;
margin-top: 0.4rem !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 { .DiscussionHero {
background: var(--ob-bg-2) !important; background: var(--ob-bg) !important;
border-bottom: 2px solid var(--ob-text) !important; border-bottom: none !important;
box-shadow: none !important; box-shadow: none !important;
padding: 1.8rem 1rem !important; padding: 2rem 1rem 1.5rem !important;
} }
.DiscussionHero-title { .DiscussionHero-title {
color: var(--ob-text) !important; color: var(--ob-text) !important;
font-size: 1.8rem !important; font-family: var(--ob-serif) !important;
font-weight: 700 !important; font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
letter-spacing: -0.015em !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 .TagsLabel,
.DiscussionHero .TagLabel { .DiscussionHero .TagLabel {
display: inline-block; display: inline-block;
background: var(--ob-bg) !important; background: color-mix(in oklab, var(--ob-accent) 14%, transparent) !important;
border: 1px solid var(--ob-border) !important; border: none !important;
color: var(--ob-accent) !important; color: var(--ob-text) !important;
text-transform: uppercase; text-transform: lowercase !important;
font-family: var(--ob-sans) !important; font-family: var(--ob-display) !important;
font-size: 0.72rem !important; font-size: 0.78rem !important;
font-weight: 600 !important; font-weight: 500 !important;
letter-spacing: 0.06em !important; letter-spacing: 0.02em !important;
padding: 0.2rem 0.55rem !important; padding: 0.3rem 0.85rem !important;
border-radius: 0 !important; border-radius: 999px !important;
margin-bottom: 0.6rem !important; margin-bottom: 0.8rem !important;
} }
/* ------------------------------------------------------------------------ /* ------------------------------------------------------------------------
@@ -175,35 +231,55 @@ h1, h2, h3, h4, h5,
box-shadow: none !important; box-shadow: none !important;
} }
/* Discussion list items — like OPENBUREAU journal cards: clean separators */
.DiscussionListItem { .DiscussionListItem {
background: transparent !important; background: transparent !important;
border-bottom: 1px solid var(--ob-border) !important; border-top: 1px solid var(--ob-border) !important;
padding: 1rem 0.25rem !important; border-bottom: none !important;
padding: 1.4rem 0.25rem !important;
margin: 0 !important; margin: 0 !important;
} }
.DiscussionListItem:last-child { border-bottom: 1px solid var(--ob-border) !important; }
.DiscussionListItem:hover { background: var(--ob-bg-2) !important; } .DiscussionListItem:hover { background: var(--ob-bg-2) !important; }
.DiscussionListItem-title { .DiscussionListItem-title {
font-size: 1.15rem !important; font-family: var(--ob-serif) !important;
line-height: 1.25 !important; font-size: 1.4rem !important;
margin-bottom: 0.3rem !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 { color: var(--ob-text) !important; }
.DiscussionListItem-title a:hover { color: var(--ob-accent) !important; } .DiscussionListItem-title a:hover { color: var(--ob-accent) !important; }
.DiscussionListItem-info { .DiscussionListItem-info {
color: var(--ob-muted) !important; color: var(--ob-muted) !important;
font-size: 0.85rem !important; font-family: var(--ob-sans) !important;
font-size: 0.9rem !important;
} }
.DiscussionListItem-count { .DiscussionListItem-count {
background: transparent !important; background: color-mix(in oklab, var(--ob-accent) 14%, transparent) !important;
border: 1px solid var(--ob-border) !important; border: none !important;
border-radius: 0 !important; border-radius: 999px !important;
color: var(--ob-muted) !important; color: var(--ob-text) !important;
padding: 0.15rem 0.4rem !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 — squared, lightly desaturated, full color on hover */
.Avatar { .Avatar {
border-radius: 0 !important; border-radius: 0 !important;
@@ -215,61 +291,67 @@ h1, h2, h3, h4, h5,
.Post:hover .Avatar { filter: grayscale(0%) contrast(1); } .Post:hover .Avatar { filter: grayscale(0%) contrast(1); }
/* ------------------------------------------------------------------------ /* ------------------------------------------------------------------------
Tags Tags — pills (matches OPENBUREAU's tag pills)
------------------------------------------------------------------------ */ ------------------------------------------------------------------------ */
.TagsLabel { .TagsLabel {
font-family: var(--ob-sans) !important; font-family: var(--ob-display) !important;
font-size: 0.78rem !important; font-size: 0.78rem !important;
text-transform: uppercase !important; font-weight: 500 !important;
letter-spacing: 0.04em !important; letter-spacing: 0.02em !important;
} }
.TagsLabel .tag { .TagsLabel .tag {
background: transparent !important; display: inline-block;
color: var(--ob-accent) !important; background: color-mix(in oklab, var(--ob-accent) 14%, transparent) !important;
border: 1px solid var(--ob-border) !important; color: var(--ob-text) !important;
border-radius: 0 !important; border: none !important;
padding: 0.1rem 0.45rem !important; border-radius: 999px !important;
padding: 0.3rem 0.85rem !important;
margin: 0 0.3rem 0.3rem 0 !important;
font-weight: 500 !important; font-weight: 500 !important;
text-transform: lowercase !important;
} }
.TagsLabel .tag:hover { .TagsLabel .tag:hover {
background: var(--ob-bg-2) !important; background: color-mix(in oklab, var(--ob-accent) 30%, transparent) !important;
border-color: var(--ob-accent) !important; border: none !important;
} }
.TagTile { .TagTile {
background: var(--ob-bg-2) !important; background: color-mix(in oklab, var(--ob-accent) 8%, transparent) !important;
border-radius: 0 !important; border-radius: 4px !important;
border: 1px solid var(--ob-border) !important; border: none !important;
color: var(--ob-text) !important; color: var(--ob-text) !important;
box-shadow: none !important; box-shadow: none !important;
} }
.TagTile-info h4 { color: var(--ob-text) !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-style: italic; font-family: var(--ob-serif) !important; } .TagTile-description { color: var(--ob-muted) !important; font-family: var(--ob-serif) !important; }
/* ------------------------------------------------------------------------ /* ------------------------------------------------------------------------
Buttons Buttons — softer, rounded, no heavy borders
------------------------------------------------------------------------ */ ------------------------------------------------------------------------ */
.Button { .Button {
border-radius: 0 !important; border-radius: 999px !important;
font-family: var(--ob-display) !important; font-family: var(--ob-display) !important;
font-weight: 500 !important; font-weight: 500 !important;
letter-spacing: 0.02em !important; letter-spacing: 0.01em !important;
background: transparent !important; background: color-mix(in oklab, var(--ob-text) 6%, transparent) !important;
color: var(--ob-text) !important; color: var(--ob-text) !important;
border: 1px solid var(--ob-border) !important; border: none !important;
box-shadow: none !important; box-shadow: none !important;
text-transform: 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 { .Button--primary {
background: var(--ob-accent) !important; background: var(--ob-accent) !important;
color: #fff !important; color: #fff !important;
border-color: var(--ob-accent) !important; border: none !important;
} }
.Button--primary:hover { .Button--primary:hover {
background: var(--ob-accent-2) !important; background: var(--ob-accent-2) !important;
border-color: var(--ob-accent-2) !important;
color: #fff !important; color: #fff !important;
} }
@@ -277,6 +359,7 @@ h1, h2, h3, h4, h5,
border: none !important; border: none !important;
background: transparent !important; background: transparent !important;
color: var(--ob-text) !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; } .notifications a { border-bottom: none !important; }
/* ------------------------------------------------------------------------ /* ------------------------------------------------------------------------
Discussion / Post view Discussion / Post view — Republik-style article header + clean post stream
------------------------------------------------------------------------ */ ------------------------------------------------------------------------ */
.DiscussionPage-discussion { .DiscussionPage-discussion {
background: transparent !important; 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; } .PostStream { background: transparent !important; }
.Post { .Post {
border-bottom: 1px solid var(--ob-border) !important; border-top: 1px solid var(--ob-border) !important;
padding: 1.5rem 0 !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-header,
.Post .PostUser, .Post .PostUser,
.Post .username { .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 .PostMeta time, .Post .PostMeta time,
.Post .Post-header 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; color: var(--ob-muted) !important;
font-weight: 400;
} }
.Post .username { color: var(--ob-text) !important; font-weight: 500 !important; }
.Post-body { .Post-body {
font-family: var(--ob-serif) !important; font-family: var(--ob-serif) !important;
font-size: 1.02rem !important; font-size: 1.1rem !important;
line-height: 1.55 !important; line-height: 1.55 !important;
color: var(--ob-text) !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 { .Post-body code, .Post-body pre {
font-family: var(--ob-mono) !important; font-family: var(--ob-mono) !important;
background: var(--ob-bg-2) !important; background: var(--ob-bg-2) !important;
border: 1px solid var(--ob-border) !important; border: none !important;
border-radius: 0 !important; border-radius: 4px !important;
padding: 0.1em 0.4em;
} }
.Post-body pre { padding: 0.8rem 1rem; }
/* ------------------------------------------------------------------------ /* ------------------------------------------------------------------------
Sidebar (left rail with categories/tags) 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; } .Badge { border-radius: 0 !important; font-family: var(--ob-mono) !important; }
.Pagination-link { 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; }
static/index.html
+114
View File
File diff suppressed because one or more lines are too long
static/logo/logo.original.svg
+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>
Side by Side

After

Width:  |  Height:  |  Size: 878 B

static/logo/logo.svg
+32
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB