Enhance footer social links with names and improve accessibility features

hugo.yaml

@@ -6,6 +6,7 @@ theme: wikidarity
 # Social Links
 params:
   social:
-    - url: https://social.coop/@wikicafe
+    - name: Mastodon
+      url: https://social.coop/@wikicafe
       icon: font-awesome/mastodon.svg
       handle: "@wikicafe@social.coop"

themes/wikidarity/assets/css/main.css

@@ -276,8 +276,7 @@ footer {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
-    /* color: inherit; */
-    /* text-decoration: none; */
+    flex-wrap: wrap; 
   }
   
   .social-link:hover {
@@ -293,7 +292,6 @@ footer {
   .social-handle {
     font-size: 0.95rem;
   }
-  
 }
 
 /* 
@@ -328,4 +326,15 @@ footer {
       padding-bottom: 1rem;
     }
   }
+
+  footer {
+    .social-handle {
+      display: none;
+    }
+  
+    .social-icon svg {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+  }
 }

themes/wikidarity/layouts/partials/footer.html

@@ -8,7 +8,13 @@
     {{ with .Site.Params.social }}
       {{ range . }}
         <li>
-          <a href="{{ .url }}" target="_blank" rel="noopener noreferrer" class="social-link">
+          <a
+            href="{{ .url }}"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="social-link"
+            aria-label="Follow us on {{ .name }}"
+          >
             <span class="social-icon" aria-hidden="true">
               {{ with resources.Get (printf "icons/%s" .icon) }}
                 {{ .Content | safeHTML }}