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

republik-style redesign: dark masthead, hero block, palette, pills

Browse Source 
- Dark full-bleed masthead with serif wordmark and stacked nav
- Hero entry treatment: full-bleed image bg with gradient overlay
- Per-section color system (data-section) + per-post override (data-color)
- Japanese accent palette (ajisai, sakura, suna, ichigo, yuyake, sora,
  kusa, kori, amagumo, yuki) — set via `color:` in front matter
- Tag pills replace hashtag-style tags; rendered as sibling of card link
  to avoid invalid nested <a> elements
- Single article: clean Republik-style header, no section rubric,
  tags as pills at bottom
- Cover image support (`cover_image:` in front matter):
    - wide mode: full-card banner above text
    - icon mode: small thumbnail right of text with colored card bg
- Library subsection header redesigned with section-colored stripe
- Dates use Swiss DD.MM.YYYY display (ISO retained in datetime attr)
- Custom Tokyo metro photo as demo cover image
This commit is contained in:
karim
2026-05-24 14:32:13 +02:00
parent af2b8c5060
commit 7a5be9250a
12 changed files with 611 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/custom.css
+536 -106
View File
@@ -5,7 +5,7 @@
no 8bit cursor. no 8bit cursor.
======================================================================== */ ======================================================================== */
@import url('https://fonts.bunny.net/css?family=newsreader:400,400i,500,500i,600,600i|ibm-plex-mono:400,500|space-grotesk:400,500,700|inter:400,500,600'); @import url('https://fonts.bunny.net/css?family=newsreader:400,400i,500,500i,600,600i,700,700i,800,800i|ibm-plex-mono:400,500|space-grotesk:400,500,700|inter:400,500,600');
:root { :root {
/* Typography — editorial: /* Typography — editorial:
@@ -45,27 +45,63 @@
--accent: #b54a2c; --accent: #b54a2c;
--accent-soft: #d97a5a; --accent-soft: #d97a5a;
/* Republik-aligned tokens */
--color-dark-panel: #191919; /* masthead/footer/hero (Republik #191919) */
--color-dark-panel-text: #f0f0f0;
--color-dark-panel-muted: #a9a9a9;
/* Section accents — warm palette tuned to OPENBUREAU's terracotta brand.
Each library section reads on the warm-paper background. */
--section-color-software: #b54a2c; /* terracotta — brand primary */
--section-color-buerofuehrung: #D0913C; /* gold — warm/editorial */
--section-color-theorie: #7d2e16; /* deep rust — heavier weight */
/* Per-post color palette — Japanese accents, soft and editorial.
Set `color: <name>` in front matter (e.g. color: sakura). */
--palette-ajisai: #A39EC4; /* hydrangea (lavender) */
--palette-sakura: #C49EC4; /* cherry blossom (pink) */
--palette-suna: #C4C19E; /* sand (warm beige) */
--palette-ichigo: #C49EA0; /* strawberry (rose) */
--palette-yuyake: #CEB188; /* sunset (peach) */
--palette-sora: #9EC3C4; /* sky (teal) */
--palette-kusa: #9EC49F; /* grass (green) */
--palette-kori: #A5B4CB; /* ice (cool blue) */
--palette-amagumo: #4C4C4C; /* rain cloud (grey) */
--palette-yuki: #F0F0F0; /* snow (near white) */
color-scheme: light; color-scheme: light;
} }
/* ------------------------------------------------------------------------ /* ------------------------------------------------------------------------
Base body — serif by default (editorial) Base body — serif editorial, 3-col grid so header/footer can full-bleed
while content stays boxed
------------------------------------------------------------------------ */ ------------------------------------------------------------------------ */
body { body {
font-family: var(--font-family-serif); font-family: var(--font-family-serif);
font-size: var(--font-size-base); font-size: var(--font-size-base);
line-height: 1.55; line-height: 1.55;
padding: var(--spacing-sm) 1.75rem var(--spacing-xl); padding: 0 0 var(--spacing-xl);
margin: 0;
gap: var(--spacing-sm); gap: var(--spacing-sm);
display: grid; display: grid;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
grid-template-columns: minmax(auto, var(--container-width)); /* Boxed content column = 72ch with 1.75rem gutters, side columns absorb the rest */
justify-content: center; grid-template-columns:
1fr
min(var(--container-width), 100% - 3.5rem)
1fr;
} }
/* Default: every direct body child sits in the content column */
body > * { grid-column: 2; }
/* Opt-in: full-bleed children break out edge-to-edge */
body > .full-bleed,
body > header.site-header,
body > footer { grid-column: 1 / -1; }
p { margin: var(--spacing-sm) 0; } p { margin: var(--spacing-sm) 0; }
h1, h2, h3, h4, h5 { font-family: var(--font-family-display); font-weight: 600; } /* Republik-style: serif headlines as the visual anchor, not sans display */
h1, h2, h3, h4, h5 { font-family: var(--font-family-serif); font-weight: 600; letter-spacing: -0.015em; }
/* Disable shibui's nested h2/h3/h4 counters everywhere on this site */ /* Disable shibui's nested h2/h3/h4 counters everywhere on this site */
h2::before, h3::before, h4::before, h5::before { content: none !important; } h2::before, h3::before, h4::before, h5::before { content: none !important; }
@@ -85,18 +121,33 @@ a:hover {
} }
/* ------------------------------------------------------------------------ /* ------------------------------------------------------------------------
Site header — strong wordmark, not breadcrumb-first Site header — black masthead, Republik-style serif wordmark
Full-bleed bar with content-column-aligned inner layout
------------------------------------------------------------------------ */ ------------------------------------------------------------------------ */
/* 2-column header: wordmark left edge of content | nav right edge of content.
Center-aligned vertically so wordmark and nav read as one masthead line. */
.site-header { .site-header {
background: var(--color-dark-panel);
color: var(--color-dark-panel-text);
padding: 0.9rem 0;
border-bottom: none;
margin-bottom: var(--spacing-md);
/* inner 3-col grid matches body so wordmark/nav align with content column */
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns:
1fr
min(var(--container-width), 100% - 3.5rem)
1fr;
align-items: center; align-items: center;
column-gap: 2rem;
row-gap: 0.6rem; row-gap: 0.6rem;
padding-bottom: var(--spacing-sm); }
border-bottom: 1px solid var(--color-border); .site-header > * { grid-column: 2; }
.site-header .wordmark-link,
.site-header .site-nav {
grid-column: 2;
}
/* Inner row: wordmark center, nav under it (closer to Republik's stacked masthead).
To get wordmark + nav as one row instead, change to grid-template-columns: auto 1fr. */
.site-header {
/* override: stack wordmark above nav, both within content column */
} }
.wordmark-link { .wordmark-link {
@@ -104,35 +155,20 @@ a:hover {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: inline-block; display: inline-block;
grid-column: 1; justify-self: center;
justify-self: start; /* Republik-style: serif wordmark, all caps, white on black */
font-family: var(--font-family-display); font-family: var(--font-family-serif);
font-weight: 700; font-weight: 700;
font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-size: clamp(1.5rem, 3vw, 2rem);
letter-spacing: -0.01em; letter-spacing: 0.02em;
line-height: 1; line-height: 1;
color: var(--color-text-primary); color: #fff;
} }
.wordmark-link:hover, .wordmark-link:hover,
.wordmark-link:focus { color: var(--color-text-primary); border: none; } .wordmark-link:focus { color: #fff; border: none; opacity: 0.85; }
.site-header .site-nav { .site-header .site-nav {
grid-column: 2; justify-self: center;
justify-self: end;
}
/* Mobile: stack */
@media (max-width: 720px) {
.site-header {
grid-template-columns: 1fr;
align-items: start;
row-gap: 0.4rem;
}
.wordmark-link,
.site-header .site-nav {
grid-column: 1;
justify-self: start;
}
} }
.wordmark-link:focus-visible { outline: 2px dotted var(--color-text-muted); outline-offset: 4px; } .wordmark-link:focus-visible { outline: 2px dotted var(--color-text-muted); outline-offset: 4px; }
@@ -151,26 +187,34 @@ a:hover {
.wordmark-tagline { text-align: left; max-width: 38ch; } .wordmark-tagline { text-align: left; max-width: 38ch; }
} }
/* Site nav — horizontal, lowercase-strong, mono */ /* Site nav — under wordmark, white on black masthead.
Keeps the original display font (Space Grotesk) — only colour changes. */
.site-nav nav { .site-nav nav {
margin: 0; margin: 0;
} }
.site-nav ul { .site-nav ul {
list-style: none; list-style: none;
margin-left: 0; margin: 0;
padding: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.25rem 1.4rem; justify-content: center;
gap: 0.25rem 1.6rem;
font-family: var(--font-family-display); font-family: var(--font-family-display);
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
.site-nav li { margin: 0; } .site-nav li { margin: 0; }
.site-nav a { border: none; } .site-nav a {
border: none;
color: #d4d4d4;
}
.site-nav a:hover { color: #fff; }
.site-nav a.active, .site-nav a.active,
.site-nav a.ancestor { .site-nav a.ancestor {
color: var(--accent); color: #fff;
font-weight: 600;
} }
/* Breadcrumb (only on non-home pages) */ /* Breadcrumb (only on non-home pages) */
@@ -226,22 +270,69 @@ a:hover {
.journal-entry { .journal-entry {
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
padding: 1rem 0 1.1rem; padding: 1.6rem 0 1.7rem;
} }
.journal-entry:last-child { border-bottom: 1px solid var(--color-border); } .journal-entry:last-child { border-bottom: 1px solid var(--color-border); }
/* Grid with explicit row-gap: bulletproof against margin/line-height inheritance */ /* Card link: image (optional) + body block */
.journal-entry-link { .journal-entry-link,
display: grid; .journal-entry-link:hover,
grid-auto-flow: row; .journal-entry-link:focus {
row-gap: 0.45rem; display: block;
border: none; border: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: inherit;
text-decoration: none;
} }
.journal-entry-link > * { margin: 0; } .journal-entry-link:hover .journal-title { color: var(--section-color, var(--accent)); }
.journal-entry-link:hover .journal-title { color: var(--accent); }
.journal-entry-body {
display: grid;
grid-auto-flow: row;
row-gap: 0.7rem;
}
.journal-entry-body > * { margin: 0; }
/* Center non-hero entries' content (excluding icon-mode which has horizontal layout) */
.journal-entry:not(.journal-entry--hero):not([data-image="icon"]) .journal-entry-body {
justify-items: center;
text-align: center;
}
.journal-entry:not(.journal-entry--hero):not([data-image="icon"]) .journal-entry-body > * {
max-width: 55ch;
}
.journal-entry:not(.journal-entry--hero):not([data-image="icon"]) > .tag-pills {
text-align: center;
}
/* Rubric (section label, own line above headline) — Republik pattern */
.journal-rubric {
margin: 0;
line-height: 1;
}
/* Byline: single smooth serif line, "Von Author, DD.MM.YYYY" — Republik-style */
.journal-byline {
font-family: var(--font-family-serif);
font-size: 1rem;
font-style: italic;
line-height: 1.4;
color: var(--color-text-muted);
margin: 0;
white-space: normal;
}
.journal-byline .journal-author {
color: var(--color-text-primary);
font-style: normal;
font-weight: 500;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.journal-byline .journal-date { font-variant-numeric: tabular-nums; font-style: normal; }
/* Legacy .journal-meta retained for backwards-compat if any markup references it */
.journal-meta { .journal-meta {
font-family: var(--font-family-mono); font-family: var(--font-family-mono);
font-size: var(--font-size-small); font-size: var(--font-size-small);
@@ -251,21 +342,208 @@ a:hover {
gap: 0.8rem; gap: 0.8rem;
align-items: baseline; align-items: baseline;
} }
.journal-section { color: var(--accent); font-weight: 500; } .journal-section {
.journal-date { font-variant-numeric: tabular-nums; } display: inline-block;
.journal-author { color: var(--color-text-primary); font-weight: 500; } background: color-mix(in oklab, var(--section-color, var(--accent)) 35%, transparent);
.journal-author::before { content: "von "; color: var(--color-text-muted); font-weight: 400; } color: var(--color-text-primary);
font-family: var(--font-family-display);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.78rem;
padding: 0.2rem 0.6rem;
border-radius: 2px;
line-height: 1.35;
}
/* Hero section label sits on its own line above the headline */
.journal-entry--hero .journal-section {
font-size: 0.9rem;
letter-spacing: 0.12em;
}
.journal-author::before { content: "Von "; color: var(--color-text-muted); font-weight: 400; font-style: italic; }
.journal-entry--hero .journal-author::before { color: var(--color-dark-panel-muted); }
.journal-title { .journal-title {
font-family: var(--font-family-display); font-family: var(--font-family-serif);
font-size: 1.2rem; font-size: 1.65rem;
font-weight: 600; font-weight: 700;
letter-spacing: -0.012em; letter-spacing: -0.02em;
line-height: 1.2; line-height: 1.2;
color: var(--color-text-primary); color: var(--color-text-primary);
transition: color 0.15s ease; transition: color 0.15s ease;
} }
/* Section-color mapping — sets --section-color per entry so meta label
and hero top-border pick up the right accent. */
[data-section="software"] { --section-color: var(--section-color-software); }
[data-section="buerofuehrung"] { --section-color: var(--section-color-buerofuehrung); }
[data-section="theorie"] { --section-color: var(--section-color-theorie); }
/* Per-post color override (front matter `color: <name>`) — wins over section */
[data-color="ajisai"] { --section-color: var(--palette-ajisai); }
[data-color="sakura"] { --section-color: var(--palette-sakura); }
[data-color="suna"] { --section-color: var(--palette-suna); }
[data-color="ichigo"] { --section-color: var(--palette-ichigo); }
[data-color="yuyake"] { --section-color: var(--palette-yuyake); }
[data-color="sora"] { --section-color: var(--palette-sora); }
[data-color="kusa"] { --section-color: var(--palette-kusa); }
[data-color="kori"] { --section-color: var(--palette-kori); }
[data-color="amagumo"] { --section-color: var(--palette-amagumo); }
[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. */
/* Hero entry — Republik pattern.
Without cover_image: warm terracotta panel, centered text on it.
With cover_image: image fills the hero as background, text sits
at the bottom on a dark gradient that fades into the terracotta. */
.journal-entry--hero {
border: none;
background: #3a1a0d;
color: var(--color-dark-panel-text);
padding: 0;
margin: 0 calc(50% - 50vw) var(--spacing-lg);
border-top: 10px solid var(--section-color, var(--accent));
}
.journal-entry--hero:last-child { border-bottom: none; }
.journal-entry--hero .journal-entry-link {
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
overflow: hidden;
color: inherit;
min-height: auto;
}
/* When a hero image is present, give the link a viewport-anchored height */
.journal-entry--hero:has(.journal-hero-image) .journal-entry-link {
min-height: 72vh;
}
.journal-hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
margin: 0;
filter: none;
}
.journal-hero-image:hover { filter: none; }
.journal-entry--hero .journal-entry-body {
position: relative;
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;
margin: 0;
}
.journal-entry--hero .journal-summary { max-width: 38ch; }
/* ------------------------------------------------------------------------
Non-hero card with cover image — two presentation modes:
1) default (wide): Republik-style — image as full-card wide banner above body.
2) icon mode: small square/portrait thumbnail next to the body text,
with the card background filled in --section-color (when set).
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;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
margin: 0 0 1rem;
filter: grayscale(40%);
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;
}
@media (max-width: 540px) {
.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 { .journal-summary {
font-family: var(--font-family-serif); font-family: var(--font-family-serif);
font-size: var(--font-size-base); font-size: var(--font-size-base);
@@ -274,18 +552,32 @@ a:hover {
max-width: 60ch; max-width: 60ch;
} }
.journal-tags { .journal-tags { /* now extends .tag-pills — base styles come from there */ }
list-style: none;
display: flex; /* Hero tags — sit inside the dark hero block, below the link, centered */
flex-wrap: wrap; .journal-entry--hero > .tag-pills {
gap: 0.6rem; margin: 0 auto;
font-family: var(--font-family-sans); padding: 0 1.75rem 2.2rem;
font-size: 0.78rem; max-width: var(--container-width);
line-height: 1.2; text-align: center;
color: var(--color-text-muted); }
padding: 0; .journal-entry--hero > .tag-pills a {
background: color-mix(in oklab, var(--section-color, var(--accent-soft)) 30%, transparent);
color: var(--color-dark-panel-text);
}
.journal-entry--hero > .tag-pills a:hover {
background: color-mix(in oklab, var(--section-color, var(--accent-soft)) 50%, transparent);
}
/* Non-hero tags — sit just below the body of the card */
.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;
} }
.journal-tags li { margin: 0; }
.more { .more {
margin-top: var(--spacing-md); margin-top: var(--spacing-md);
@@ -304,12 +596,12 @@ a:hover {
} }
.atlas-section h2, .atlas-section h2,
.atlas-tags h2 { .atlas-tags h2 {
font-family: var(--font-family-display); font-family: var(--font-family-serif);
font-size: 1.15rem; font-size: 1.4rem;
font-weight: 600; font-weight: 700;
letter-spacing: -0.005em; letter-spacing: -0.018em;
color: var(--color-text-primary); color: var(--color-text-primary);
border-bottom: 1px solid var(--color-border); border-bottom: 3px solid var(--section-color, var(--accent));
padding-bottom: var(--spacing-xs); padding-bottom: var(--spacing-xs);
margin-bottom: var(--spacing-sm); margin-bottom: var(--spacing-sm);
} }
@@ -348,6 +640,36 @@ a:hover {
/* ------------------------------------------------------------------------ /* ------------------------------------------------------------------------
Library subsection (chronological list) Library subsection (chronological list)
------------------------------------------------------------------------ */ ------------------------------------------------------------------------ */
.section-header {
border-top: 8px solid var(--section-color, var(--accent));
padding-top: var(--spacing-sm);
margin-top: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.section-rubric {
font-family: var(--font-family-display);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.85rem;
color: var(--section-color, var(--accent));
margin: 0 0 0.4rem;
}
.section-title {
font-family: var(--font-family-serif);
font-size: clamp(1.9rem, 4vw, 2.6rem);
font-weight: 800;
letter-spacing: -0.026em;
line-height: 1.05;
margin: 0 0 0.4rem;
}
.section-description {
font-style: italic;
color: var(--color-text-muted);
margin: 0 0 var(--spacing-sm);
max-width: 60ch;
}
.time-list ul { .time-list ul {
list-style: none; list-style: none;
margin-left: 0; margin-left: 0;
@@ -365,9 +687,10 @@ a:hover {
} }
.list-title { .list-title {
margin: 0; margin: 0;
font-family: var(--font-family-display); font-family: var(--font-family-serif);
font-size: 1.15rem; font-size: 1.25rem;
font-weight: 500; font-weight: 600;
letter-spacing: -0.01em;
flex: 1; flex: 1;
} }
.list-title a { border: none; } .list-title a { border: none; }
@@ -398,9 +721,11 @@ a:hover {
} }
.software-item:last-child { border-bottom: 1px solid var(--color-border); padding-bottom: var(--spacing-md); } .software-item:last-child { border-bottom: 1px solid var(--color-border); padding-bottom: var(--spacing-md); }
.software-item h2 { .software-item h2 {
font-family: var(--font-family-display); font-family: var(--font-family-serif);
font-size: 1.8rem; font-size: 2rem;
letter-spacing: -0.015em; font-weight: 800;
letter-spacing: -0.024em;
line-height: 1.08;
margin: 0 0 0.4rem; margin: 0 0 0.4rem;
} }
.software-item h2 a { border: none; } .software-item h2 a { border: none; }
@@ -428,14 +753,70 @@ a:hover {
------------------------------------------------------------------------ */ ------------------------------------------------------------------------ */
.single { margin-top: var(--spacing-md); } .single { margin-top: var(--spacing-md); }
.single-header { margin-bottom: var(--spacing-md); } .single-header { margin-bottom: var(--spacing-md); }
.single-header h1 { /* Single article — full-bleed cover image directly under the masthead.
font-family: var(--font-family-display); width:100vw breaks the boxed column horizontally; negative top margin
font-size: clamp(1.2rem, 2.4vw, 1.5rem); cancels the body grid gap + header margin so the image sits flush. */
font-weight: 700; .single-hero-image {
letter-spacing: -0.01em; display: block;
line-height: 1.15; width: 100vw;
margin: 0 0 var(--spacing-xs); max-width: 100vw;
height: auto;
max-height: 60vh;
object-fit: cover;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: calc(-1 * (var(--spacing-md) + var(--spacing-sm)));
margin-bottom: var(--spacing-md);
filter: none;
} }
.single-hero-image:hover { filter: none; }
.single-header {
position: relative;
margin-top: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.single-header h1 {
font-family: var(--font-family-serif);
font-size: clamp(2.1rem, 4.6vw, 3rem);
font-weight: 800;
letter-spacing: -0.028em;
line-height: 1.05;
margin: 0 0 var(--spacing-sm);
}
.single-summary {
font-family: var(--font-family-serif);
font-style: normal;
font-size: 1.25rem;
line-height: 1.4;
color: var(--color-text-primary);
margin: 0 0 var(--spacing-sm);
max-width: 55ch;
}
.single-byline {
font-family: var(--font-family-serif);
font-style: italic;
font-size: 1rem;
line-height: 1.4;
color: var(--color-text-muted);
margin: 0;
}
.single-byline .byline-author {
color: var(--color-text-primary);
font-style: normal;
font-weight: 500;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.single-byline .byline-author::before {
content: "Von ";
color: var(--color-text-muted);
font-style: italic;
font-weight: 400;
text-decoration: none;
}
.single-byline .byline-date { font-style: normal; font-variant-numeric: tabular-nums; }
.single-byline { .single-byline {
font-family: var(--font-family-mono); font-family: var(--font-family-mono);
font-size: 0.85rem; font-size: 0.85rem;
@@ -458,17 +839,20 @@ a:hover {
max-width: 55ch; max-width: 55ch;
} }
.single-content h2 { .single-content h2 {
font-family: var(--font-family-display); font-family: var(--font-family-serif);
font-size: 1.15rem; font-size: 1.45rem;
font-weight: 600; font-weight: 600;
margin-top: var(--spacing-md); letter-spacing: -0.015em;
line-height: 1.2;
margin-top: var(--spacing-lg);
margin-bottom: var(--spacing-xs); margin-bottom: var(--spacing-xs);
} }
.single-content h3 { .single-content h3 {
font-family: var(--font-family-display); font-family: var(--font-family-serif);
font-size: 1rem; font-size: 1.2rem;
font-weight: 600; font-weight: 600;
margin-top: var(--spacing-sm); letter-spacing: -0.01em;
margin-top: var(--spacing-md);
margin-bottom: var(--spacing-xs); margin-bottom: var(--spacing-xs);
} }
.single-content blockquote { .single-content blockquote {
@@ -503,11 +887,51 @@ a:hover {
.toc ul, .toc ol { margin: 0 0 0 1.2rem; padding: 0; } .toc ul, .toc ol { margin: 0 0 0 1.2rem; padding: 0; }
.toc li { margin: 0.15rem 0; } .toc li { margin: 0.15rem 0; }
/* Tag pills — small section-tinted chips at the foot of the article.
No hash symbol, lowercase, rounded; subtle on the warm paper. */
.tag-pills {
list-style: none;
margin: var(--spacing-sm) 0 0;
margin-left: 0;
padding: 0;
line-height: 1;
}
.tag-pills li {
display: inline-block;
margin: 0 0.3rem 0.3rem 0;
padding: 0;
list-style: none;
vertical-align: middle;
}
.tag-pills a {
display: inline-block;
padding: 0.35rem 0.85rem;
line-height: 1.3;
font-family: var(--font-family-display);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: lowercase;
background: color-mix(in oklab, var(--section-color, var(--accent)) 14%, transparent);
color: var(--color-text-primary);
border: none;
border-radius: 999px;
margin: 0;
white-space: nowrap;
text-decoration: none;
vertical-align: middle;
transition: background-color 0.15s ease;
}
.tag-pills a:hover {
background: color-mix(in oklab, var(--section-color, var(--accent)) 30%, transparent);
border: none;
}
.time { .time {
font-family: var(--font-family-mono); font-family: var(--font-family-mono);
font-size: var(--font-size-small); font-size: var(--font-size-small);
color: var(--color-text-muted); color: var(--color-text-muted);
margin-top: var(--spacing-lg); margin-top: var(--spacing-md);
padding-top: var(--spacing-sm); padding-top: var(--spacing-sm);
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
} }
@@ -546,18 +970,24 @@ a:hover {
.page-foot-nav li.current a { color: var(--color-text-primary); } .page-foot-nav li.current a { color: var(--color-text-primary); }
/* ------------------------------------------------------------------------ /* ------------------------------------------------------------------------
Footer — mirrors the header rhythm: 2-col grid, baseline-aligned, Footer — dark full-bleed bar mirroring the masthead
wordmark left, nav right; below: tagline left, credit right.
Text left-aligned everywhere (no centering).
------------------------------------------------------------------------ */ ------------------------------------------------------------------------ */
footer { footer {
background: var(--color-dark-panel);
color: var(--color-dark-panel-muted);
margin-top: var(--spacing-xl); margin-top: var(--spacing-xl);
padding-top: var(--spacing-md); padding: var(--spacing-lg) 0;
border-top: 1px solid var(--color-border); border-top: none;
color: var(--color-text-muted); /* inner grid aligns with content column, same trick as header */
display: grid;
grid-template-columns:
1fr
min(var(--container-width), 100% - 3.5rem)
1fr;
} }
footer a { color: var(--color-text-muted); border: none; } footer > * { grid-column: 2; }
footer a:hover { color: var(--accent); } footer a { color: #d4d4d4; border: none; }
footer a:hover { color: var(--accent-soft); }
footer p { text-align: left; margin: 0; } footer p { text-align: left; margin: 0; }
.footer-grid { .footer-grid {
@@ -570,11 +1000,11 @@ footer p { text-align: left; margin: 0; }
.footer-mark { .footer-mark {
grid-column: 1; grid-column: 1;
font-family: var(--font-family-display); font-family: var(--font-family-serif);
font-weight: 600; font-weight: 700;
font-size: 0.95rem; font-size: 1.05rem;
letter-spacing: 0.01em; letter-spacing: 0.02em;
color: var(--color-text-primary); color: #fff;
} }
.footer-nav { .footer-nav {
content/library/buerofuehrung/warum-offen.md
+1
View File
@@ -3,6 +3,7 @@ title: "Warum ein offenes Büro"
date: 2026-05-22 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
--- ---
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. 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.
content/library/software/dossier.md
+3
View File
@@ -5,6 +5,9 @@ weight: 10
tags: ["software", "eigene-werkzeuge"] tags: ["software", "eigene-werkzeuge"]
summary: "Projektorganisation für ein Architekturbüro — von der Anfrage zur Übergabe." summary: "Projektorganisation für ein Architekturbüro — von der Anfrage zur Übergabe."
external: "https://dossier.gabrielevarano.ch" external: "https://dossier.gabrielevarano.ch"
color: kori
cover_image: /images/tokyo-metro.jpg
image_mode: icon
--- ---
**DOSSIER** ist die Projektverwaltung von OPENBUREAU. **DOSSIER** ist die Projektverwaltung von OPENBUREAU.
content/library/software/eigene-werkzeuge.md
+1
View File
@@ -3,6 +3,7 @@ title: "Warum wir eigene Werkzeuge bauen"
date: 2026-05-21 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
--- ---
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. 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.
content/library/software/rapport.md
+1
View File
@@ -5,6 +5,7 @@ weight: 20
tags: ["software", "eigene-werkzeuge"] 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
--- ---
**RAPPORT** erfasst Stunden, Wege und Aufwand. **RAPPORT** erfasst Stunden, Wege und Aufwand.
content/library/software/stack.md
+1
View File
@@ -4,6 +4,7 @@ date: 2026-05-23
weight: 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
--- ---
Diese Liste wächst. Sie ist kein Inventar, sondern eine **Position**: jedes Werkzeug steht für eine Entscheidung über die Arbeitsweise des Büros. Diese Liste wächst. Sie ist kein Inventar, sondern eine **Position**: jedes Werkzeug steht für eine Entscheidung über die Arbeitsweise des Büros.
content/library/theorie/typologie-als-werkzeug.md
+1
View File
@@ -3,6 +3,7 @@ title: "Typologie als Werkzeug"
date: 2026-05-20 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
--- ---
Typologie wird oft als Inhaltsverzeichnis missverstanden: eine Liste von Grundrissen, sortiert nach Funktion. Diese Lesart ist bequem und falsch. Typologie wird oft als Inhaltsverzeichnis missverstanden: eine Liste von Grundrissen, sortiert nach Funktion. Diese Lesart ist bequem und falsch.
layouts/_default/single.html
+24 -9
View File
@@ -1,20 +1,28 @@
{{ define "main" }} {{ define "main" }}
{{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }} {{ $section := "" }}
{{ with .Parent }}{{ $section = path.Base .RelPermalink }}{{ end }}
{{ $cover := .Params.cover_image }}
{{ $color := .Params.color }}
<article class="single"> {{/* Cover image first (full-bleed, directly under the masthead) */}}
{{ if $cover }}
<img class="single-hero-image" src="{{ $cover | relURL }}" alt="" loading="eager" />
{{ end }}
<article class="single" data-section="{{ $section }}"{{ with $color }} data-color="{{ . }}"{{ end }}>
<header class="single-header"> <header class="single-header">
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
{{ with .Params.summary }}
<p class="single-summary">{{ . }}</p>
{{ end }}
{{ $author := .Params.author | default site.Params.author.name }} {{ $author := .Params.author | default site.Params.author.name }}
{{ if or $author .Date }} {{ if or $author .Date }}
<p class="single-byline"> <p class="single-byline">
{{ with $author }}<span class="byline-author">von {{ . }}</span>{{ end }} {{- with $author -}}<span class="byline-author">{{ . }}</span>{{- end -}}
{{ if and $author .Date }} · {{ end }} {{- if and $author .Date -}}, {{ end -}}
{{ if .Date }}<time class="byline-date" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006-01-02" }}</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 }}
{{ with .Params.summary }}
<p class="single-summary text-muted">{{ . }}</p>
{{ end }}
</header> </header>
{{/* Table of Contents */}} {{/* Table of Contents */}}
@@ -31,13 +39,20 @@
{{ .Content }} {{ .Content }}
</div> </div>
{{/* Tags as small pills at the bottom — Republik-style, no hash symbol */}}
{{- with .Params.tags }}
<ul class="tag-pills" aria-label="Tags">
{{- range . -}}<li><a href="/tags/{{ . | urlize }}/">{{ . }}</a></li>{{- end -}}
</ul>
{{- end }}
{{ $showReadingTime := .Params.showreadingtime | default site.Params.showreadingtime | default true }} {{ $showReadingTime := .Params.showreadingtime | default site.Params.showreadingtime | default true }}
{{ $showLastMod := .Params.showlastmod | default site.Params.showlastmod | default false }} {{ $showLastMod := .Params.showlastmod | default site.Params.showlastmod | default false }}
{{ $hasLastmod := and $showLastMod .Lastmod (ne (.Lastmod.Format "2006-01-02") (.Date.Format "2006-01-02")) }} {{ $hasLastmod := and $showLastMod .Lastmod (ne (.Lastmod.Format "2006-01-02") (.Date.Format "2006-01-02")) }}
{{ if or (and $showReadingTime .ReadingTime) $hasLastmod }} {{ if or (and $showReadingTime .ReadingTime) $hasLastmod }}
<div class="time"> <div class="time">
{{ if and $showReadingTime .ReadingTime }}<span class="reading-time">{{ .ReadingTime }} min Lesezeit</span>{{ end }} {{ 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 "2006-01-02" }}</span>{{ end }} {{ if $hasLastmod }}{{ if and $showReadingTime .ReadingTime }} · {{ end }}<span class="lastmod">Zuletzt aktualisiert: {{ .Lastmod.Format "02.01.2006" }}</span>{{ end }}
</div> </div>
{{ end }} {{ end }}
</article> </article>
layouts/_partials/date.html
+1
View File
@@ -0,0 +1 @@
<time datetime="{{ . | time.Format "2006-01-02" }}">{{ . | time.Format "02.01.2006" }}</time>
layouts/index.html
+33 -15
View File
@@ -12,26 +12,44 @@
<ol class="journal-list"> <ol class="journal-list">
{{ range $journal }} {{ range $journal }}
<li class="journal-entry"> {{ $section := "" }}
{{ $author := .Params.author | default site.Params.author.name }} {{ with .Parent }}{{ $section = path.Base .RelPermalink }}{{ end }}
{{ $author := .Params.author | default site.Params.author.name }}
{{ $cover := .Params.cover_image }}
{{ $isHero := eq . (index $journal 0) }}
{{ $imageMode := .Params.image_mode | default "wide" }}
<li class="journal-entry{{ if $isHero }} journal-entry--hero{{ end }}{{ if $cover }} journal-entry--has-image{{ end }}"
data-section="{{ $section }}"
{{ 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 }}">
<div class="journal-meta"> {{ if and $isHero $cover }}
<img class="journal-hero-image" src="{{ $cover | relURL }}" alt="" loading="eager" />
{{ else if $cover }}
<img class="journal-card-image" src="{{ $cover | relURL }}" alt="" loading="lazy" />
{{ end }}
<div class="journal-entry-body">
{{ with .Parent }} {{ with .Parent }}
<span class="journal-section">{{ .Title }}</span> <p class="journal-rubric"><span class="journal-section">{{ .Title }}</span></p>
{{ end }} {{ end }}
<time class="journal-date" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006-01-02" }}</time> <h3 class="journal-title">{{ .LinkTitle }}</h3>
{{ with $author }}<span class="journal-author">{{ . }}</span>{{ end }} {{ with .Params.summary }}
<p class="journal-summary">{{ . }}</p>
{{ end }}
<p class="journal-byline">
{{- with $author -}}<span class="journal-author">{{ . }}</span>{{- end -}}
{{- if and $author .Date -}}, {{ end -}}
<time class="journal-date" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "02.01.2006" }}</time>
</p>
</div> </div>
<h3 class="journal-title">{{ .LinkTitle }}</h3>
{{ with .Params.summary }}
<p class="journal-summary">{{ . }}</p>
{{ end }}
{{ with .Params.tags }}
<ul class="journal-tags">
{{ range . }}<li>#{{ . }}</li>{{ end }}
</ul>
{{ end }}
</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>
layouts/library/list.html
+9 -2
View File
@@ -6,7 +6,8 @@
{{/* Library root: Atlas — gruppiert nach Untersection */}} {{/* Library root: Atlas — gruppiert nach Untersection */}}
<section class="atlas"> <section class="atlas">
{{ range .Sections.ByWeight }} {{ range .Sections.ByWeight }}
<article class="atlas-section"> {{ $section := path.Base .RelPermalink }}
<article class="atlas-section" data-section="{{ $section }}">
<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2> <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
{{ with .Params.description }}<p class="text-muted">{{ . }}</p>{{ end }} {{ with .Params.description }}<p class="text-muted">{{ . }}</p>{{ end }}
<ul class="atlas-list"> <ul class="atlas-list">
@@ -37,7 +38,13 @@
</section> </section>
{{ else }} {{ else }}
{{/* Library subsection: chronologisch */}} {{/* Library subsection: chronologisch */}}
<div class="time-list"> {{ $section := path.Base .RelPermalink }}
<header class="section-header" data-section="{{ $section }}">
<p class="section-rubric">Library</p>
<h1 class="section-title">{{ .Title }}</h1>
{{ with .Params.description }}<p class="section-description">{{ . }}</p>{{ end }}
</header>
<div class="time-list" data-section="{{ $section }}">
<ul> <ul>
{{ range .RegularPages.ByDate.Reverse }} {{ range .RegularPages.ByDate.Reverse }}
<li class="list-item"> <li class="list-item">
static/images/tokyo-metro.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB