This is an automated email from the ASF dual-hosted git repository.
potiuk pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow-site.git
The following commit(s) were added to refs/heads/main by this push:
new 31022bb040 feat(footer): show social icons' brand colors on hover
(#1283)
31022bb040 is described below
commit 31022bb040a26c102ad1d058edb8865323056261
Author: Sarcaxtic Larka <[email protected]>
AuthorDate: Mon Nov 24 00:11:58 2025 +0530
feat(footer): show social icons' brand colors on hover (#1283)
- reveal SVG brand colors on hover (remove grayscale + restore opacity)
- add per-icon hover overrides
---
landing-pages/site/layouts/partials/footer.html | 41 +++++++++++++++++-
.../sphinx_airflow_theme/footer.html | 50 +++++++++++++++++++---
2 files changed, 85 insertions(+), 6 deletions(-)
diff --git a/landing-pages/site/layouts/partials/footer.html
b/landing-pages/site/layouts/partials/footer.html
index 7ba6e13690..c467d38579 100644
--- a/landing-pages/site/layouts/partials/footer.html
+++ b/landing-pages/site/layouts/partials/footer.html
@@ -18,13 +18,52 @@
*/}}
{{ $links := .Site.Params.links }}
+<style>
+/* Footer icon hover: reveal each SVG's original colors on hover by removing
+ grayscale and increasing opacity. This keeps original brand colors
embedded
+ inside the SVGs and avoids forcing a single accent color. */
+.footer-section__media-section--link {
+ display: inline-block;
+}
+.footer-section__media-section--link svg,
+.footer-section__media-section--link img {
+ filter: grayscale(1);
+ opacity: 0.6;
+ transition: filter 0.18s ease, opacity 0.18s ease;
+}
+.footer-section__media-section--link:hover svg,
+.footer-section__media-section--link:hover img {
+ filter: none;
+ opacity: 1;
+}
+</style>
+
+<style>
+/* Per-icon brand color overrides on hover. Use !important to override inline
fills. */
+.icon-github:hover svg path,
+.icon-github:hover svg circle { fill: #24292e !important; }
+.icon-twitter:hover svg path,
+.icon-twitter:hover svg circle { fill: #1DA1F2 !important; }
+.icon-slack:hover svg path,
+.icon-slack:hover svg circle { fill: #4A154B !important; }
+.icon-youtube:hover svg path,
+.icon-youtube:hover svg circle { fill: #FF0000 !important; }
+.icon-stackoverflow:hover svg path,
+.icon-stackoverflow:hover svg circle { fill: #F48024 !important; }
+.icon-linkedin:hover svg path,
+.icon-linkedin:hover svg circle { fill: #0A66C2 !important; }
+.icon-facebook:hover svg path,
+.icon-facebook:hover svg circle { fill: #1877F2 !important; }
+</style>
+</style>
+
<footer>
<div class="footer-section footer-section__media-section">
<div class="d-flex align-items-center">
{{ with $links }}
{{ with index . "media"}}
{{ range . }}
- <a class="footer-section__media-section--link"
target="_blank" href="{{ .url }}">
+ <a class="footer-section__media-section--link icon-{{
replace .iconName ".svg" "" | lower }}" target="_blank" href="{{ .url }}">
{{ with resources.Get (print "icons/" .iconName)
}}{{ .Content | safeHTML }}{{ end }}
</a>
{{ end }}
diff --git a/sphinx_airflow_theme/sphinx_airflow_theme/footer.html
b/sphinx_airflow_theme/sphinx_airflow_theme/footer.html
index 711412d7af..abb44ea200 100644
--- a/sphinx_airflow_theme/sphinx_airflow_theme/footer.html
+++ b/sphinx_airflow_theme/sphinx_airflow_theme/footer.html
@@ -17,29 +17,69 @@
under the License.
#}
+<style>
+/* Footer icon hover: reveal each SVG's original colors on hover by removing
+ grayscale and increasing opacity. This keeps original brand colors
embedded
+ inside the SVGs and avoids forcing a single accent color. */
+.footer-section__media-section--link {
+ display: inline-block;
+}
+.footer-section__media-section--link svg,
+.footer-section__media-section--link img {
+ filter: grayscale(1);
+ opacity: 0.6;
+ transition: filter 0.18s ease, opacity 0.18s ease;
+}
+.footer-section__media-section--link:hover svg,
+.footer-section__media-section--link:hover img {
+ filter: none;
+ opacity: 1;
+}
+</style>
+
<footer>
<div class="footer-section footer-section__media-section">
<div class="d-flex align-items-center">
- <a class="footer-section__media-section--link" target="_blank"
href="https://github.com/apache/airflow";>
+ <a class="footer-section__media-section--link icon-github"
target="_blank" href="https://github.com/apache/airflow";>
<svg xmlns="http://www.w3.org/2000/svg"; width="46.14"
height="45" viewBox="0 0 46.14 45">
<path id="Path_207" d="M228.962 1078.578a23.072 23.072 0 0
0-7.29 44.96c1.154.212 1.574-.5 1.574-1.112 0-.548-.02-2-.031-3.924-6.417
1.394-7.771-3.093-7.771-3.093a6.109 6.109 0 0
0-2.562-3.375c-2.095-1.431.159-1.4.159-1.4a4.846 4.846 0 0 1 3.533 2.377c2.058
3.525 5.4 2.507 6.714 1.917a4.926 4.926 0 0 1
1.464-3.084c-5.123-.582-10.508-2.562-10.508-11.4a8.919 8.919 0 0 1 2.374-6.191
8.3 8.3 0 0 1 .226-6.105s1.937-.62 6.344 2.365a21.857 21.857 0 0 1 11.551
0c4.4-2.985 6.3 [...]
</svg>
</a>
- <a class="footer-section__media-section--link" target="_blank"
href="https://github.com/apache/airflow/issues";>
+ <a class="footer-section__media-section--link icon-github-issues"
target="_blank" href="https://github.com/apache/airflow/issues";>
<svg xmlns="http://www.w3.org/2000/svg"; width="45" height="45"
viewBox="0 0 45 45">
<g id="Group_210" data-name="Group 210"
transform="translate(-339.789 -1315.282)">
<path id="Path_218" d="M394.82 1315.282h-21.671a9.784
9.784 0 0 0 9.784 9.778h3.986v3.857a9.784 9.784 0 0 0 9.784 9.771v-21.523a1.884
1.884 0 0 0-1.883-1.883z" fill="#fff" data-name="Path 218"
transform="translate(-11.914)"></path>
<path id="Path_219" d="M378.14 1332.072h-21.671a9.778
9.778 0 0 0 9.778 9.778h4.018v3.857a9.784 9.784 0 0 0 9.752 9.778v-21.536a1.877
1.877 0 0 0-1.877-1.877z" fill="#fff" data-name="Path 219"
transform="translate(-5.957 -5.996)"></path>
<path id="Path_220" d="M361.46 1348.862h-21.671a9.778
9.778 0 0 0 9.778 9.778h3.992v3.857a9.778 9.778 0 0 0 9.778 9.778v-21.529a1.883
1.883 0 0 0-1.877-1.884z" fill="#fff" data-name="Path 220"
transform="translate(0 -11.993)"></path>
+
+<style>
+/* Per-icon brand color overrides on hover. Use !important to override inline
fills. */
+.icon-github:hover svg path,
+.icon-github:hover svg circle { fill: #24292e !important; }
+.icon-github-issues:hover svg path,
+.icon-github-issues:hover svg circle { fill: #24292e !important; }
+.icon-twitter:hover svg path,
+.icon-twitter:hover svg circle { fill: #1DA1F2 !important; }
+.icon-slack:hover svg path,
+.icon-slack:hover svg circle { fill: #4A154B !important; }
+.icon-youtube:hover svg path,
+.icon-youtube:hover svg circle { fill: #FF0000 !important; }
+.icon-stackoverflow:hover svg path,
+.icon-stackoverflow:hover svg circle { fill: #F48024 !important; }
+.icon-linkedin:hover svg path,
+.icon-linkedin:hover svg circle { fill: #0A66C2 !important; }
+.icon-facebook:hover svg path,
+.icon-facebook:hover svg circle { fill: #1877F2 !important; }
+</style>
</g>
</svg>
</a>
- <a class="footer-section__media-section--link" target="_blank"
href="https://s.apache.org/airflow-slack";>
+ <a class="footer-section__media-section--link icon-slack"
target="_blank" href="https://s.apache.org/airflow-slack";>
<svg xmlns="http://www.w3.org/2000/svg"; width="45.073"
height="45.073" viewBox="0 0 45.073 45.073">
<g id="Group_208" data-name="Group 208"
transform="translate(-661.145 -806.287)">
<g id="Group_204" data-name="Group 204"
transform="translate(661.145 830.01)">
@@ -63,7 +103,7 @@
</a>
- <a class="footer-section__media-section--link" target="_blank"
href="https://stackoverflow.com/questions/tagged/airflow";>
+ <a class="footer-section__media-section--link icon-stackoverflow"
target="_blank" href="https://stackoverflow.com/questions/tagged/airflow";>
<svg xmlns="http://www.w3.org/2000/svg"; width="37.647"
height="44.6" viewBox="0 0 37.647 44.6">
<g id="Group_209" data-name="Group 209"
transform="translate(-645.2 -975.455)">
<path id="Path_216" d="M677.028
1043.1v-11.948h3.966v15.914H645.2v-15.914h3.966v11.948z" fill="#fff"
data-name="Path 216" transform="translate(0 -27.014)"></path>
@@ -73,7 +113,7 @@
</a>
- <a class="footer-section__media-section--link" target="_blank"
href="https://www.youtube.com/channel/UCSXwxpWZQ7XZ1WL3wqevChA";>
+ <a class="footer-section__media-section--link icon-youtube"
target="_blank" href="https://www.youtube.com/channel/UCSXwxpWZQ7XZ1WL3wqevChA";>
<svg xmlns="http://www.w3.org/2000/svg"; width="49.594"
height="34.941" viewBox="0 0 49.594 34.941">
<path id="Path_223" d="M1124.557 1230a6.232 6.232 0 0
0-4.385-4.413c-3.867-1.043-19.376-1.043-19.376-1.043s-15.508 0-19.376
1.043a6.232 6.232 0 0 0-4.385 4.413c-1.036 3.893-1.036 12.014-1.036 12.014s0
8.122 1.036 12.015a6.232 6.232 0 0 0 4.385 4.413c3.867 1.043 19.376 1.043
19.376 1.043s15.509 0 19.376-1.043a6.232 6.232 0 0 0 4.385-4.413c1.036-3.893
1.036-12.015 1.036-12.015s.001-8.123-1.036-12.014zm-28.833
19.388v-14.748l12.962 7.374z" fill="#fff" data-name="Path 223 [...]
</svg>
