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
This commit is contained in:
@@ -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 }}
|
||||
|
||||
<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">
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ with .Params.summary }}
|
||||
<p class="single-summary">{{ . }}</p>
|
||||
{{ end }}
|
||||
{{ $author := .Params.author | default site.Params.author.name }}
|
||||
{{ if or $author .Date }}
|
||||
<p class="single-byline">
|
||||
{{ with $author }}<span class="byline-author">von {{ . }}</span>{{ 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 }}
|
||||
{{- with $author -}}<span class="byline-author">{{ . }}</span>{{- end -}}
|
||||
{{- if and $author .Date -}}, {{ end -}}
|
||||
{{- if .Date -}}<time class="byline-date" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "02.01.2006" }}</time>{{- end -}}
|
||||
</p>
|
||||
{{ end }}
|
||||
{{ with .Params.summary }}
|
||||
<p class="single-summary text-muted">{{ . }}</p>
|
||||
{{ end }}
|
||||
</header>
|
||||
|
||||
{{/* Table of Contents */}}
|
||||
@@ -31,13 +39,20 @@
|
||||
{{ .Content }}
|
||||
</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 }}
|
||||
{{ $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 "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>
|
||||
{{ end }}
|
||||
</article>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<time datetime="{{ . | time.Format "2006-01-02" }}">{{ . | time.Format "02.01.2006" }}</time>
|
||||
+33
-15
@@ -12,26 +12,44 @@
|
||||
|
||||
<ol class="journal-list">
|
||||
{{ range $journal }}
|
||||
<li class="journal-entry">
|
||||
{{ $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" }}
|
||||
<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 }}">
|
||||
<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 }}
|
||||
<span class="journal-section">{{ .Title }}</span>
|
||||
<p class="journal-rubric"><span class="journal-section">{{ .Title }}</span></p>
|
||||
{{ end }}
|
||||
<time class="journal-date" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006-01-02" }}</time>
|
||||
{{ with $author }}<span class="journal-author">{{ . }}</span>{{ 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>
|
||||
<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>
|
||||
{{/* 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>
|
||||
|
||||
@@ -6,7 +6,8 @@
|
||||
{{/* Library root: Atlas — gruppiert nach Untersection */}}
|
||||
<section class="atlas">
|
||||
{{ 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>
|
||||
{{ with .Params.description }}<p class="text-muted">{{ . }}</p>{{ end }}
|
||||
<ul class="atlas-list">
|
||||
@@ -37,7 +38,13 @@
|
||||
</section>
|
||||
{{ else }}
|
||||
{{/* 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>
|
||||
{{ range .RegularPages.ByDate.Reverse }}
|
||||
<li class="list-item">
|
||||
|
||||
Reference in New Issue
Block a user