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

@@ -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%);
-}

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>

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>
@@ -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>