Footer icons lacking hover effect

[EthanThatOneKid]

What happened?

Overview

The text on our footer changes colors to blue on hover, but our social icons do not change colors^1. This is inconsistent.

Context

[9:53 AM]Chom: back to what i was referring to, see how i hover over the text (mouse isnt displayed but its over the blue text) [9:53 AM]EthanThatOneKid: Yes [9:54 AM]Chom: it doesnt do that for the logos, and thats where filter comes in

Issue reported by @tomasohCHOM.

[tomasohCHOM]

CSS has a filter property that allows to change the color of svg images through a series of functions. I took the --acm-blue hex color (#2c91c6) and if I apply filter: brightness(0) saturate(100%) invert(54%) sepia(28%) saturate(1154%) hue-rotate(156deg) brightness(88%) contrast(90%);, it gives me an almost perfect result with 0.6 loss. I just don't know how to code it...

[EthanThatOneKid]

CSS has a filter property that allows to change the color of svg images through a series of functions. I took the --acm-blue hex color (#2c91c6) and if I apply filter: brightness(0) saturate(100%) invert(54%) sepia(28%) saturate(1154%) hue-rotate(156deg) brightness(88%) contrast(90%);, it gives me an almost perfect result with 0.6 loss. I just don't know how to code it...

Filtering from white to blue using this filter causes the logo to temporarily turn green as the hue rotates!

Changes

Result

https://github.com/EthanThatOneKid/acmcsuf.com/assets/31261035/922c9416-03b1-4a1f-a918-141c8929721a