diff --git a/css/brands.css b/css/brands.css index 60ec68d..a17bbf6 100644 --- a/css/brands.css +++ b/css/brands.css @@ -18,7 +18,6 @@ * 12/29/2014 */ - /* Table of contents –––––––––––––––––––––––––––––––––––––––––––––––––– @@ -27,7 +26,6 @@ */ - /* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */ @@ -39,27 +37,29 @@ button { text-align: center; vertical-align: middle; font-size: 18px; - width: 300px; + width: 277px; font-weight: 700; line-height: 48px; letter-spacing: 0.1px; white-space: wrap; border-radius: 8px; cursor: pointer; - } +} button:hover, .button:focus { color: #333; border-color: #888; - outline: 0; } + outline: 0; +} .button.button-primary { - color: #FFF; - filter: brightness(90%) } + color: #fff; + filter: brightness(90%); +} .button.button-primary:hover, .button.button-primary:focus { - color: #FFF; - filter: brightness(90%) } - + color: #fff; + filter: brightness(90%); +} /* Brand Icons –––––––––––––––––––––––––––––––––––––––––––––––––– */ @@ -71,249 +71,73 @@ button:hover, height: 20px; } - /* Brand Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Default (this is great for your own brand color!) */ .button.button-default { - color: #FFFFFF; - background-color: #0085FF } + color: #ffffff; + background-color: #0085ff; +} .button.button-default:hover, .button.button-default:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Discord */ .button.button-discord { - color: #FFFFFF; - background-color: #5865F2 } + color: #ffffff; + background-color: #5865f2; +} .button.button-discord:hover, .button.button-discord:focus { - filter: brightness(90%) } - -/* Facebook */ -.button.button-facebook { - color: #FFFFFF; - background-color: #1877f2 } -.button.button-facebook:hover, -.button.button-facebook:focus { - filter: brightness(90%) } - -/* Facebook Messenger */ -.button.button-messenger { - color: #FFFFFF; - background-image: linear-gradient(25deg,#0099FF, #5F5DFF,#A033FF, #C740CC, #FF5280, #FF7061) } -.button.button-messenger:hover, -.button.button-messenger:focus { - filter: brightness(90%) } - -/* Figma */ -.button.button-figma { - color: #FFFFFF; - background-color: #000000 } -.button.button-figma:hover, -.button.button-figma:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Github */ .button.button-github { - color: #FFFFFF; - background-color: #000000 } + color: #ffffff; + background-color: #000000; +} .button.button-github:hover, .button.button-github:focus { - filter: brightness(90%) } + filter: brightness(90%); +} -/* Goodreads */ -.button.button-goodreads { - color: #333333; - background-color: #F3F1E6 } -.button.button-goodreads:hover, -.button.button-goodreads:focus { - filter: brightness(90%) } - -/* Instagram */ -.button.button-instagram { - color: #FFFFFF; - background-image: linear-gradient(-135deg,#1400c8,#b900b4,#f50000) } -.button.button-instagram:hover, -.button.button-instagram:focus { - filter: brightness(90%) } - -/* Kit */ -.button.button-kit { - color: #FFFFFF; - background-color: #000000 } -.button.button-kit:hover, -.button.button-kit:focus { - filter: brightness(90%) } - -/* LinkedIn */ -.button.button-linkedin { - color: #FFFFFF; - background-color: #2867B2 } -.button.button-linkedin:hover, -.button.button-linkedin:focus { - filter: brightness(90%) } - -/* Mastodon */ -.button.button-mastodon { - color: #FFFFFF; - background-color: #1F232B } -.button.button-mastodon:hover, -.button.button-mastodon:focus { - filter: brightness(90%) } - -/* Medium */ -.button.button-medium { - color: #FFFFFF; - background-color: #000000 } -.button.button-medium:hover, -.button.button-medium:focus { - filter: brightness(90%) } - -/* Pinterest */ -.button.button-pinterest { - color: #000000; - background-color: #FFE2EB } -.button.button-pinterest:hover, -.button.button-pinterest:focus { - filter: brightness(90%) } - -/* Producthunt */ -.button.button-producthunt { - color: #DA552F; - border-style: solid; - border-color: #DA552F; - border-width: 2px; - background-color: #FFFFFF } -.button.button-producthunt:hover, -.button.button-producthunt:focus { - filter: brightness(90%) } - -/* Reddit */ -.button.button-reddit { - color: #000000; - background-color: #D7DFE2 } -.button.button-reddit:hover, -.button.button-reddit:focus { - filter: brightness(90%) } - -/* Skoob */ -.button.button-skoob { - color: #FFFFFF; - background-color: #3189C8 } -.button.button-skoob:hover, -.button.button-skoob:focus { - filter: brightness(90%) } - -/* Snapchat */ -.button.button-snapchat { - color: #000000; - background-color: #fffc00 } -.button.button-snapchat:hover, -.button.button-snapchat:focus { - filter: brightness(90%) } - -/* SoundCloud */ -.button.button-soundcloud { - color: #FFFFFF; - background-color: #ff5500 } -.button.button-soundcloud:hover, -.button.button-soundcloud:focus { - filter: brightness(90%) } - -/* Spotify */ -.button.button-spotify { - color: #FFFFFF; - background-color: #000000 } -.button.button-spotify:hover, -.button.button-spotify:focus { - filter: brightness(90%) } - -/* Steam */ -.button.button-steam { - color: #FFFFFF; - background-color: #171a21 } -.button.button-steam:hover, -.button.button-steam:focus { - filter: brightness(90%) } - /* Telegram */ .button.button-telegram { - color: #FFFFFF; - background-color: #3faee8 } + color: #ffffff; + background-color: #3faee8; +} .button.button-telegram:hover, .button.button-telegram:focus { - filter: brightness(90%) } - -/* TikTok */ -.button.button-tiktok { - color: #FFFFFF; - background-color: #000000 } -.button.button-tiktok:hover, -.button.button-tiktok:focus { - filter: brightness(90%) } - -/* Tumblr */ -.button.button-tumblr { - color: #FFFFFF; - background-color: #131313 } -.button.button-tumblr:hover, -.button.button-tumblr:focus { - filter: brightness(90%) } - -/* Twitch */ -.button.button-twitch { - color: #FFFFFF; - background-color: #9146ff } -.button.button-twitch:hover, -.button.button-twitch:focus { - filter: brightness(90%) } + filter: brightness(90%); +} /* Twitter */ .button.button-twitter { - color: #FFFFFF; - background-color: #1DA1F2 } + color: #ffffff; + background-color: #1da1f2; +} .button.button-twitter:hover, .button.button-twitter:focus { - filter: brightness(90%) } + filter: brightness(90%); +} -/* Vimeo */ -.button.button-vimeo { - color: #FFFFFF; - background-color: #1ab7ea } -.button.button-vimeo:hover, -.button.button-vimeo:focus { - filter: brightness(90%) } +.spacing { + padding: 15px; +} -/* PayPal */ -.button.button-paypal { - color: #FFFFFF; - background-color: #003087 } -.button.button-paypal:hover, -.button.button-paypal:focus { - filter: brightness(90%) } +.tab-col { + font-size: xx-large; + text-decoration: underline; +} -/* YouTube */ -.button.button-youtube { - color: #FFFFFF; - background-color: #000000 } -.button.button-youtube:hover, -.button.button-youtube:focus { - filter: brightness(90%) } +.hero { + padding-top: 25px; + padding-bottom: 25px; +} -/* WhatsApp */ -.button.button-whatsapp { - color: #FFFFFF; - background-color: #455A64 } -.button.button-whatsapp:hover, -.button.button-whatsapp:focus { - filter: brightness(90%) } - -/* Wordpress */ -.button.button-wordpress { - color: #FFFFFF; - background-color: #21759b } -.button.button-wordpress:hover, -.button.button-wordpress:focus { - filter: brightness(90%) } +body { + background-color: #ffebcd; +} diff --git a/index.html b/index.html index b0540f0..f9c03a6 100644 --- a/index.html +++ b/index.html @@ -1,42 +1,41 @@ -
- - - -LittleLink is an open source DIY alternative to services like Linktree and many.link. LittleLink was built using Skeleton, a dead simple, responsive boilerplate—we’ve just created some branded buttons and stripped out the things you won't need. 😊
+ - +JODC | +OSDC | +
---|---|
+
+ - - - - - + + - - + + - - + + + |
+
+
+ - - + + - - + + - - + + + |
+
Build your own by forking LittleLink.
- ++ Built with + LittleLink + ❤️. +
+