fix: utiliser SVG inline avec currentColor pour footer et contact

This commit is contained in:
2026-07-06 22:42:41 +04:00
parent 5908b3f273
commit be73fb4a70
2 changed files with 24 additions and 24 deletions
+8 -8
View File
@@ -10,21 +10,21 @@
{% for link in section.links %}
<a href="{{ link.url }}" title="{{ link.text }}"{% if link.url.startsWith('http') %} target="_blank" rel="noopener noreferrer"{% endif %} class="contact-social-link">
{% if link.text.toLowerCase().includes('email') %}
<img src="{{ '/assets/icons/social/email.svg' | cdn }}" alt="Email" loading="lazy">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
{% elif link.text.toLowerCase().includes('whatsapp') %}
<img src="{{ '/assets/icons/social/whatsapp.svg' | cdn }}" alt="WhatsApp" loading="lazy">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.272-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.149-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.67-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.076 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421-7.403h-.004c-1.368 0-2.746.35-3.92 1.015-.48.253-.929.573-1.339.96-.41.386-.77.838-1.057 1.334-.288.495-.497 1.022-.62 1.566-.124.544-.128 1.105.008 1.646.136.541.407 1.048.789 1.486.381.438.866.787 1.414 1.023.549.236 1.148.354 1.755.354h.004c1.369 0 2.747-.35 3.92-1.015.48-.253.929-.573 1.339-.96.41-.386.77-.838 1.057-1.334.288-.495.497-1.022.62-1.566.124-.544.128-1.105-.008-1.646-.136-.541-.407-1.048-.789-1.486-.381-.438-.866-.787-1.414-1.023-.548-.236-1.147-.354-1.754-.354m0-2c1.657 0 3.312.425 4.757 1.228 1.445.803 2.667 1.946 3.493 3.312.826 1.366 1.241 2.907 1.241 4.462 0 1.556-.415 3.097-1.241 4.463-.826 1.366-2.048 2.509-3.493 3.312-1.445.803-3.1 1.228-4.757 1.228-1.657 0-3.312-.425-4.757-1.228-1.445-.803-2.667-1.946-3.493-3.312-.826-1.366-1.241-2.907-1.241-4.463 0-1.555.415-3.096 1.241-4.462.826-1.366 2.048-2.509 3.493-3.312 1.445-.803 3.1-1.228 4.757-1.228" transform="scale(0.04)"/></svg>
{% elif link.text.toLowerCase().includes('telegram') %}
<img src="{{ '/assets/icons/social/telegram.svg' | cdn }}" alt="Telegram" loading="lazy">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m5.894 8.221l-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.14-.357.36-.745.36-.531 0-.445-.389-.623-.866l-1.44-4.734c-.116-.36.027-.826.407-.826 1.827-.695 4.527-1.782 7.247-2.882.363-.14.855-.054.855.404z"/></svg>
{% elif link.text.toLowerCase().includes('twitter') or link.text.toLowerCase().includes('x (') %}
<img src="{{ '/assets/icons/social/x.svg' | cdn }}" alt="X" loading="lazy">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.657l-5.07-6.627-5.848 6.627h-3.306l7.73-8.835L.42 2.25h6.82l4.588 6.055L17.595 2.25h.649zm-1.106 17.611h1.828L7.084 4.126H5.117z"/></svg>
{% elif link.text.toLowerCase().includes('tiktok') %}
<img src="{{ '/assets/icons/social/tiktok.svg' | cdn }}" alt="TikTok" loading="lazy">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02C7.1.02 2.735 4.385 2.735 9.825c0 5.44 4.365 9.805 9.785 9.805 5.44 0 9.805-4.365 9.805-9.805C22.33 4.385 17.965.02 12.525.02zm1.68 13.645c-1.676 0-3.07-1.235-3.556-2.848H7.105v5.776c0 .92-.746 1.667-1.667 1.667-.92 0-1.667-.746-1.667-1.667V9.854c0-.92.746-1.667 1.667-1.667.92 0 1.667.746 1.667 1.667v.645h3.44c.946-1.628 2.776-2.736 4.9-2.736 3.015 0 5.466 2.45 5.466 5.466 0 3.015-2.45 5.466-5.466 5.466z"/></svg>
{% elif link.text.toLowerCase().includes('discord') %}
<img src="{{ '/assets/icons/social/discord.svg' | cdn }}" alt="Discord" loading="lazy">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37c-1.53-.75-3.15-1.3-4.85-1.66.22.4.42.82.62 1.24-2.28-.35-4.55-.35-6.83 0 .2-.42.4-.84.62-1.24-1.7.36-3.32.91-4.85 1.66-3.07 4.6-3.89 9.1-3.48 13.52 2.12 1.56 4.16 2.5 6.17 3.12.49-.67.92-1.37 1.29-2.1-.71-.27-1.39-.59-2.04-.96.17-.13.33-.26.49-.4 3.85 1.75 8.06 1.75 11.85 0 .16.14.32.27.49.4-.65.37-1.33.7-2.04.96.37.73.8 1.43 1.29 2.1 2.01-.62 4.05-1.56 6.17-3.12.41-4.42-.37-8.92-3.48-13.52zM8.02 15.33c-1.18 0-2.16-1.08-2.16-2.42 0-1.34.97-2.42 2.16-2.42 1.19 0 2.16 1.08 2.16 2.42 0 1.34-.97 2.42-2.16 2.42zm7.96 0c-1.19 0-2.16-1.08-2.16-2.42 0-1.34.97-2.42 2.16-2.42 1.18 0 2.16 1.08 2.16 2.42 0 1.34-.98 2.42-2.16 2.42z"/></svg>
{% elif link.text.toLowerCase().includes('stoat') %}
<img src="{{ '/assets/icons/social/stoat.svg' | cdn }}" alt="Stoat" loading="lazy">
<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><text x="12" y="16" text-anchor="middle" font-size="10" font-weight="bold" fill="currentColor" font-family="Arial">S</text></svg>
{% elif link.text.toLowerCase().includes('labola') or link.text.toLowerCase().includes('gitea') %}
<img src="{{ '/assets/icons/social/gitea.svg' | cdn }}" alt="Labola" loading="lazy">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
{% endif %}
</a>
{% endfor %}