littlelink/css/brands.css
Seth Cottle 4287e2b6bd LittleLink 2.0
Refactored `index.html` to be in alphabetical order. This will make it easier for people to quickly scan to find what they're looking for to remove anything they don't want. They can reorder in the priority that meets their needs.

Refactored `index.html` to streamline how each button line is showcased.

Refactored `brands.css` to be in alphabetical order.

Added to `brands.css` to include strokes around light and dark buttons that fail to meet background contrasts.

Icons are all now 24x24.

Quality controlled all icons and manually adjusted spacing.

Created a custom .SVG for any .PNG icons.

New LittleLink logo.
2023-04-28 22:19:02 -04:00

805 lines
15 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*
* littlelink.io
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/
/*
* Built using on:
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/
/* Table of contents
- Buttons
- Brand Styles
*/
/* Buttons
*/
.button,
button {
display: inline-block;
text-decoration: none;
height: 48px;
text-align: center;
vertical-align: middle;
font-size: 18px;
width: 300px;
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;
}
.button.button-primary {
color: #fff;
filter: brightness(90%);
}
.button.button-primary:hover,
.button.button-primary:focus {
color: #fff;
filter: brightness(90%);
}
/* Brand Icons
*/
.icon {
padding: 0px 8px 3.5px 0px;
vertical-align: middle;
width: 20px;
height: 20px;
}
/* Brand Styles
*/
/* Default (this is great for your own brand color!) */
.button.button-default {
color: #ffffff;
background-color: #2457F5;
}
.button.button-default:hover,
.button.button-default:focus {
filter: brightness(90%);
}
/* Amazon */
.button.button-amazon {
color: #000000;
background-color: #FFFFFF;
border: 1px solid #212121;
}
.button.button-amazon:hover,
.button.button-amazon:focus {
filter: brightness(90%);
}
/* Apple App Store */
.button.button-appstore {
color: #FFFFFF;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-appstore:hover,
.button.button-appstore:focus {
filter: brightness(90%);
}
/* Apple Music */
.button.button-apple-music {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-apple-music:hover,
.button.button-apple-music:focus {
filter: brightness(90%);
}
/* Apple Music Alt */
.button.button-apple-music-alt {
color: #ffffff;
background-image: linear-gradient(to bottom, #FB5C74, #FA233B);
}
.button.button-apple-music-alt:hover,
.button.button-apple-music-alt:focus {
filter: brightness(90%);
}
/* Apple Podcasts */
.button.button-apple-podcasts {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-apple-podcasts:hover,
.button.button-apple-podcasts:focus {
filter: brightness(90%);
}
/* Apple Podcasts Alt */
.button.button-apple-podcasts-alt {
color: #ffffff;
background-image: linear-gradient(to bottom, #F452FF, #832BC1);
}
.button.button-apple-podcasts-alt:hover,
.button.button-apple-podcasts-alt:focus {
filter: brightness(90%);
}
/* Bandcamp */
.button.button-bandcamp {
color: #ffffff;
background-color: #1d9fc3;
}
.button.button-bandcamp:hover,
.button.button-bandcamp:focus {
filter: brightness(90%);
}
/* Bluesky */
.button.button-bluesky {
color: #000000;
background-color: #F3F9FF;
border: 1px solid #212121;
}
.button.button-bluesky:hover,
.button.button-bluesky:focus {
filter: brightness(90%);
}
/* Buy Me a Coffee */
.button.button-coffee {
color: #100a26;
background-color: #ffdd00;
}
.button.button-coffee:hover,
.button.button-coffee:focus {
filter: brightness(90%);
}
/* Cash App */
.button.button-cash-app {
color: #ffffff;
background-image: linear-gradient(to bottom, #00d64b, #00c244);
}
.button.button-cash-app:hover,
.button.button-cash-app:focus {
filter: brightness(90%);
}
/* Clubhouse */
.button.button-clubhouse {
color: #1F1F1A;
background-color: #F1EFE3;
border: 1px solid #212121;
}
.button.button-clubhouse:hover,
.button.button-clubhouse:focus {
filter: brightness(90%);
}
/* dev.to */
.button.button-dev-to {
color: #000000;
background-color: #f5f5f5;
border: 1px solid #212121;
}
.button.button-dev-to:hover,
.button.button-dev-to:focus {
filter: brightness(90%);
}
/* Discord */
.button.button-discord {
color: #ffffff;
background-color: #5865f2;
}
.button.button-discord:hover,
.button.button-discord:focus {
filter: brightness(90%);
}
/* Etsy */
.button.button-etsy {
color: #ffffff;
background-color: #F45800;
}
.button.button-etsy:hover,
.button.button-etsy:focus {
filter: brightness(90%);
}
/* Facebook */
.button.button-faceb {
color: #ffffff;
background-color: #1877f2;
}
.button.button-faceb:hover,
.button.button-faceb: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;
border: 1px solid #FFFFFF;
}
.button.button-figma:hover,
.button.button-figma:focus {
filter: brightness(90%);
}
/* Flickr */
.button.button-flickr {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-flickr:hover,
.button.button-flickr:focus {
filter: brightness(90%);
}
/* GitHub */
.button.button-github {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-github:hover,
.button.button-github:focus {
filter: brightness(90%);
}
/* GitLab */
.button.button-gitlab {
color: #ffffff;
background-color: #6151b2;
}
.button.button-gitlab:hover,
.button.button-gitlab:focus {
filter: brightness(90%);
}
/* Goodreads */
.button.button-goodreads {
color: #333333;
background-color: #f3f1e6;
border: 1px solid #212121;
}
.button.button-goodreads:hover,
.button.button-goodreads:focus {
filter: brightness(90%);
}
/* Google Play Store */
.button.button-playstore {
color: #FFFFFF;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-playstore:hover,
.button.button-playstore:focus {
filter: brightness(90%);
}
/* Google Podcasts */
.button.button-google-podcasts {
color: #000000;
background-color: #FFFFFF;
border: 1px solid #212121;
}
.button.button-google-podcasts:hover,
.button.button-google-podcasts:focus {
filter: brightness(90%);
}
/* Google Scholar */
.button.button-google-scholar {
color: #000000;
background-color: #FFFFFF;
border: 1px solid #212121;
}
.button.button-google-scholar:hover,
.button.button-google-scholar:focus {
filter: brightness(90%);
}
/* Hashnode */
.button.button-hashnode {
color: #000000;
background-color: #ffffff;
border: 1px solid #212121;
}
.button.button-hashnode:hover,
.button.button-hashnode: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%);
}
/* Kickstarter */
.button.button-kickstarter {
color: #ffffff;
background-color: #05ce78;
}
.button.button-kickstarter:hover,
.button.button-kickstarter:focus {
filter: brightness(90%);
}
/* Kit */
.button.button-kit {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-kit:hover,
.button.button-kit:focus {
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;
border: 1px solid #FFFFFF;
}
.button.button-letterboxd:hover,
.button.button-letterboxd:focus {
filter: brightness(90%);
}
/* LinkedIn */
.button.button-linked {
color: #ffffff;
background-color: #2867b2;
}
.button.button-linked:hover,
.button.button-linked:focus {
filter: brightness(90%);
}
/* Mastodon */
.button.button-mastodon {
color: #ffffff;
background-color: #17063B;
border: 1px solid #FFFFFF;
}
.button.button-mastodon:hover,
.button.button-mastodon:focus {
filter: brightness(90%);
}
/* Medium */
.button.button-medium {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-medium:hover,
.button.button-medium:focus {
filter: brightness(90%);
}
/* Notion */
.button.button-notion {
color: #000000;
border: 1px solid #212121;
background-color: #ffffff;
}
.button.button-notion:hover,
.button.button-notion:focus {
filter: brightness(90%);
}
/* OnlyFans */
.button.button-onlyfans {
color: #ffffff;
background-color: #00AEEF;
}
.button.button-onlyfans:hover,
.button.button-onlyfans:focus {
filter: brightness(90%);
}
/* Patreon */
.button.button-patreon {
color: #ffffff;
background-color: #ff424d;
}
.button.button-patreon:hover,
.button.button-patreon:focus {
filter: brightness(90%);
}
/* PayPal */
.button.button-paypal {
color: #ffffff;
background-color: #003087;
}
.button.button-paypal:hover,
.button.button-paypal:focus {
filter: brightness(90%);
}
/* Pinterest */
.button.button-pinterest {
color: #000000;
background-color: #ffe2eb;
border: 1px solid #212121;
}
.button.button-pinterest:hover,
.button.button-pinterest:focus {
filter: brightness(90%);
}
/* Post.news */
.button.button-post-news {
color: #ffffff;
background-color: #678BFF;
}
.button.button-post-news:hover,
.button.button-post-news:focus {
filter: brightness(90%);
}
/* Product Hunt */
.button.button-product-hunt {
color: #da552f;
background-color: #ffffff;
border: 1px solid #212121;
}
.button.button-producthunt:hover,
.button.button-producthunt:focus {
filter: brightness(90%);
}
/* Redbubble */
.button.button-redbubble {
color: #e41321;
background-color: #ffffff;
border: 1px solid #212121;
}
.button.button-redbubble:hover,
.button.button-redbubble:focus {
filter: brightness(90%);
}
/* Reddit */
.button.button-reddit {
color: #000000;
background-color: #d7dfe2;
border: 1px solid #212121;
}
.button.button-reddit:hover,
.button.button-reddit:focus {
filter: brightness(90%);
}
/* Signal */
.button.button-signal {
color: #ffffff;
background-color: #3a76f0;
}
.button.button-signal:hover,
.button.button-signal: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: #191414;
background-color: #1db954;
}
.button.button-spotify:hover,
.button.button-spotify:focus {
filter: brightness(90%);
}
/* Spotify Alt */
.button.button-spotify-alt {
color: #FFFFFF;
background-color: #191414;
border: 1px solid #FFFFFF;
}
.button.button-spotify-alt:hover,
.button.button-spotify-alt:focus {
filter: brightness(90%);
}
/* Steam */
.button.button-steam {
color: #ffffff;
background-image: linear-gradient(90deg, #08BBFF, #2B75FF);
}
.button.button-steam:hover,
.button.button-steam:focus {
filter: brightness(90%);
}
/* Strava */
.button.button-strava {
color: #ffffff;
background-color: #fc5200;
}
.button.button-strava:hover,
.button.button-strava:focus {
filter: brightness(90%);
}
/* Substack */
.button.button-substack {
color: #ffffff;
background-color: #FF6719;
}
.button.button-substack:hover,
.button.button-substack:focus {
filter: brightness(90%);
}
/* Telegram */
.button.button-telegram {
color: #ffffff;
background-color: #3faee8;
}
.button.button-telegram:hover,
.button.button-telegram:focus {
filter: brightness(90%);
}
/* Threema */
.button.button-threema {
color: #000000;
background-color: #3fe669;
}
.button.button-threema:hover,
.button.button-threema:focus {
filter: brightness(90%);
}
/* TikTok */
.button.button-tiktok {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-tiktok:hover,
.button.button-tiktok:focus {
filter: brightness(90%);
}
/* Trello */
.button.button-trello {
color: #ffffff;
background-color: #0065ff;
}
.button.button-trello:hover,
.button.button-trello:focus {
filter: brightness(90%);
}
/* Tumblr */
.button.button-tumb {
color: #ffffff;
background-color: #131313;
border: 1px solid #FFFFFF;
}
.button.button-tumb:hover,
.button.button-tumb:focus {
filter: brightness(90%);
}
/* Twitch */
.button.button-twitch {
color: #ffffff;
background-color: #9146ff;
}
.button.button-twitch:hover,
.button.button-twitch:focus {
filter: brightness(90%);
}
/* Twitter */
.button.button-twit {
color: #ffffff;
background-color: #1da1f2;
}
.button.button-twit:hover,
.button.button-twit:focus {
filter: brightness(90%);
}
/* Unsplash */
.button.button-unsplash {
color: #000000;
background-color: #ffffff;
border: 1px solid #212121;
}
.button.button-unsplash:hover,
.button.button-unsplash:focus {
filter: brightness(90%);
}
/* Untappd */
.button.button-untappd {
color: #ffffff;
background-color: #ffc000;
}
.button.button-untappd:hover,
.button.button-untappd:focus {
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;
background-color: #1ab7ea;
}
.button.button-vimeo:hover,
.button.button-vimeo:focus {
filter: brightness(90%);
}
/* VRChat */
.button.button-vrchat {
color: #000000;
background-color: #ffffff;
border: 1px solid black;
}
.button.button-vrchat:hover,
.button.button-vrchat:focus {
filter: brightness(90%);
}
/* Website */
.button.button-web {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-web:hover,
.button.button-web:focus {
filter: brightness(90%);
}
/* 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%);
}
/* Xing */
.button.button-xing {
color: #ffffff;
background-color: #026466;
}
.button.button-xing:hover,
.button.button-xing:focus {
filter: brightness(90%);
}
/* YouTube */
.button.button-yt {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-yt:hover,
.button.button-yt:focus {
filter: brightness(90%);
}