feat(site): add section and heading anchors for deep-linking
All checks were successful
ci / test-commons-core (push) Successful in 44s
ci / analyze (push) Successful in 1m25s
site / deploy (push) Successful in 32s
ci / test-app-seeds (push) Successful in 5m51s

Landing sections now carry ids (status, features, faq, collab, …) so any
section is directly linkable (e.g. /#faq). About and Legal headings get a
discreet, hover-revealed permalink via a goldmark heading render hook.
A scroll-margin-top offset keeps anchored targets clear of the sticky header.
This commit is contained in:
vjrj 2026-07-17 17:28:39 +02:00
parent b0325fd40d
commit bfd29f19b9
3 changed files with 28 additions and 8 deletions

View file

@ -272,3 +272,19 @@ h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--green-dark); }
.collab-grid { grid-template-columns: 1fr; }
.rtl-note { flex-direction: column; text-align: center; }
}
/* Anchor targets clear the sticky header */
main > section[id],
.doc :is(h2, h3)[id] { scroll-margin-top: 5.5rem; }
/* Discreet, hover-revealed heading permalinks (About + Legal) */
.heading-anchor {
margin-inline-start: .35em;
color: var(--green);
text-decoration: none;
font-weight: 400;
opacity: 0;
transition: opacity .15s;
}
.doc :is(h2, h3):hover .heading-anchor,
.heading-anchor:focus { opacity: .6; }

View file

@ -0,0 +1,4 @@
<h{{ .Level }} id="{{ .Anchor }}">
{{ .Text | safeHTML }}
<a class="heading-anchor" href="#{{ .Anchor }}" aria-label="Permalink">#</a>
</h{{ .Level }}>

View file

@ -1,6 +1,6 @@
{{ define "main" }}
{{ $lang := .Site.Language.Lang }}
<section class="hero">
<section class="hero" id="top">
<div class="hero-copy">
<h1>{{ .Params.hero.title }}</h1>
<p class="tagline">{{ .Params.hero.tagline }}</p>
@ -19,7 +19,7 @@
{{ end }}
</section>
<section class="status">
<section class="status" id="status">
<span class="badge-beta">{{ T "statusBadge" }}</span>
<div>
<h2>{{ T "statusTitle" }}</h2>
@ -27,7 +27,7 @@
</div>
</section>
<section class="pillars">
<section class="pillars" id="pillars">
{{ range .Params.pillars }}
<article class="pillar">
<div class="pillar-icon" aria-hidden="true">{{ .icon }}</div>
@ -38,7 +38,7 @@
</section>
{{ with .Params.features }}
<section class="features">
<section class="features" id="features">
<h2>{{ .title }}</h2>
{{ with .intro }}<p class="features-intro">{{ . }}</p>{{ end }}
<div class="feature-groups">
@ -56,7 +56,7 @@
{{ end }}
{{ $screens := slice "home" "inventory" "market" "calendar" "detail" }}
<section class="shots">
<section class="shots" id="screenshots">
<h2>{{ T "screenshotsTitle" }}</h2>
<div class="shot-row">
{{ range $s := $screens }}
@ -81,14 +81,14 @@
{{ end }}
</section>
<section class="values">
<section class="values" id="values">
<h2>{{ .Params.values.title }}</h2>
<ul>
{{ range .Params.values.points }}<li>{{ . }}</li>{{ end }}
</ul>
</section>
<section class="faq">
<section class="faq" id="faq">
<h2>{{ T "faqTitle" }}</h2>
<dl>
<dt>{{ T "faqFreeQ" }}</dt><dd>{{ T "faqFreeA" }}</dd>
@ -99,7 +99,7 @@
</dl>
</section>
<section class="collab">
<section class="collab" id="collab">
<h2>{{ T "collabTitle" }}</h2>
<p class="lead">{{ T "collabIntro" }}</p>
<div class="collab-grid">