feat(footer): add Fediverse link and improve social icons layout

Author: kumy

website/app-templates/smarty/footer.tpl

@@ -23,9 +23,30 @@
         {t escape=no url={'hall_of_fame'|alias}}Designed with <abbr title="love">💗</abbr> by <a id="footer-team" href="%1">The GeoKrety Team</a>{/t}
     </p>
     <ul class="social_footer_ul text-center">
-        <li><a id="footer-facebook" href="https://www.facebook.com/groups/1624761011150615/about/">{fa icon="facebook"}</a></li>
-        <li><a id="footer-twitter" href="https://twitter.com/geokrety">{fa icon="twitter"}</a></li>
-        <li><a id="footer-instagram" href="https://www.instagram.com/explore/tags/geokrety/">{fa icon="instagram"}</a></li>
+        <li>
+            <a id="footer-facebook" href="https://www.facebook.com/groups/1624761011150615/about/" target="_blank" rel="noopener" title="{t}Join the GeoKrety community on Facebook{/t}">
+                {fa icon="facebook"}
+                <span class="sr-only">{t}Facebook{/t}</span>
+            </a>
+        </li>
+        <li>
+            <a id="footer-twitter" href="https://twitter.com/geokrety" target="_blank" rel="noopener" title="{t}Follow GeoKrety on X (Twitter){/t}">
+                {fa icon="twitter"}
+                <span class="sr-only">{t}X (Twitter){/t}</span>
+            </a>
+        </li>
+        <li>
+            <a id="footer-instagram" href="https://www.instagram.com/explore/tags/geokrety/" target="_blank" rel="noopener" title="{t}Explore GeoKrety on Instagram{/t}">
+                {fa icon="instagram"}
+                <span class="sr-only">{t}Instagram{/t}</span>
+            </a>
+        </li>
+        <li>
+            <a id="footer-fediverse" href="{GK_SITE_FEDIVERSE_URL}" rel="me noopener" target="_blank" title="{t}Join us on the Fediverse{/t}">
+                {fa icon="rss"}
+                <span class="sr-only">{t}Fediverse{/t}</span>
+            </a>
+        </li>
     </ul>
     <small class="pull-right">
         {include file='elements/version.tpl'}

website/public/app-ui/css/footer.scss

@@ -25,28 +25,38 @@ body > {
 }
 
 .social_footer_ul {
-  display: table;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
   margin: 15px auto 0;
   padding: 0;
   list-style-type: none;
 }
 
 .social_footer_ul li {
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 10px;
-  float: left;
+  display: flex;
+  align-items: center;
 }
 
 .social_footer_ul li a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
   color: #23527c;
   border: 1px solid #23527c;
-  padding: 8px;
   border-radius: 50%;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.social_footer_ul li a:hover,
+.social_footer_ul li a:focus {
+  background-color: rgba(35, 82, 124, 0.1);
+  color: #23527c;
 }
 
 .social_footer_ul li i {
-  width: 20px;
-  height: 20px;
-  text-align: center;
+  font-size: 18px;
 }