social media icons

vocodes/src/App.scss

@@ -70,6 +70,14 @@ footer {
   color: $light-text-color;
 }
 
+.social {
+  img {
+    max-width: 70px;
+    max-height: 70px;
+    padding: 1em;
+  }
+}
+
 nav {
   font-family: "Fugaz One";
   margin: 0.2em 0 0 0;
@@ -183,5 +191,12 @@ nav {
   footer p:after {
     content: ' '; // Not sure why the space disappears when inline.
   }
-}
 
+  .social {
+    img {
+      max-width: 50px;
+      max-height: 50px;
+      padding: 0.2em;
+    }
+  }
+}

vocodes/src/navigation/Footer.tsx

@@ -18,6 +18,11 @@ function Footer(props: Props) {
         <a href="#terms" 
           onClick={() => props.switchModeCallback(Mode.TERMS_MODE)}>terms of use</a>.
       </p>
+      <div className="social">
+        <a href="https://discord.gg/wr82xGc" target="_blank" rel="noopener noreferrer"><img src="/social-icons/016-discord.png" alt="Join us on Discord!" /></a>
+        <a href="https://twitter.com/echelon" target="_blank" rel="noopener noreferrer"><img src="/social-icons/096-twitter.png" alt="Twitter" /></a>
+        <a href="https://facebook.com/vocodes" target="_blank" rel="noopener noreferrer"><img src="/social-icons/024-facebook.png" alt="Facething" /></a>
+      </div>
     </footer>
   )
 }