Files
OPENBUREAU/layouts/index.html
T
karim 7a5be9250a republik-style redesign: dark masthead, hero block, palette, pills
- 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
2026-05-24 14:32:13 +02:00

62 lines
2.7 KiB
HTML

{{ define "main" }}
{{ .Content }}
{{ $library := where site.RegularPages "Section" "library" }}
{{ $journal := first 20 $library.ByDate.Reverse }}
<section class="journal" aria-label="Journal — neueste Beiträge">
<header class="journal-header">
<h2>Journal</h2>
<p class="text-muted">Was zuletzt geschrieben wurde.</p>
</header>
<ol class="journal-list">
{{ range $journal }}
{{ $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" }}
<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 }}">
{{ 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 }}
<p class="journal-rubric"><span class="journal-section">{{ .Title }}</span></p>
{{ end }}
<h3 class="journal-title">{{ .LinkTitle }}</h3>
{{ 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>
</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>
{{ end }}
</ol>
{{ if gt (len $library) 20 }}
<p class="more"><a href="/library/">→ Alle Beiträge in der Library</a></p>
{{ end }}
</section>
{{ end }}