From 7dfa5f24c82a7d3036b0caa1bfa050a79254a8b7 Mon Sep 17 00:00:00 2001
From: Filippo Fontana <filippofontana1998@gmail.com>
Date: Mon, 11 Mar 2024 13:38:20 +0100
Subject: [PATCH] Center contact icons in the footer

This commit changes the way contact icons are displayed in the footer:
instead of using <li> tags which inherit a 30px left margin, they are
now just simple <a> tags handled by flex to center them.

The new style rules are added to the `.icons` class in
`assets/css/theme.scss`.

Signed-off-by: Filippo Fontana <filippofontana1998@gmail.com>
---
 assets/css/theme.scss        | 11 ++++-------
 layouts/partials/footer.html | 10 +++-------
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/assets/css/theme.scss b/assets/css/theme.scss
index 95b78f4..043d570 100644
--- a/assets/css/theme.scss
+++ b/assets/css/theme.scss
@@ -276,13 +276,10 @@ a.fn-item {
 
 /* Footer Icons */
 .icons {
-  ol {
-    padding-left: 0;
-  }
-
-  li {
-    display: inline-block;
-  }
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  padding: 8px;
 }
 
 /* Footer Links */
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 30ce91c..c8ca859 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -19,13 +19,9 @@
 
     {{ if ne .Site.Params.footer.showContactIcons false }}
       <section class="icons">
-        <ol>
-          {{ range .Site.Params.contacts }}
-            <li>
-              <a href="{{ .url }}" aria-label='{{ i18n "{{ .label }}" }}'><i class="{{ .icon }}"></i></a>
-            </li>
-          {{ end }}
-        </ol>
+        {{ range .Site.Params.contacts }}
+          <a href="{{ .url }}" aria-label='{{ i18n "{{ .label }}" }}'><i class="{{ .icon }}"></i></a>
+        {{ end }}
       </section>
     {{ end }}