From d2c9f3fceb584a3c842503d36b9ddab57ed3c578 Mon Sep 17 00:00:00 2001
From: Seth Cottle <SethCottle@gmail.com>
Date: Fri, 28 Apr 2023 09:55:52 -0400
Subject: [PATCH] Bluesky Button

Includes Bluesky button.

Includes a few capitalization issue fixes for brands, and puts brands back in alphabetical order in `brands.css` that were added.
---
 css/brands.css           | 36 +++++++++++++++++++++++-------------
 images/icons/bluesky.svg |  9 +++++++++
 index.html               | 29 +++++++++++++++++------------
 3 files changed, 49 insertions(+), 25 deletions(-)
 create mode 100644 images/icons/bluesky.svg

diff --git a/css/brands.css b/css/brands.css
index 4c14feb..6a5c6a8 100644
--- a/css/brands.css
+++ b/css/brands.css
@@ -154,6 +154,16 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Bluesky */
+.button.button-bluesky {
+  color: #000000;
+  background-color: #F3F9FF;
+}
+.button.button-bluesky:hover,
+.button.button-bluesky:focus {
+  filter: brightness(90%);
+}
+
 /* Buy Me a Coffee */
 .button.button-coffee {
   color: #100a26;
@@ -272,7 +282,7 @@ button:hover,
   filter: brightness(90%);
 }
 
-/* Gitlab */
+/* GitLab */
 .button.button-gitlab {
   color: #ffffff;
   background-color: #6151b2;
@@ -342,7 +352,7 @@ button:hover,
   filter: brightness(90%);
 }
 
-/* kickstarter */
+/* Kickstarter */
 .button.button-kickstarter {
   color: #ffffff;
   background-color: #05ce78;
@@ -475,7 +485,7 @@ button:hover,
   filter: brightness(90%);
 }
 
-/* Producthunt */
+/* Product Hunt */
 .button.button-producthunt {
   color: #da552f;
   border-style: solid;
@@ -671,6 +681,16 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Unsplash */
+.button.button-unsplash {
+  color: #000000;
+  background-color: #ffffff;
+}
+.button.button-unsplash:hover,
+.button.button-unsplash:focus {
+  filter: brightness(90%);
+}
+
 /* Untappd */
 .button.button-untappd {
   color: #ffffff;
@@ -761,13 +781,3 @@ button:hover,
 .button.button-yt:focus {
   filter: brightness(90%);
 }
-
-/* Unsplash */
-.button.button-unsplash {
-  color: #000000;
-  background-color: #ffffff;
-}
-.button.button-unsplash:hover,
-.button.button-unsplash:focus {
-  filter: brightness(90%);
-}
diff --git a/images/icons/bluesky.svg b/images/icons/bluesky.svg
new file mode 100644
index 0000000..161cf66
--- /dev/null
+++ b/images/icons/bluesky.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="4" fill="url(#paint0_linear_610_376)"/>
+<defs>
+<linearGradient id="paint0_linear_610_376" x1="12" y1="0" x2="12" y2="24" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0066FF"/>
+<stop offset="1" stop-color="#71C0FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/index.html b/index.html
index 63450a5..2fb786e 100644
--- a/index.html
+++ b/index.html
@@ -102,11 +102,6 @@
             <img class="icon" src="images/icons/github.svg" alt="GitHub Logo">GitHub</a>
         <br>
 
-        <!-- Twitter -->
-        <a class="button button-twit" href="#" target="_blank" rel="noopener">
-            <img class="icon" src="images/icons/twitter.svg" alt="Twitter Logo">Twitter</a>
-        <br>
-
         <!-- Instagram -->
         <a class="button button-instagram" href="#" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/instagram.svg" alt="Instagram Logo">Instagram</a>
@@ -127,6 +122,16 @@
             <img class="icon" src="images/icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a>
         <br>
 
+        <!-- Twitter -->
+        <a class="button button-twit" href="#" target="_blank" rel="noopener">
+            <img class="icon" src="images/icons/twitter.svg" alt="Twitter Logo">Twitter</a>
+        <br>
+
+        <!-- TikTok -->
+        <a class="button button-tiktok" href="#" target="_blank" rel="noopener">
+            <img class="icon" src="images/icons/tiktok.svg" alt="TikTok Logo">TikTok</a>
+        <br>
+
         <!-- YouTube -->
         <a class="button button-yt" href="#" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/youtube.svg" alt="YouTube Logo">YouTube</a>
@@ -142,7 +147,7 @@
             <img class="icon" src="images/icons/twitch.svg" alt="Twitch Logo">Twitch</a>
         <br>
 
-        <!-- ProductHunt -->
+        <!-- Product Hunt -->
         <a class="button button-producthunt" href="#" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/producthunt.svg" alt="Product Hunt Logo">Product Hunt</a>
         <br>
@@ -212,6 +217,11 @@
             <img class="icon" src="images/icons/mastodon.svg" alt="Mastodon Logo">Mastodon</a>
         <br>
 
+        <!-- Bluesky -->
+        <a class="button button-bluesky" href="#" target="_blank" rel="me noopener">
+            <img class="icon" src="images/icons/bluesky.svg" alt="Bluesky Logo">Bluesky</a>
+        <br>
+
         <!-- Medium -->
         <a class="button button-medium" href="#" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/medium.svg" alt="Medium Logo">Medium</a>
@@ -222,11 +232,6 @@
             <img class="icon" src="images/icons/pinterest.svg" alt="Pinterest Logo">Follow on Pinterest</a>
         <br>
 
-        <!-- TikTok -->
-        <a class="button button-tiktok" href="#" target="_blank" rel="noopener">
-            <img class="icon" src="images/icons/tiktok.svg" alt="TikTok Logo">TikTok</a>
-        <br>
-
         <!-- Email -->
         <a class="button button-default" href="#" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/email.svg" alt="Email Icon">hello@littlelink.io</a>
@@ -337,7 +342,7 @@
             <img class="icon" src="images/icons/skoob.svg" alt="Skoob Logo">Skoob</a>
         <br>
 
-        <!-- Gitlab -->
+        <!-- GitLab -->
         <a class="button button-gitlab" href="#" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/gitlab.svg" alt="GitLab Logo">GitLab</a>
         <br>