mirror of https://github.com/theNewDynamic/gohugo-theme-ananke.git
parent: 57a659b4 | patch | commit | ignore whitespace
Patrick Kollitsch
11 hours ago 006e3c84e3b229c68ae56a2d3723312f30b31d47 
fix: apply configured social colours on hover for follow and share (#861) (#979)

Closes #861.

## Problem

Social follow/share icons never changed to their configured `color` on
hover — they stayed the default grey.

The generated hover CSS in `layouts/_partials/site-style.html` filtered
the networks map with `collections.Where $config.networks "slug" "in"
$networks`. `where ... "in"` over a Hugo `Params` **map** yields no
results, so **zero** per-network rules were ever emitted. On top of
that, only `follow.networks` were considered (never `share.networks`),
and only `color` was set (not `fill`).

## Fix

- Build the rules by ranging the configured network slugs and
`collections.Index`-ing into the networks map — the same lookup the
`follow.html` / `share.html` partials already use — instead of `where`
over a map.
- Cover the **union of follow and share** networks, so share-only
networks get hover colours too.
- Set both `color` and `fill`, so the monochrome SVG icons (which
inherit `fill: currentColor`) reliably pick up the brand colour on
hover.

## Verification

Built a test site configuring `follow.networks = ['github']` and
`share.networks = ['bluesky', 'reddit']`:

```
a.github:hover{color:#6cc644!important;fill:#6cc644!important}
a.bluesky:hover{color:#1185fe!important;fill:#1185fe!important}
a.reddit:hover{color:#ff4500!important;fill:#ff4500!important}
```

- Rendered anchors carry the matching classes (`ananke-social-link
github …`, `ananke-social-link bluesky …`), so the selectors apply.
- Production (minified) and development (non-minified) builds both emit
well-formed rules.
- A config with no networks configured emits no stray rules.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
1 files modified
29 ■■■■■ changed files
layouts/_partials/site-style.html 29 ●●●●● patch | view | raw | blame | history 
 layouts/_partials/site-style.html


@@ -34,16 +34,31 @@


{{/* Generated social network hover colours */}}


{{- with site.Params.ananke.social -}}


  {{- $config := . -}}


  {{- $networks := $config.follow.networks | default collections.Slice -}}


  {{- $setups := collections.Where $config.networks "slug" "in" $networks -}}




  {{- with $setups -}}


  {{/* Cover both the follow and the share links, since either can render an


       icon that should pick up its configured brand colour on hover. */}}


  {{- $follow_networks := collections.Slice -}}


  {{- with $config.follow -}}


    {{- $follow_networks = .networks | default collections.Slice -}}


  {{- end -}}


  {{- $share_networks := collections.Slice -}}


  {{- with $config.share -}}


    {{- $share_networks = .networks | default collections.Slice -}}


  {{- end -}}


  {{- $networks := collections.Union $follow_networks $share_networks -}}




  {{- with $networks -}}


    {{- $socials_rules := collections.Slice -}}




    {{- range $service := . -}}


      {{- with $service.color -}}


        {{- $rule := fmt.Printf ".ananke-socials a.%s:hover {\n  color: %s !important;\n}" $service.slug . -}}


        {{- $socials_rules = $socials_rules | collections.Append $rule -}}


    {{- range $slug := . -}}


      {{- with collections.Index $config.networks $slug -}}


        {{- with .color -}}


          {{- $color := . -}}


          {{/* Set both `color` and `fill` so monochrome SVG icons (which inherit


               `fill: currentColor`) and any other markup react to the hover. */}}


          {{- $rule := fmt.Printf ".ananke-socials a.%s:hover {\n  color: %s !important;\n  fill: %s !important;\n}" $slug $color $color -}}


          {{- $socials_rules = $socials_rules | collections.Append $rule -}}


        {{- end -}}


      {{- end -}}


    {{- end -}}