Use proper social media icons

commit 12e6295a26ed067cad051ca566c469de754f0333 Author: David Watkins <[email protected]> Date: Sun Mar 17 17:42:26 2024 -0700 Use social images in home page commit fb628091f7d57c55ccf5c13c07bec8b4ed6df92e Author: David Watkins <[email protected]> Date: Sun Mar 17 17:42:11 2024 -0700 Add social SVGs
davidofwatkins · Mar 18, 2024 · 304538b · 304538b
1 parent 521314e
commit 304538b
Show file tree

Hide file tree

Showing 11 changed files with 155 additions and 6 deletions.
diff --git a/assets/css/home.scss b/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;
+        }
+    }
 }
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -20,6 +20,7 @@ a {
     }
 }
 
-p {
+p,
+ul {
     font-size: 16px;
 }
diff --git a/assets/i/social-icons/bluesky.svg b/assets/i/social-icons/bluesky.svg
diff --git a/assets/i/social-icons/github-dark.svg b/assets/i/social-icons/github-dark.svg
diff --git a/assets/i/social-icons/github-light.svg b/assets/i/social-icons/github-light.svg
diff --git a/assets/i/social-icons/keybase.svg b/assets/i/social-icons/keybase.svg
diff --git a/assets/i/social-icons/linkedin.svg b/assets/i/social-icons/linkedin.svg
diff --git a/assets/i/social-icons/mastodon.svg b/assets/i/social-icons/mastodon.svg
diff --git a/assets/i/social-icons/twitter.svg b/assets/i/social-icons/twitter.svg
diff --git a/assets/i/social-icons/youtube.svg b/assets/i/social-icons/youtube.svg
diff --git a/index.md b/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:
 
--   👥 &nbsp;[LinkedIn](https://www.linkedin.com/in/davidofwatkins/)
--   👨‍💻 &nbsp;[Github](https://github.com/davidofwatkins)
--   ⏯️ &nbsp;[YouTube](https://www.youtube.com/@davidofwatkins)
--   🐦 &nbsp;[Twitter](https://twitter.com/{{ site.twitter }})
--   🔒 &nbsp;[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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,7 @@ a { @@
         }
     }
-    p {
+    p,
+    ul {
         font-size: 16px;
     }