This is an automated email from the ASF dual-hosted git repository. kaxilnaik pushed a commit to branch staging in repository https://gitbox.apache.org/repos/asf/airflow-site.git
commit b13ad9bf3ae7ea7b56a57e46cd5b2a67b666fa2a 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>
