Added brand color css classes and updated README.md

README.md

@@ -24,7 +24,9 @@ It's very simple, follow these steps.
      media plaform of your choice, but this feature is optional, the link will
      be displayed in the themes color if unset. The currently supported platforms
      are:
-       - None, I will implement this feature in a future release
+       - YouTube, Pinterest, Twitter, TikTok, Telegram, Linkedin, Mastodon, Tumblr,
+       Discord, Twitch, Instagram, Flickr, Deviantart, Spotify, Snapchat, Reddit,
+       Soundcloud, VK, Steam
      - Place the link in the `link` property, this property is needed.
      - You can give the link a different text if you want with the `text` property.
      This is also optional.
@@ -37,7 +39,6 @@ It's very simple, follow these steps.
 
 # TODO
 
-- Different colors for different social media platforms
 - More themes
 
 --- 

source/_assets/sass/main.scss

@@ -43,7 +43,7 @@ body {
   width: 750px;
   max-width: 90%;
   align-items: center;
-}
+
   a {
     $height: 3rem;
     $transitionDuration: 0.25s;
@@ -67,4 +67,23 @@ body {
       color: $gradient2;
     }
   }
-//@TODO Add colors for different Platforms
+
+  @each $name, $color in $brandcolors {
+    .#{$name} {
+      border-color: $color;
+      color: $color;
+      &:hover {
+        background-color: $color;
+      }
+    }
+  }
+
+  .link {
+    border-color: $g_black;
+    color: $g_black;
+
+    &:hover {
+      background-color: $g_black;
+    }
+  }
+}

source/index.blade.php

@@ -15,11 +15,11 @@
                     {{ strtoupper($link->platform) }}
                 </a>
             @elseif (isset($link['text']) && !isset($link['color']))
-                <a href="{{$link->link}}" class="styledefault">
+                <a href="{{$link->link}}">
                     {{ strtoupper($link->text) }}
                 </a>
             @else
-                <a href="{{$link->link}}" class="sytledefault">
+                <a href="{{$link->link}}">
                     {{ strtoupper($link->platform) }}
                 </a>
             @endif