happyDomain/website
2
0
Fork 0
Code Issues Pull requests Releases Activity

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

8
layouts/partials/usage_footer.html
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>

73
static/css/custom.css
View file

@ -773,6 +773,79 @@ img {
max-width: 700px;
}
/* "About us" closing band.
The plum-* scale is only defined for the light theme, so a hardcoded
var(--hd-plum-100) background stayed pale lavender in dark mode while
btn-outline-dark / text-dark inverted to light and became unreadable.
Drive every color from scoped band-* tokens that flip with the theme. */
.footer-us-band {
--band-bg: linear-gradient(160deg, var(--hd-plum-50) 0%, var(--hd-plum-100) 100%);
--band-fg: var(--hd-plum-700);
--band-fg-strong: var(--hd-plum-800);
--band-btn-fg: var(--hd-plum-700);
--band-btn-border: var(--hd-plum-300);
--band-btn-hover-bg: var(--hd-plum-700);
--band-btn-hover-fg: var(--hd-plum-50);
--band-hilight-bg: var(--hd-plum-300);
--band-hilight-fg: var(--hd-plum-900);
background: var(--band-bg);
color: var(--band-fg);
}
[data-bs-theme="dark"] .footer-us-band {
--band-bg: linear-gradient(160deg, #1c0d26 0%, var(--hd-plum-900) 100%);
--band-fg: var(--hd-plum-200);
--band-fg-strong: var(--hd-plum-50);
--band-btn-fg: var(--hd-plum-100);
--band-btn-border: var(--hd-plum-400);
--band-btn-hover-bg: var(--hd-plum-200);
--band-btn-hover-fg: var(--hd-plum-900);
--band-hilight-bg: var(--hd-plum-600);
--band-hilight-fg: var(--hd-plum-50);
}
.footer-us-band h3,
.footer-us-band h4 {
color: var(--band-fg-strong);
}
.footer-us-band .band-hilight {
background-color: var(--band-hilight-bg);
color: var(--band-hilight-fg);
border-radius: var(--hd-radius-sm, 4px);
}
.footer-us-band .band-btn {
color: var(--band-btn-fg);
border: 1px solid var(--band-btn-border);
background-color: transparent;
transition: background-color 0.15s ease, color 0.15s ease,
border-color 0.15s ease;
}
.footer-us-band .band-btn:hover,
.footer-us-band .band-btn:focus-visible {
background-color: var(--band-btn-hover-bg);
color: var(--band-btn-hover-fg);
border-color: var(--band-btn-hover-bg);
}
/* Theme-aware neutral outline button.
Bootstrap's .btn-outline-dark is compiled with a fixed dark gray, so it
turns invisible on the dark body in dark mode. This flips with the theme. */
.btn-outline-soft {
color: var(--hd-fg-1);
border: 1px solid var(--hd-border-2);
background-color: transparent;
transition: background-color 0.15s ease, color 0.15s ease,
border-color 0.15s ease;
}
.btn-outline-soft:hover,
.btn-outline-soft:focus-visible {
color: var(--hd-fg-1);
background-color: var(--hd-bg-inset);
border-color: var(--hd-border-3);
}
footer {
border-top: 3px solid var(--hd-plum-400);
/* Footer is always a dark band (all child text is hardcoded white),