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>
This commit is contained in:
yvierkoetter
+204
-146
@@ -1,264 +1,322 @@
|
||||
/* ── Warm colour palette ──────────────────────────────── */
|
||||
|
||||
:root {
|
||||
--surface-1-light: #faf8f4;
|
||||
--surface-2-light: #f0ece4;
|
||||
--text-1-light: #1a1614;
|
||||
--text-2-light: #6b6258;
|
||||
--border-light: #ccc4b8;
|
||||
--surface-1-light: #faf8f4;
|
||||
--surface-2-light: #f0ece4;
|
||||
--text-1-light: #1a1614;
|
||||
--text-2-light: #6b6258;
|
||||
--border-light: #ccc4b8;
|
||||
|
||||
--surface-1-dark: #0d0b09;
|
||||
--surface-2-dark: #3d3631;
|
||||
--text-1-dark: #f7f3ee;
|
||||
--text-2-dark: #9e948a;
|
||||
--border-dark: #5c5249;
|
||||
--surface-1-dark: #0d0b09;
|
||||
--surface-2-dark: #3d3631;
|
||||
--text-1-dark: #f7f3ee;
|
||||
--text-2-dark: #9e948a;
|
||||
--border-dark: #5c5249;
|
||||
}
|
||||
|
||||
/* ── Hero ─────────────────────────────────────────────── */
|
||||
|
||||
section.hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
padding: 0;
|
||||
margin: 0 0 5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
padding: 0;
|
||||
margin: 0 0 5rem;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
top: -30%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 160%;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
top: -30%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 160%;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.hero-bg::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 40%);
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 40%);
|
||||
}
|
||||
|
||||
.hero-fg {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
will-change: transform;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* ── Hero content ─────────────────────────────────────── */
|
||||
|
||||
.hero-content {
|
||||
width: 100%;
|
||||
padding: 2.5rem 3rem;
|
||||
text-align: center;
|
||||
background: rgba(10, 8, 6, 0.38);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
width: 100%;
|
||||
padding: 2.5rem 3rem;
|
||||
text-align: center;
|
||||
background: rgba(10, 8, 6, 0.38);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* SVG vase title in the hero glass panel */
|
||||
.hero-vase-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 1.25rem;
|
||||
animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 1.25rem;
|
||||
animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
.hero-vase-title {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.hero-vase-title {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-vase-title img {
|
||||
filter: brightness(0) invert(1);
|
||||
display: block;
|
||||
width: auto;
|
||||
filter: brightness(0) invert(1);
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.hero-vase-title .vase-name {
|
||||
height: clamp(3rem, 7.5vw, 5.5rem);
|
||||
height: clamp(3rem, 7.5vw, 5.5rem);
|
||||
}
|
||||
|
||||
.hero-vase-title .vase-rings {
|
||||
height: clamp(3rem, 7.5vw, 5.5rem);
|
||||
height: clamp(3rem, 7.5vw, 5.5rem);
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
color: rgba(250, 248, 244, 0.8);
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
|
||||
color: rgba(250, 248, 244, 0.8);
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
|
||||
}
|
||||
|
||||
/* ── Scroll arrow ─────────────────────────────────────── */
|
||||
|
||||
.hero-scroll {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 0.5rem;
|
||||
color: rgba(250, 250, 250, 0.6);
|
||||
animation: hero-fade-in 0.6s ease 0.6s both;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 0.5rem;
|
||||
color: rgba(250, 250, 250, 0.6);
|
||||
animation: hero-fade-in 0.6s ease 0.6s both;
|
||||
}
|
||||
|
||||
.hero-scroll-icon {
|
||||
display: block;
|
||||
animation: hero-bounce 2s ease-in-out 1.2s infinite;
|
||||
display: block;
|
||||
animation: hero-bounce 2s ease-in-out 1.2s infinite;
|
||||
}
|
||||
|
||||
.hero-scroll svg {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
display: block;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── Intro text section ───────────────────────────────── */
|
||||
|
||||
.home-intro {
|
||||
max-width: 560px;
|
||||
margin: 4rem auto 5rem;
|
||||
padding: 0 1.5rem;
|
||||
text-align: center;
|
||||
max-width: 560px;
|
||||
margin: 4rem auto 5rem;
|
||||
padding: 0 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.home-intro .prose p {
|
||||
color: var(--text-2);
|
||||
font-size: 1rem;
|
||||
line-height: 1.9;
|
||||
margin-top: 0.9em;
|
||||
margin-bottom: 0.9em;
|
||||
color: var(--text-2);
|
||||
font-size: 1rem;
|
||||
line-height: 1.9;
|
||||
margin-top: 0.9em;
|
||||
margin-bottom: 0.9em;
|
||||
}
|
||||
|
||||
.home-intro .prose p:first-child {
|
||||
margin-top: 0;
|
||||
color: var(--text-1);
|
||||
font-size: 1.1875rem;
|
||||
line-height: 1.75;
|
||||
margin-top: 0;
|
||||
color: var(--text-1);
|
||||
font-size: 1.1875rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
/* ── Vase ornament ────────────────────────────────────── */
|
||||
|
||||
.home-ornament {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 auto 3rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 auto 3rem;
|
||||
}
|
||||
|
||||
.home-ornament img {
|
||||
height: 240px;
|
||||
width: auto;
|
||||
opacity: 0.38;
|
||||
filter: sepia(1);
|
||||
height: 240px;
|
||||
width: auto;
|
||||
opacity: 0.38;
|
||||
filter: sepia(1);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .home-ornament img {
|
||||
filter: invert(1) sepia(0.4) brightness(0.85);
|
||||
opacity: 0.45;
|
||||
filter: invert(1) sepia(0.4) brightness(0.85);
|
||||
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;
|
||||
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;
|
||||
font-size: 0.6875rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ── Albums divider ───────────────────────────────────── */
|
||||
|
||||
.home-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto 2.5rem;
|
||||
padding: 0 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto 2.5rem;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.home-divider::before,
|
||||
.home-divider::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.home-divider span {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-2);
|
||||
white-space: nowrap;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── Closing line ─────────────────────────────────────── */
|
||||
|
||||
.home-closing {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 4rem auto 2rem;
|
||||
padding: 2.5rem 1.5rem 0;
|
||||
border-top: 1px solid var(--border);
|
||||
max-width: 1280px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 4rem auto 2rem;
|
||||
padding: 2.5rem 1.5rem 0;
|
||||
border-top: 1px solid var(--border);
|
||||
max-width: 1280px;
|
||||
}
|
||||
|
||||
.home-closing .vase-date {
|
||||
height: 1.75rem;
|
||||
width: auto;
|
||||
opacity: 0.75;
|
||||
filter: sepia(1);
|
||||
height: 1.75rem;
|
||||
width: auto;
|
||||
opacity: 0.75;
|
||||
filter: sepia(1);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .home-closing .vase-date {
|
||||
filter: invert(1) sepia(0.3) brightness(0.9);
|
||||
opacity: 0.75;
|
||||
filter: invert(1) sepia(0.3) brightness(0.9);
|
||||
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 hero-fade-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(1.5rem);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(1.5rem);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hero-fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hero-bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(7px); }
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(7px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
{{ define "main" }}
|
||||
<section class="galleries">
|
||||
{{ range where .Pages "Params.private" "ne" true }}
|
||||
{{ partial "album-card.html" . }}
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
@@ -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 }}
|
||||
@@ -7,24 +7,25 @@
|
||||
</svg>
|
||||
</a>
|
||||
{{ else }}
|
||||
<a class="btn" href="{{ .Site.Home.RelPermalink }}">
|
||||
{{ .Site.Title }}
|
||||
<a class="btn btn-square" href="{{ .Site.Home.RelPermalink }}" 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>
|
||||
{{ end }}
|
||||
{{ if site.Menus.main }}
|
||||
<ul>
|
||||
<li>
|
||||
<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">
|
||||
<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 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>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
{{ end }}
|
||||
<h1 class="header-title">{{ .Title }}</h1>
|
||||
<div class="header-right">
|
||||
{{ if site.Menus.main }}
|
||||
<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">
|
||||
<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 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>
|
||||
</svg>
|
||||
</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
</header>
|
||||
{{ partial "menu.html" . }}
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user