diff --git a/README.md b/README.md index 30bd1a7..9fab784 100644 --- a/README.md +++ b/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 --- diff --git a/source/_assets/sass/main.scss b/source/_assets/sass/main.scss index cd69b7f..44d9377 100644 --- a/source/_assets/sass/main.scss +++ b/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; + } + } +} diff --git a/source/index.blade.php b/source/index.blade.php index b7edf79..9b5af14 100644 --- a/source/index.blade.php +++ b/source/index.blade.php @@ -15,11 +15,11 @@ {{ strtoupper($link->platform) }} @elseif (isset($link['text']) && !isset($link['color'])) - + {{ strtoupper($link->text) }} @else - + {{ strtoupper($link->platform) }} @endif