Replace social links with social icons

themes/svrjs/layout/_partial/footer.ejs

@@ -28,11 +28,11 @@
         </div>
         <div class="footer-column">
           <span class="footer-headline">Social</span>
-          <ul class="footer-list">
-            <li><a rel="me" href="https://mastodon.social/@svrjs">Mastodon</a></li>
-            <li><a rel="me" href="https://x.com/SVR_JS">X (Twitter)</a></li>
-            <li><a rel="me" href="https://bsky.app/profile/svrjs.org">Bluesky</a></li>
-            <li><a rel="me" href="https://odysee.com/@SVRJS">Odysee</a></li>
+          <ul class="footer-social">
+            <li><a rel="me" href="https://x.com/SVR_JS" title="X (Twitter)"><img src="/css/images/social/x.png" alt="X (Twitter)"></a></li>
+            <li><a rel="me" href="https://mastodon.social/@svrjs" title="Mastodon"><img src="/css/images/social/mastodon.png" alt="Mastodon"></a></li>
+            <li><a rel="me" href="https://bsky.app/profile/svrjs.org" title="Bluesky"><img src="/css/images/social/bluesky.png" alt="Bluesky"></a></li>
+            <li><a rel="me" href="https://odysee.com/@SVRJS" title="Odysee"><img src="/css/images/social/odysee.png" alt="Odysee"></a></li>
           </ul>
           <span class="footer-headline">Policies and Security</span>
           <ul class="footer-list">

themes/svrjs/source/css/_partial/footer.styl

@@ -55,3 +55,18 @@
   padding: 0
   margin-bottom: 1em
   list-style-type: none
+
+.footer-social
+  padding-left: 0
+  margin: 0.5em 0
+  list-style-type: none
+  li
+    display: inline
+  a:hover
+    img
+      opacity: 0.7
+  img
+    width: 40px
+    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1)
+    -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1)
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1)