refactor: remplacer section contact textuelle par icônes SVG

src/_includes/partials/contact.njk

@@ -5,18 +5,29 @@
             {{ t.contact.lede | safe }}
         </p>
     </div>
-    <div class="contact-grid">
+    <div class="contact-socials">
         {% for section in t.contact.sections %}
-        <div class="contact-card">
-            <h3>{{ section.title }}</h3>
-            <div class="contact-links">
             {% for link in section.links %}
-                <a href="{{ link.url }}"{% if link.url.startsWith('http') %} target="_blank"{% endif %}>
+            <a href="{{ link.url }}" title="{{ link.text }}"{% if link.url.startsWith('http') %} target="_blank" rel="noopener noreferrer"{% endif %} class="contact-social-link">
-                    {{ link.text }}
+                {% if link.text.toLowerCase().includes('email') %}
+                    <img src="{{ '/assets/icons/social/email.svg' | cdn }}" alt="Email" loading="lazy">
+                {% elif link.text.toLowerCase().includes('whatsapp') %}
+                    <img src="{{ '/assets/icons/social/whatsapp.svg' | cdn }}" alt="WhatsApp" loading="lazy">
+                {% elif link.text.toLowerCase().includes('telegram') %}
+                    <img src="{{ '/assets/icons/social/telegram.svg' | cdn }}" alt="Telegram" loading="lazy">
+                {% elif link.text.toLowerCase().includes('twitter') or link.text.toLowerCase().includes('x (') %}
+                    <img src="{{ '/assets/icons/social/x.svg' | cdn }}" alt="X" loading="lazy">
+                {% elif link.text.toLowerCase().includes('tiktok') %}
+                    <img src="{{ '/assets/icons/social/tiktok.svg' | cdn }}" alt="TikTok" loading="lazy">
+                {% elif link.text.toLowerCase().includes('discord') %}
+                    <img src="{{ '/assets/icons/social/discord.svg' | cdn }}" alt="Discord" loading="lazy">
+                {% elif link.text.toLowerCase().includes('stoat') %}
+                    <img src="{{ '/assets/icons/social/stoat.svg' | cdn }}" alt="Stoat" loading="lazy">
+                {% elif link.text.toLowerCase().includes('labola') or link.text.toLowerCase().includes('gitea') %}
+                    <img src="{{ '/assets/icons/social/gitea.svg' | cdn }}" alt="Labola" loading="lazy">
+                {% endif %}
             </a>
             {% endfor %}
-            </div>
-        </div>
         {% endfor %}
     </div>
 </section>

src/assets/css/styles.css

@@ -1190,39 +1190,49 @@ html.light-theme .hero::before {
     color: var(--or-oki);
 }
 
-.contact-grid {
+.contact-socials {
-    display: grid;
+    display: flex;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    justify-content: center;
+    align-items: center;
     gap: 2rem;
+    flex-wrap: wrap;
     max-width: 1200px;
     margin: 0 auto;
 }
 
-.contact-card {
+.contact-social-link {
-    text-align: center;
+    display: inline-flex;
-}
+    align-items: center;
-
+    justify-content: center;
-.contact-card h3 {
+    width: 4rem;
+    height: 4rem;
     color: var(--or-oki);
-    margin-bottom: 1rem;
-    font-size: 1.1rem;
-}
-
-.contact-links {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    font-family: var(--font-body);
-}
-
-.contact-links a {
-    color: var(--blanc-creme);
     text-decoration: none;
-    transition: color 0.2s;
+    transition: transform 0.2s, opacity 0.2s;
+    border-radius: 8px;
+    background: rgba(253, 184, 19, 0.08);
 }
 
-.contact-links a:hover {
+.contact-social-link:hover {
-    color: var(--or-oki);
+    transform: scale(1.15);
+    background: rgba(253, 184, 19, 0.15);
+}
+
+.contact-social-link img {
+    width: 60%;
+    height: 60%;
+    object-fit: contain;
+}
+
+@media (min-width: 768px) {
+    .contact-socials {
+        gap: 2.5rem;
+    }
+
+    .contact-social-link {
+        width: 4.5rem;
+        height: 4.5rem;
+    }
 }
 
 /* Footer */