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

Fix footer colors in dark mode and use absolute anchor links

Browse source 
Pin the footer to fixed dark colors instead of the theme-reactive
.bg-dark/.text-light utilities, which flipped to a light background in
dark mode while child text stayed white. Also make product anchor links
absolute so they resolve from any page.
This commit is contained in:
nemunaire 2026-06-12 12:29:35 +09:00
commit ccfb30dbc2
2 changed files with 8 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
layouts/partials/footer.html
View file

@ -1,4 +1,4 @@
<footer class="pt-5 pb-3 bg-dark text-light">
<footer class="pt-5 pb-3">
<div class="container">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-5 g-4 mb-4">
<div class="col footer-brand-col">
@ -33,11 +33,11 @@
<div class="col">
<h4 class="footer-heading">{{ i18n "footer-product" }}</h4>
<ul class="footer-links">
<li><a href="#features">{{ i18n "footer-happydomain-features" }}</a></li>
<li><a href="#discover">{{ i18n "discover-title" }}</a></li>
<li><a href="/{{ .Site.Language.Lang }}/#features">{{ i18n "footer-happydomain-features" }}</a></li>
<li><a href="/{{ .Site.Language.Lang }}/#discover">{{ i18n "discover-title" }}</a></li>
<li><a href="https://try.happydomain.org/" data-umami-event="footer-tryit">{{ i18n "tryit" }}</a></li>
<!--li><a href="#">{{ i18n "footer-happydomain-testimonials" }}</a></li-->
<li><a href="#downloads">{{ i18n "footer-happydomain-downloads" }}</a></li>
<li><a href="/{{ .Site.Language.Lang }}/#downloads">{{ i18n "footer-happydomain-downloads" }}</a></li>
<!--li><a href="#">{{ i18n "footer-happydomain-prices" }}</a></li-->
</ul>
</div>

4
static/css/custom.css
View file

@ -256,6 +256,10 @@ img {
footer {
border-top: 3px solid var(--hd-plum-400);
/* Footer is always a dark band (all child text is hardcoded white),
so pin its colors instead of using the theme-reactive .bg-dark/.text-light. */
background-color: #212529;
color: #f8f9fa;
}
.footer-tagline {