Make usage footer band and buttons theme-reactive
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

The closing "About us" band hardcoded a light plum background and used
btn-outline-dark / text-hilight, none of which flip with the theme, so
they were unreadable in dark mode. Drive the band, its buttons, and the
highlight from scoped tokens, and add a theme-aware .btn-outline-soft.
This commit is contained in:
nemunaire 2026-06-13 16:07:48 +09:00
commit 5d23fa4a1f
2 changed files with 77 additions and 4 deletions

View file

@ -16,7 +16,7 @@
<a class="btn btn-primary mt-2 mx-3" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-tryit" data-umami-event-lang="{{ .Page.Language.Lang }}" href="{{ .Site.Params.tryit }}">
{{ i18n "tryit" }} &#187;
</a>
<a class="btn btn-outline-dark mt-2 mx-3" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-downloads" data-umami-event-lang="{{ .Page.Language.Lang }}" href="/#downloads">
<a class="btn btn-outline-soft mt-2 mx-3" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-downloads" data-umami-event-lang="{{ .Page.Language.Lang }}" href="/#downloads">
{{ i18n "downloadit" }} &#187;
</a>
</p>
@ -56,7 +56,7 @@
</div>
</div>
<div class="container-fluid text-center py-5" style="background: var(--hd-plum-100)">
<div class="container-fluid text-center py-5 footer-us-band">
<div class="container my-4">
<div class="row">
<div class="order-0 col-md-5 offset-md-1 align-self-center text-center">
@ -68,9 +68,9 @@
</h4>
<p>
{{ i18n "footer-us-text-1" }}<span class="text-dark text-hilight px-1">{{ i18n "footer-us-text-hilight" }}</span>{{ i18n "footer-us-text-2" }}
{{ i18n "footer-us-text-1" }}<span class="band-hilight px-1">{{ i18n "footer-us-text-hilight" }}</span>{{ i18n "footer-us-text-2" }}
</p>
<a href="{{ i18n "footer-us-button-link" }}" class="btn btn-outline-dark" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-about">
<a href="{{ i18n "footer-us-button-link" }}" class="btn band-btn" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-about">
{{ i18n "footer-us-button" }}
</a>
</div>