feat(site): add section and heading anchors for deep-linking
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:
parent
b0325fd40d
commit
bfd29f19b9
3 changed files with 28 additions and 8 deletions
|
|
@ -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; }
|
||||
|
|
|
|||
4
site/layouts/_default/_markup/render-heading.html
Normal file
4
site/layouts/_default/_markup/render-heading.html
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<h{{ .Level }} id="{{ .Anchor }}">
|
||||
{{ .Text | safeHTML }}
|
||||
<a class="heading-anchor" href="#{{ .Anchor }}" aria-label="Permalink">#</a>
|
||||
</h{{ .Level }}>
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue