Brands & Index

Updated css/brands to be in alphabetical order. Slight tweaks to index.html organization.

css/brands.css

@@ -124,16 +124,6 @@ button:hover,
   filter: brightness(90%);
 }
 
-/* Ko-fi */
-.button.button-ko-fi {
-  color: #ffffff;
-  background-color: #13C3FF;
-}
-.button.button-ko-fi:hover,
-.button.button-ko-fi:focus {
-  filter: brightness(90%);
-}
-
 /* Cash App */
 .button.button-cashapp {
   color: #ffffff;
@@ -174,19 +164,6 @@ button:hover,
   filter: brightness(90%);
 }
 
-/* Redbubble */
-.button.button-redbubble {
-  color: #e41321;
-  border-style: solid;
-  border-color: #e41321;
-  border-width: 2px;
-  background-color: #ffffff;
-}
-.button.button-redbubble:hover,
-.button.button-redbubble:focus {
-  filter: brightness(90%);
-}
-
 /* Facebook */
 .button.button-faceb {
   color: #ffffff;
@@ -235,7 +212,7 @@ button:hover,
   filter: brightness(90%);
 }
 
-/* Github */
+/* GitHub */
 .button.button-github {
   color: #ffffff;
   background-color: #000000;
@@ -275,6 +252,16 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Hashnode */
+.button.button-hashnode {
+  color: #000000;
+  background-color: #ffffff;
+}
+.button.button-hashnode:hover,
+.button.button-hashnode:focus {
+  filter: brightness(90%);
+}
+
 /* Instagram */
 .button.button-instagram {
   color: #ffffff;
@@ -305,6 +292,26 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Ko-fi */
+.button.button-ko-fi {
+  color: #ffffff;
+  background-color: #13C3FF;
+}
+.button.button-ko-fi:hover,
+.button.button-ko-fi:focus {
+  filter: brightness(90%);
+}
+
+/* Letterboxd */
+.button.button-letterboxd {
+  color: #ffffff;
+  background-color: #2c3440;
+}
+.button.button-letterboxd:hover,
+.button.button-letterboxd:focus {
+  filter: brightness(90%);
+}
+
 /* LinkedIn */
 .button.button-linked {
   color: #ffffff;
@@ -401,6 +408,19 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Redbubble */
+.button.button-redbubble {
+  color: #e41321;
+  border-style: solid;
+  border-color: #e41321;
+  border-width: 2px;
+  background-color: #ffffff;
+}
+.button.button-redbubble:hover,
+.button.button-redbubble:focus {
+  filter: brightness(90%);
+}
+
 /* Reddit */
 .button.button-reddit {
   color: #000000;
@@ -551,16 +571,6 @@ button:hover,
   filter: brightness(90%);
 }
 
-/* Venmo */
-.button.button-venmo {
-  color: #ffffff;
-  background-color: #008CFF;
-}
-.button.button-venmo:hover,
-.button.button-venmo:focus {
-  filter: brightness(90%);
-}
-
 /* Untappd */
 .button.button-untappd {
   color: #ffffff;
@@ -571,6 +581,16 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Venmo */
+.button.button-venmo {
+  color: #ffffff;
+  background-color: #008CFF;
+}
+.button.button-venmo:hover,
+.button.button-venmo:focus {
+  filter: brightness(90%);
+}
+
 /* Vimeo */
 .button.button-vimeo {
   color: #ffffff;
@@ -641,23 +661,3 @@ button:hover,
 .button.button-yt:focus {
   filter: brightness(90%);
 }
-
-/* Letterboxd */
-.button.button-letterboxd {
-  color: #ffffff;
-  background-color: #2c3440;
-}
-.button.button-letterboxd:hover,
-.button.button-letterboxd:focus {
-  filter: brightness(90%);
-}
-
-/* hashnode */
-.button.button-hashnode {
-  color: #323335;
-  background-color: #ffffff;
-}
-.button.button-hashnode:hover,
-.button.button-hashnode:focus {
-  filter: brightness(90%);
-}

index.html

@@ -23,14 +23,15 @@
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <link rel="stylesheet" href="css/normalize.css">
 
-  <!-- Themes:
+    <!-- Themes:
-         Auto:   css/skeleton-auto.css
+            Auto:   css/skeleton-auto.css
-         Light:  css/skeleton-light.css
+            Light:  css/skeleton-light.css
-         Dark:   css/skeleton-dark.css
+            Dark:   css/skeleton-dark.css
-  -->
+     -->
-  <link rel="stylesheet" href="css/skeleton-auto.css">
+    <link rel="stylesheet" href="css/skeleton-auto.css">
 
-  <link rel="stylesheet" href="css/brands.css">
+    <!-- Brand Styles -->
+    <link rel="stylesheet" href="css/brands.css">
 
 
   <!-- Favicon
@@ -245,11 +246,6 @@
             <img class="icon" src="images/icons/etsy.svg" alt="Etsy Logo">Etsy</a>
         <br>
 
-        <!-- Redbubble -->
-        <a class="button button-redbubble" href="#" target="_blank" rel="noopener">
-            <img class="icon" src="images/icons/redbubble.svg" alt="Redbubble Logo">Redbubble</a>
-        <br>
-
         <!-- Tumblr -->
         <a class="button button-tumb" href="#" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/tumblr.svg" alt="Tumblr Logo">Tumblr</a>
@@ -365,6 +361,11 @@
             <img class="icon" src="images/icons/dev_to.svg" alt="dev.to Logo">dev.to</a>
         <br>
 
+        <!-- Redbubble -->
+        <a class="button button-redbubble" href="#" target="_blank" rel="noopener">
+            <img class="icon" src="images/icons/redbubble.svg" alt="Redbubble Logo">Redbubble</a>
+        <br>
+
         <!-- OnlyFans -->
         <a class="button button-onlyfans" href="#" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/onlyfans.svg" alt="Only Fans Logo">OnlyFans (18+)</a>
@@ -405,7 +406,7 @@
             <img class="icon" src="images/icons/letterboxd.svg" alt="Letterboxd Logo">Letterboxd</a>
         <br>
 
-        <!-- hashnode -->
+        <!-- Hashnode -->
         <a class="button button-hashnode" href="#" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/hashnode.svg" alt="hashnode Logo">Hashnode</a>
         <br>