Replace social links with social icons

backend/templates/index.html.template

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

frontend/css/main.css

@@ -257,6 +257,29 @@ a:hover {
   list-style-type: none;
 }
 
+.footer-social {
+  list-style-type: none;
+  padding-left: 0;
+  margin: 0.5em 0;
+}
+
+.footer-social li {
+  display: inline;
+}
+
+.footer-social a:hover img {
+  opacity: 0.7;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+  filter: alpha(opacity=70);
+}
+
+.footer-social 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);
+}
+
 img {
   border-style: none;
 }