diff --git a/assets/css/custom.css b/assets/css/custom.css index 33281b7..1868957 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -5,7 +5,7 @@ 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 { /* Typography — editorial: @@ -45,27 +45,63 @@ --accent: #b54a2c; --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: ` 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; } /* ------------------------------------------------------------------------ - Base body — serif by default (editorial) + Base body — serif editorial, 3-col grid so header/footer can full-bleed + while content stays boxed ------------------------------------------------------------------------ */ body { font-family: var(--font-family-serif); font-size: var(--font-size-base); 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); display: grid; grid-template-rows: auto 1fr auto; - grid-template-columns: minmax(auto, var(--container-width)); - justify-content: center; + /* Boxed content column = 72ch with 1.75rem gutters, side columns absorb the rest */ + 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; } -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 */ 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 { + 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; - grid-template-columns: auto 1fr; + grid-template-columns: + 1fr + min(var(--container-width), 100% - 3.5rem) + 1fr; align-items: center; - column-gap: 2rem; 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 { @@ -104,35 +155,20 @@ a:hover { margin: 0; padding: 0; display: inline-block; - grid-column: 1; - justify-self: start; - font-family: var(--font-family-display); + justify-self: center; + /* Republik-style: serif wordmark, all caps, white on black */ + font-family: var(--font-family-serif); font-weight: 700; - font-size: clamp(1.2rem, 2.4vw, 1.5rem); - letter-spacing: -0.01em; + font-size: clamp(1.5rem, 3vw, 2rem); + letter-spacing: 0.02em; line-height: 1; - color: var(--color-text-primary); + color: #fff; } .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 { - grid-column: 2; - 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; - } + justify-self: center; } .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; } } -/* 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 { margin: 0; } .site-nav ul { list-style: none; - margin-left: 0; + margin: 0; + padding: 0; display: flex; flex-wrap: wrap; - gap: 0.25rem 1.4rem; + justify-content: center; + gap: 0.25rem 1.6rem; font-family: var(--font-family-display); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em; } .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.ancestor { - color: var(--accent); + color: #fff; + font-weight: 600; } /* Breadcrumb (only on non-home pages) */ @@ -226,22 +270,69 @@ a:hover { .journal-entry { 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); } -/* Grid with explicit row-gap: bulletproof against margin/line-height inheritance */ -.journal-entry-link { - display: grid; - grid-auto-flow: row; - row-gap: 0.45rem; +/* Card link: image (optional) + body block */ +.journal-entry-link, +.journal-entry-link:hover, +.journal-entry-link:focus { + display: block; border: none; margin: 0; padding: 0; + color: inherit; + text-decoration: none; } -.journal-entry-link > * { margin: 0; } -.journal-entry-link:hover .journal-title { color: var(--accent); } +.journal-entry-link:hover .journal-title { color: var(--section-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 { font-family: var(--font-family-mono); font-size: var(--font-size-small); @@ -251,21 +342,208 @@ a:hover { gap: 0.8rem; align-items: baseline; } -.journal-section { color: var(--accent); font-weight: 500; } -.journal-date { font-variant-numeric: tabular-nums; } -.journal-author { color: var(--color-text-primary); font-weight: 500; } -.journal-author::before { content: "von "; color: var(--color-text-muted); font-weight: 400; } +.journal-section { + display: inline-block; + background: color-mix(in oklab, var(--section-color, var(--accent)) 35%, transparent); + 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 { - font-family: var(--font-family-display); - font-size: 1.2rem; - font-weight: 600; - letter-spacing: -0.012em; + font-family: var(--font-family-serif); + font-size: 1.65rem; + font-weight: 700; + letter-spacing: -0.02em; line-height: 1.2; color: var(--color-text-primary); 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: `) — 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
  • ). + ------------------------------------------------------------------------ */ + +/* 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 { font-family: var(--font-family-serif); font-size: var(--font-size-base); @@ -274,18 +552,32 @@ a:hover { max-width: 60ch; } -.journal-tags { - list-style: none; - display: flex; - flex-wrap: wrap; - gap: 0.6rem; - font-family: var(--font-family-sans); - font-size: 0.78rem; - line-height: 1.2; - color: var(--color-text-muted); - padding: 0; +.journal-tags { /* now extends .tag-pills — base styles come from there */ } + +/* Hero tags — sit inside the dark hero block, below the link, centered */ +.journal-entry--hero > .tag-pills { + margin: 0 auto; + padding: 0 1.75rem 2.2rem; + max-width: var(--container-width); + text-align: center; +} +.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 { margin-top: var(--spacing-md); @@ -304,12 +596,12 @@ a:hover { } .atlas-section h2, .atlas-tags h2 { - font-family: var(--font-family-display); - font-size: 1.15rem; - font-weight: 600; - letter-spacing: -0.005em; + font-family: var(--font-family-serif); + font-size: 1.4rem; + font-weight: 700; + letter-spacing: -0.018em; 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); margin-bottom: var(--spacing-sm); } @@ -348,6 +640,36 @@ a:hover { /* ------------------------------------------------------------------------ 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 { list-style: none; margin-left: 0; @@ -365,9 +687,10 @@ a:hover { } .list-title { margin: 0; - font-family: var(--font-family-display); - font-size: 1.15rem; - font-weight: 500; + font-family: var(--font-family-serif); + font-size: 1.25rem; + font-weight: 600; + letter-spacing: -0.01em; flex: 1; } .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 h2 { - font-family: var(--font-family-display); - font-size: 1.8rem; - letter-spacing: -0.015em; + font-family: var(--font-family-serif); + font-size: 2rem; + font-weight: 800; + letter-spacing: -0.024em; + line-height: 1.08; margin: 0 0 0.4rem; } .software-item h2 a { border: none; } @@ -428,14 +753,70 @@ a:hover { ------------------------------------------------------------------------ */ .single { margin-top: var(--spacing-md); } .single-header { margin-bottom: var(--spacing-md); } -.single-header h1 { - font-family: var(--font-family-display); - font-size: clamp(1.2rem, 2.4vw, 1.5rem); - font-weight: 700; - letter-spacing: -0.01em; - line-height: 1.15; - margin: 0 0 var(--spacing-xs); +/* Single article — full-bleed cover image directly under the masthead. + width:100vw breaks the boxed column horizontally; negative top margin + cancels the body grid gap + header margin so the image sits flush. */ +.single-hero-image { + display: block; + width: 100vw; + 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 { font-family: var(--font-family-mono); font-size: 0.85rem; @@ -458,17 +839,20 @@ a:hover { max-width: 55ch; } .single-content h2 { - font-family: var(--font-family-display); - font-size: 1.15rem; + font-family: var(--font-family-serif); + font-size: 1.45rem; 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); } .single-content h3 { - font-family: var(--font-family-display); - font-size: 1rem; + font-family: var(--font-family-serif); + font-size: 1.2rem; font-weight: 600; - margin-top: var(--spacing-sm); + letter-spacing: -0.01em; + margin-top: var(--spacing-md); margin-bottom: var(--spacing-xs); } .single-content blockquote { @@ -503,11 +887,51 @@ a:hover { .toc ul, .toc ol { margin: 0 0 0 1.2rem; padding: 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 { font-family: var(--font-family-mono); font-size: var(--font-size-small); color: var(--color-text-muted); - margin-top: var(--spacing-lg); + margin-top: var(--spacing-md); padding-top: var(--spacing-sm); border-top: 1px solid var(--color-border); } @@ -546,18 +970,24 @@ a:hover { .page-foot-nav li.current a { color: var(--color-text-primary); } /* ------------------------------------------------------------------------ - Footer — mirrors the header rhythm: 2-col grid, baseline-aligned, - wordmark left, nav right; below: tagline left, credit right. - Text left-aligned everywhere (no centering). + Footer — dark full-bleed bar mirroring the masthead ------------------------------------------------------------------------ */ footer { + background: var(--color-dark-panel); + color: var(--color-dark-panel-muted); margin-top: var(--spacing-xl); - padding-top: var(--spacing-md); - border-top: 1px solid var(--color-border); - color: var(--color-text-muted); + padding: var(--spacing-lg) 0; + border-top: none; + /* 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 a:hover { color: var(--accent); } +footer > * { grid-column: 2; } +footer a { color: #d4d4d4; border: none; } +footer a:hover { color: var(--accent-soft); } footer p { text-align: left; margin: 0; } .footer-grid { @@ -570,11 +1000,11 @@ footer p { text-align: left; margin: 0; } .footer-mark { grid-column: 1; - font-family: var(--font-family-display); - font-weight: 600; - font-size: 0.95rem; - letter-spacing: 0.01em; - color: var(--color-text-primary); + font-family: var(--font-family-serif); + font-weight: 700; + font-size: 1.05rem; + letter-spacing: 0.02em; + color: #fff; } .footer-nav { diff --git a/content/library/buerofuehrung/warum-offen.md b/content/library/buerofuehrung/warum-offen.md index c89a3c2..066d189 100644 --- a/content/library/buerofuehrung/warum-offen.md +++ b/content/library/buerofuehrung/warum-offen.md @@ -3,6 +3,7 @@ title: "Warum ein offenes Büro" date: 2026-05-22 tags: ["büroführung", "praxis", "open-source"] 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. diff --git a/content/library/software/dossier.md b/content/library/software/dossier.md index 1fdf53a..c691db4 100644 --- a/content/library/software/dossier.md +++ b/content/library/software/dossier.md @@ -5,6 +5,9 @@ weight: 10 tags: ["software", "eigene-werkzeuge"] summary: "Projektorganisation für ein Architekturbüro — von der Anfrage zur Übergabe." external: "https://dossier.gabrielevarano.ch" +color: kori +cover_image: /images/tokyo-metro.jpg +image_mode: icon --- **DOSSIER** ist die Projektverwaltung von OPENBUREAU. diff --git a/content/library/software/eigene-werkzeuge.md b/content/library/software/eigene-werkzeuge.md index f62969c..f00c5ed 100644 --- a/content/library/software/eigene-werkzeuge.md +++ b/content/library/software/eigene-werkzeuge.md @@ -3,6 +3,7 @@ title: "Warum wir eigene Werkzeuge bauen" date: 2026-05-21 tags: ["software", "praxis", "tools"] 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. diff --git a/content/library/software/rapport.md b/content/library/software/rapport.md index 2a68b58..ec2fe3a 100644 --- a/content/library/software/rapport.md +++ b/content/library/software/rapport.md @@ -5,6 +5,7 @@ weight: 20 tags: ["software", "eigene-werkzeuge"] summary: "Zeit- und Aufwandserfassung für ein Architekturbüro." external: "https://rapport.gabrielevarano.ch" +color: kusa --- **RAPPORT** erfasst Stunden, Wege und Aufwand. diff --git a/content/library/software/stack.md b/content/library/software/stack.md index 02db581..8c69298 100644 --- a/content/library/software/stack.md +++ b/content/library/software/stack.md @@ -4,6 +4,7 @@ date: 2026-05-23 weight: 30 tags: ["software", "stack", "empfehlungen"] 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. diff --git a/content/library/theorie/typologie-als-werkzeug.md b/content/library/theorie/typologie-als-werkzeug.md index 00da31a..c65d725 100644 --- a/content/library/theorie/typologie-als-werkzeug.md +++ b/content/library/theorie/typologie-als-werkzeug.md @@ -3,6 +3,7 @@ title: "Typologie als Werkzeug" date: 2026-05-20 tags: ["theorie", "typologie", "methode"] 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. diff --git a/layouts/_default/single.html b/layouts/_default/single.html index d21bd77..d1f17fc 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,20 +1,28 @@ {{ define "main" }} - {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }} + {{ $section := "" }} + {{ with .Parent }}{{ $section = path.Base .RelPermalink }}{{ end }} + {{ $cover := .Params.cover_image }} + {{ $color := .Params.color }} -
    + {{/* Cover image first (full-bleed, directly under the masthead) */}} + {{ if $cover }} + + {{ end }} + +

    {{ .Title }}

    + {{ with .Params.summary }} +

    {{ . }}

    + {{ end }} {{ $author := .Params.author | default site.Params.author.name }} {{ if or $author .Date }}

    - {{ with $author }}von {{ . }}{{ end }} - {{ if and $author .Date }} · {{ end }} - {{ if .Date }}{{ end }} + {{- with $author -}}{{ . }}{{- end -}} + {{- if and $author .Date -}}, {{ end -}} + {{- if .Date -}}{{- end -}}

    {{ end }} - {{ with .Params.summary }} -

    {{ . }}

    - {{ end }}
    {{/* Table of Contents */}} @@ -31,13 +39,20 @@ {{ .Content }} + {{/* Tags as small pills at the bottom — Republik-style, no hash symbol */}} + {{- with .Params.tags }} +
      + {{- range . -}}
    • {{ . }}
      • {{- 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 }}
    {{ if and $showReadingTime .ReadingTime }}{{ .ReadingTime }} min Lesezeit{{ end }} - {{ if $hasLastmod }}{{ if and $showReadingTime .ReadingTime }} · {{ end }}Zuletzt aktualisiert: {{ .Lastmod.Format "2006-01-02" }}{{ end }} + {{ if $hasLastmod }}{{ if and $showReadingTime .ReadingTime }} · {{ end }}Zuletzt aktualisiert: {{ .Lastmod.Format "02.01.2006" }}{{ end }}
    {{ end }}
    diff --git a/layouts/_partials/date.html b/layouts/_partials/date.html new file mode 100644 index 0000000..e7b8f5b --- /dev/null +++ b/layouts/_partials/date.html @@ -0,0 +1 @@ + diff --git a/layouts/index.html b/layouts/index.html index 3a5559f..6d84f75 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -12,26 +12,44 @@
      {{ range $journal }} -
    1. - {{ $author := .Params.author | default site.Params.author.name }} + {{ $section := "" }} + {{ 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" }} +
    2. -
      + {{ if and $isHero $cover }} + + {{ else if $cover }} + + {{ end }} +
      {{ with .Parent }} - {{ .Title }} +

      {{ .Title }}

      {{ end }} - - {{ with $author }}{{ . }}{{ end }} +

      {{ .LinkTitle }}

      + {{ with .Params.summary }} +

      {{ . }}

      + {{ end }} +

      + {{- with $author -}}{{ . }}{{- end -}} + {{- if and $author .Date -}}, {{ end -}} + +

      -

      {{ .LinkTitle }}

      - {{ with .Params.summary }} -

      {{ . }}

      - {{ end }} - {{ with .Params.tags }} -
        - {{ range . }}
      • #{{ . }}
        • {{ end }} -
      - {{ end }}       + {{/* Tags rendered OUTSIDE the entry-link so the inner tags + don't auto-close the outer link (invalid HTML: in ). */}} + {{- with .Params.tags }} + + {{- end }}
      3. {{ end }}
    diff --git a/layouts/library/list.html b/layouts/library/list.html index bed2170..eefb13c 100644 --- a/layouts/library/list.html +++ b/layouts/library/list.html @@ -6,7 +6,8 @@ {{/* Library root: Atlas — gruppiert nach Untersection */}}
    {{ range .Sections.ByWeight }} -
    + {{ $section := path.Base .RelPermalink }} +

    {{ .Title }}

    {{ with .Params.description }}

    {{ . }}

    {{ end }}
      @@ -37,7 +38,13 @@
    {{ else }} {{/* Library subsection: chronologisch */}} -
    + {{ $section := path.Base .RelPermalink }} +
    +

    Library

    +

    {{ .Title }}

    + {{ with .Params.description }}

    {{ . }}

    {{ end }} +
    +
      {{ range .RegularPages.ByDate.Reverse }}
    • diff --git a/static/images/tokyo-metro.jpg b/static/images/tokyo-metro.jpg new file mode 100644 index 0000000..b9ff7e3 Binary files /dev/null and b/static/images/tokyo-metro.jpg differ