y.vierkoetter/plassonke.de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: y.vierkoetter/plassonke.de:d62e71bafb7750c7d30b993f7e7afd0f0952245c
Branches Tags
y.vierkoetter/plassonke.de:main
...
compare: y.vierkoetter/plassonke.de:b1a469776914780c93956cf6a64ead6fdfd2b7f8
Branches Tags
y.vierkoetter/plassonke.de:main

3 Commits
d62e71bafb ... b1a4697769

Author SHA1 Message Date
yvierkoetter b1a4697769 Gallery pages: title in header, remove hgroup, add back link 
- Album title moved into the header bar (centered, small-caps)
- hgroup removed from page body via single.html and list.html overrides
- Back-to-home link added at the bottom of each gallery page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-06-18 23:31:19 +02:00
yvierkoetter 7caadb048a Style album card text to match site aesthetic 
Lighter title weight, small-caps uppercase photo count with letter-spacing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-06-18 23:11:00 +02:00
yvierkoetter 6a445bf1b4 Remove unused Cormorant Garant font 
Font was only applied to the hero h1 which is now replaced by SVG.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-06-18 23:07:50 +02:00
9 changed files with 253 additions and 4642 deletions
Expand all files Collapse all files
assets/css/custom.css
+212 -140
View File
@@ -1,250 +1,322 @@
/* ── Warm colour palette ──────────────────────────────── */ /* ── Warm colour palette ──────────────────────────────── */
:root { :root {
--surface-1-light: #faf8f4; --surface-1-light: #faf8f4;
--surface-2-light: #f0ece4; --surface-2-light: #f0ece4;
--text-1-light: #1a1614; --text-1-light: #1a1614;
--text-2-light: #6b6258; --text-2-light: #6b6258;
--border-light: #ccc4b8; --border-light: #ccc4b8;
--surface-1-dark: #0d0b09; --surface-1-dark: #0d0b09;
--surface-2-dark: #3d3631; --surface-2-dark: #3d3631;
--text-1-dark: #f7f3ee; --text-1-dark: #f7f3ee;
--text-2-dark: #9e948a; --text-2-dark: #9e948a;
--border-dark: #5c5249; --border-dark: #5c5249;
} }
/* ── Hero ─────────────────────────────────────────────── */ /* ── Hero ─────────────────────────────────────────────── */
section.hero { section.hero {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
padding: 0; padding: 0;
margin: 0 0 5rem; margin: 0 0 5rem;
} }
.hero-bg { .hero-bg {
position: absolute; position: absolute;
top: -30%; top: -30%;
left: 0; left: 0;
width: 100%; width: 100%;
height: 160%; height: 160%;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
will-change: transform; will-change: transform;
} }
.hero-bg::after { .hero-bg::after {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 40%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 40%);
} }
.hero-fg { .hero-fg {
position: relative; position: relative;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
will-change: transform; will-change: transform;
} }
/* ── Hero content ─────────────────────────────────────── */ /* ── Hero content ─────────────────────────────────────── */
.hero-content { .hero-content {
width: 100%; width: 100%;
padding: 2.5rem 3rem; padding: 2.5rem 3rem;
text-align: center; text-align: center;
background: rgba(10, 8, 6, 0.38); background: rgba(10, 8, 6, 0.38);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1);
} }
/* SVG vase title in the hero glass panel */ /* SVG vase title in the hero glass panel */
.hero-vase-title { .hero-vase-title {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 2rem; gap: 2rem;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) both; animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) both;
} }
@media (orientation: portrait) { @media (orientation: portrait) {
.hero-vase-title { .hero-vase-title {
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
} }
} }
.hero-vase-title img { .hero-vase-title img {
filter: brightness(0) invert(1); filter: brightness(0) invert(1);
display: block; display: block;
width: auto; width: auto;
} }
.hero-vase-title .vase-name { .hero-vase-title .vase-name {
height: clamp(3rem, 7.5vw, 5.5rem); height: clamp(3rem, 7.5vw, 5.5rem);
} }
.hero-vase-title .vase-rings { .hero-vase-title .vase-rings {
height: clamp(3rem, 7.5vw, 5.5rem); height: clamp(3rem, 7.5vw, 5.5rem);
} }
.hero-content p { .hero-content p {
color: rgba(250, 248, 244, 0.8); color: rgba(250, 248, 244, 0.8);
font-size: 1rem; font-size: 1rem;
line-height: 1.6; line-height: 1.6;
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
text-wrap: balance; text-wrap: balance;
animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
} }
/* ── Scroll arrow ─────────────────────────────────────── */ /* ── Scroll arrow ─────────────────────────────────────── */
.hero-scroll { .hero-scroll {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-top: 0.5rem; padding-top: 0.5rem;
color: rgba(250, 250, 250, 0.6); color: rgba(250, 250, 250, 0.6);
animation: hero-fade-in 0.6s ease 0.6s both; animation: hero-fade-in 0.6s ease 0.6s both;
} }
.hero-scroll-icon { .hero-scroll-icon {
display: block; display: block;
animation: hero-bounce 2s ease-in-out 1.2s infinite; animation: hero-bounce 2s ease-in-out 1.2s infinite;
} }
.hero-scroll svg { .hero-scroll svg {
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
display: block; display: block;
} }
/* ── Intro text section ───────────────────────────────── */ /* ── Intro text section ───────────────────────────────── */
.home-intro { .home-intro {
max-width: 560px; max-width: 560px;
margin: 4rem auto 5rem; margin: 4rem auto 5rem;
padding: 0 1.5rem; padding: 0 1.5rem;
text-align: center; text-align: center;
} }
.home-intro .prose p { .home-intro .prose p {
color: var(--text-2); color: var(--text-2);
font-size: 1rem; font-size: 1rem;
line-height: 1.9; line-height: 1.9;
margin-top: 0.9em; margin-top: 0.9em;
margin-bottom: 0.9em; margin-bottom: 0.9em;
} }
.home-intro .prose p:first-child { .home-intro .prose p:first-child {
margin-top: 0; margin-top: 0;
color: var(--text-1); color: var(--text-1);
font-size: 1.1875rem; font-size: 1.1875rem;
line-height: 1.75; line-height: 1.75;
} }
/* ── Vase ornament ────────────────────────────────────── */ /* ── Vase ornament ────────────────────────────────────── */
.home-ornament { .home-ornament {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 0 auto 3rem; margin: 0 auto 3rem;
} }
.home-ornament img { .home-ornament img {
height: 240px; height: 240px;
width: auto; width: auto;
opacity: 0.38; opacity: 0.38;
filter: sepia(1); filter: sepia(1);
} }
[data-theme="dark"] .home-ornament img { [data-theme="dark"] .home-ornament img {
filter: invert(1) sepia(0.4) brightness(0.85); filter: invert(1) sepia(0.4) brightness(0.85);
opacity: 0.45; opacity: 0.45;
}
/* ── Gallery page header title ────────────────────────── */
body > header {
justify-content: space-between;
margin-bottom: 0;
}
.header-title {
flex: 1;
text-align: center;
font-weight: 500;
font-size: 1.5rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-1);
margin: 0;
}
.header-right {
width: 3rem;
display: flex;
justify-content: flex-end;
}
/* ── Album card text ──────────────────────────────────── */
.card > div > h2 {
font-weight: 400;
font-size: 0.9375rem;
letter-spacing: 0.06em;
}
.card > div > p {
font-size: 0.6875rem;
letter-spacing: 0.15em;
text-transform: uppercase;
} }
/* ── Albums divider ───────────────────────────────────── */ /* ── Albums divider ───────────────────────────────────── */
.home-divider { .home-divider {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1.25rem; gap: 1.25rem;
max-width: 1280px; max-width: 1280px;
margin: 0 auto 2.5rem; margin: 0 auto 2.5rem;
padding: 0 1.5rem; padding: 0 1.5rem;
} }
.home-divider::before, .home-divider::before,
.home-divider::after { .home-divider::after {
content: ""; content: "";
flex: 1; flex: 1;
height: 1px; height: 1px;
background: var(--border); background: var(--border);
} }
.home-divider span { .home-divider span {
font-size: 0.6875rem; font-size: 0.6875rem;
font-weight: 500; font-weight: 500;
letter-spacing: 0.2em; letter-spacing: 0.2em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-2); color: var(--text-2);
white-space: nowrap; white-space: nowrap;
} }
/* ── Closing line ─────────────────────────────────────── */ /* ── Closing line ─────────────────────────────────────── */
.home-closing { .home-closing {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 4rem auto 2rem; margin: 4rem auto 2rem;
padding: 2.5rem 1.5rem 0; padding: 2.5rem 1.5rem 0;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
max-width: 1280px; max-width: 1280px;
} }
.home-closing .vase-date { .home-closing .vase-date {
height: 1.75rem; height: 1.75rem;
width: auto; width: auto;
opacity: 0.75; opacity: 0.75;
filter: sepia(1); filter: sepia(1);
} }
[data-theme="dark"] .home-closing .vase-date { [data-theme="dark"] .home-closing .vase-date {
filter: invert(1) sepia(0.3) brightness(0.9); filter: invert(1) sepia(0.3) brightness(0.9);
opacity: 0.75; opacity: 0.75;
}
/* ── Gallery back link ────────────────────────────────── */
.gallery-back {
display: flex;
justify-content: center;
padding: 3rem 1.5rem 2rem;
border-top: 1px solid var(--border);
margin-top: 3rem;
}
.gallery-back-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-2);
text-decoration: none;
transition: color 0.2s;
}
.gallery-back-link:hover {
color: var(--text-1);
} }
/* ── Keyframes ────────────────────────────────────────── */ /* ── Keyframes ────────────────────────────────────────── */
@keyframes hero-fade-up { @keyframes hero-fade-up {
from { from {
opacity: 0; opacity: 0;
transform: translateY(1.5rem); transform: translateY(1.5rem);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
@keyframes hero-fade-in { @keyframes hero-fade-in {
from { opacity: 0; } from {
to { opacity: 1; } opacity: 0;
}
to {
opacity: 1;
}
} }
@keyframes hero-bounce { @keyframes hero-bounce {
0%, 100% { transform: translateY(0); } 0%, 100% {
50% { transform: translateY(7px); } transform: translateY(0);
}
50% {
transform: translateY(7px);
}
} }
layouts/_default/list.html
+7
View File
@@ -0,0 +1,7 @@
{{ define "main" }}
<section class="galleries">
{{ range where .Pages "Params.private" "ne" true }}
{{ partial "album-card.html" . }}
{{ end }}
</section>
{{ end }}
layouts/_default/single.html
+17
View File
@@ -0,0 +1,17 @@
{{ define "main" }}
{{ partial "gallery.html" . }}
{{ partial "related.html" . }}
{{ with .Content }}
<section class="prose">
{{ . }}
</section>
{{ end }}
<div class="gallery-back">
<a href="{{ .Site.Home.RelPermalink }}" class="gallery-back-link">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M19 12H5M5 12l7 7M5 12l7-7"/>
</svg>
Zurück zur Startseite
</a>
</div>
{{ end }}
layouts/partials/head-custom.html
-30
View File
@@ -1,30 +0,0 @@
<style>
@font-face {
font-family: 'Cormorant Garant';
src: url('/fonts/CormorantGarant-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Cormorant Garant';
src: url('/fonts/CormorantGarant-LightItalic.woff2') format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Cormorant Garant';
src: url('/fonts/CormorantGarant-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Cormorant Garant';
src: url('/fonts/CormorantGarant-Italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
</style>
layouts/partials/header.html
+17 -16
View File
@@ -7,24 +7,25 @@
</svg> </svg>
</a> </a>
{{ else }} {{ else }}
<a class="btn" href="{{ .Site.Home.RelPermalink }}"> <a class="btn btn-square" href="{{ .Site.Home.RelPermalink }}" title="{{ .Site.Title }}">
{{ .Site.Title }} <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path clip-rule="evenodd" fill-rule="evenodd" d="M11.03 3.97a.75.75 0 0 1 0 1.06l-6.22 6.22H21a.75.75 0 0 1 0 1.5H4.81l6.22 6.22a.75.75 0 1 1-1.06 1.06l-7.5-7.5a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 0 1 1.06 0Z"></path>
</svg>
</a> </a>
{{ end }} {{ end }}
{{ if site.Menus.main }} <h1 class="header-title">{{ .Title }}</h1>
<ul> <div class="header-right">
<li> {{ if site.Menus.main }}
<button class="btn btn-square" id="menu-toggle" aria-expanded="false" type="button" title="{{ T "menu" }}"> <button class="btn btn-square" id="menu-toggle" aria-expanded="false" type="button" title="{{ T "menu" }}">
<svg class="icon-menu" width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <svg class="icon-menu" width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path clip-rule="evenodd" fill-rule="evenodd" d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"></path> <path clip-rule="evenodd" fill-rule="evenodd" d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"></path>
</svg> </svg>
<svg class="icon-close hidden" width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <svg class="icon-close hidden" width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path clip-rule="evenodd" fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"></path> <path clip-rule="evenodd" fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"></path>
</svg> </svg>
</button> </button>
</li> {{ end }}
</ul> </div>
{{ end }}
</header> </header>
{{ partial "menu.html" . }} {{ partial "menu.html" . }}
{{ end }} {{ end }}
static/fonts/CormorantGarant-Italic.woff2
-1114
View File
File diff suppressed because one or more lines are too long
static/fonts/CormorantGarant-Light.woff2
-1114
View File
File diff suppressed because one or more lines are too long
static/fonts/CormorantGarant-LightItalic.woff2
-1114
View File
File diff suppressed because one or more lines are too long
static/fonts/CormorantGarant-Regular.woff2
-1114
View File
File diff suppressed because one or more lines are too long