ptr.moe/css/brands.css
Seth Cottle a849815bf8 New Brands
Based on some feedback we've been receiving via email and social I'm adding several new brands, including: Amazon, Apple App Store, Google Play Store, and OnlyFans. Added a SVG of the LittleLink avatar. Cleaned up the README.md to make it more readable, updated some outdated content, and added a new Analytics section promoting Fathom (and adding a referral link to help support LittleLink). I also posted a link to the public LittleLink Fathom analytics dashboard.
2022-05-04 11:03:14 -04:00

580 lines
11 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: #0085ff;
}
.button.button-default:hover,
.button.button-default:focus {
filter: brightness(90%);
}
/* Amazon */
.button.button-amazon {
color: #000000;
background-color: #ffffff;
}
.button.button-amazon:hover,
.button.button-amazon:focus {
filter: brightness(90%);
}
/* Apple App Store */
.button.button-appstore {
color: #ffffff;
background-color: #000000;
}
.button.button-appstore:hover,
.button.button-appstore:focus {
filter: brightness(90%);
}
/* Bandcamp */
.button.button-bandcamp {
color: #ffffff;
background-color: #1d9fc3;
}
.button.button-bandcamp:hover,
.button.button-bandcamp: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-cashapp {
color: #ffffff;
background-image: linear-gradient(to bottom, #00d64b, #00c244);
}
.button.button-cashapp:hover,
.button.button-cashapp:focus {
filter: brightness(90%);
}
/* dev.to */
.button.button-dev-to {
color: #000000;
background-color: #f5f5f5;
}
.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;
}
.button.button-figma:hover,
.button.button-figma:focus {
filter: brightness(90%);
}
/* Github */
.button.button-github {
color: #ffffff;
background-color: #000000;
}
.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;
}
.button.button-goodreads:hover,
.button.button-goodreads:focus {
filter: brightness(90%);
}
/* Google Play Store */
.button.button-playstore {
color: #FFFFFF;
background-color: #000000;
}
.button.button-playstore:hover,
.button.button-playstore: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;
}
.button.button-kit:hover,
.button.button-kit: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: #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%);
}
/* Notion */
.button.button-notion {
color: #000000;
border-style: solid;
border-color: #000000;
border-width: 2px;
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;
}
.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%);
}
/* 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: #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;
}
.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%);
}
/* 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;
}
.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%);
}
/* 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: 2px solid black;
}
.button.button-vrchat:hover,
.button.button-vrchat:focus {
filter: brightness(90%);
}
/* Website */
.button.button-web {
color: #ffffff;
background-color: #000000;
}
.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;
}
.button.button-yt:hover,
.button.button-yt:focus {
filter: brightness(90%);
}