Use social images in home page

assets/css/home.scss

@@ -5,4 +5,36 @@
     margin: 15vh auto 0 auto;
     max-width: 900px;
     padding: 0 40px;
+
+    ul {
+        list-style: none;
+
+        li {
+            margin: 4px 0px;
+
+            img,
+            a {
+                vertical-align: middle;
+            }
+        }
+    }
+
+    img.social-icon {
+        display: inline;
+        width: 14px;
+        margin-right: 4px;
+
+        &.dark-only {
+            display: none;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        img.social-icon.light-only {
+            display: none;
+        }
+        img.social-icon.dark-only {
+            display: inline;
+        }
+    }
 }

assets/css/main.scss

@@ -20,6 +20,7 @@ a {
     }
 }
 
-p {
+p,
+ul {
     font-size: 16px;
 }

index.md

@@ -12,11 +12,20 @@ I write software at a startup in San Francisco called [Zenput](https://www.zenpu
 
 If you're here for my resume, you can find it [here](/assets/downloads/resume.pdf). Otherwise, maybe one of the following is what you're looking for:
 
--   👥  [LinkedIn](https://www.linkedin.com/in/davidofwatkins/)
--   👨‍💻  [Github](https://github.com/davidofwatkins)
--   ⏯️  [YouTube](https://www.youtube.com/@davidofwatkins)
--   🐦  [Twitter](https://twitter.com/{{ site.twitter }})
--   🔒  [Keybase](https://keybase.io/davidofwatkins)
+-   <img class="social-icon" aria-hidden="true" src="/assets/i/social-icons/linkedin.svg" />
+    [LinkedIn](https://www.linkedin.com/in/davidofwatkins/)
+-   <img class="social-icon light-only" src="/assets/i/social-icons/github-light.svg" />
+    [Github](https://github.com/davidofwatkins)
+-   <img class="social-icon" aria-hidden="true" src="/assets/i/social-icons/youtube.svg" />
+    [YouTube](https://www.youtube.com/@davidofwatkins)
+-   <img class="social-icon" aria-hidden="true" src="/assets/i/social-icons/twitter.svg" />
+    [Twitter](https://twitter.com/{{ site.twitter }})
+-   <img class="social-icon" aria-hidden="true" src="/assets/i/social-icons/mastodon.svg" />
+    <a rel="me" href="https://mas.to/@davidofwatkins">Mastodon</a>
+-   <img class="social-icon" aria-hidden="true" src="/assets/i/social-icons/bluesky.svg" />
+    [Bluesky](https://bsky.app/profile/davidofwatkins.com)
+-   <img class="social-icon" aria-hidden="true" src="/assets/i/social-icons/keybase.svg" />
+    [Keybase](https://keybase.io/davidofwatkins)
 
 <br>