diff --git a/README.md b/README.md index 2635a6b..ace4189 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ ![LittleLink](https://cdn.cottle.cloud/littlelink/social-circle.png) LittleLink is a lightweight DIY alternative to services like [Linktree](https://linktr.ee) -and [many.link](https://www.google.com). LittleLink was built using [Skeleton](http://getskeleton.com/), a dead simple, responsive boilerplate—we just stripped out some additional code you wouldn't need and added in branded styles for popular services. 😊 +and [many.link](https://many.link/). LittleLink was built using [Skeleton](http://getskeleton.com/), a dead simple, responsive boilerplate—we just stripped out some additional code you wouldn't need and added in branded styles for popular services. 😊 ![Themes](https://cdn.cottle.cloud/littlelink/themes.png) @@ -31,3 +31,6 @@ Duplicate the [LittleLink Template on Figma Community](https://www.figma.com/com ##### Misc Check out [LittleLink Admin](https://github.com/khashayarzavosh/admin-littlelink) by [Khashayar Zavosh](https://github.com/khashayarzavosh) which lets you host your own admin portal to manage LittleLink! + +#### Supporters +You can support LittleLink by [buying me a beer](https://www.buymeacoffee.com/seth). You can also have your name or your company added to this section and the supporters page of [LittleLink.io](https://littlelink.io) website. diff --git a/css/brands.css b/css/brands.css index a321f2c..5c57cf2 100644 --- a/css/brands.css +++ b/css/brands.css @@ -82,6 +82,38 @@ button:hover, .button.button-default:hover, .button.button-default:focus { filter: brightness(90%) } + +/* Bandcamp */ +.button.button-bandcamp { + color: #FFFFFF; + background-color: #1d9fc3 } +.button.button-bandcamp:hover, +.button.button-bandcamp:focus { + filter: brightness(90%) } + +/* Patreon */ +.button.button-patreon { + color: #FFFFFF; + background-color: #ff424d } +.button.button-patreon:hover, +.button.button-patreon:focus { + filter: brightness(90%) } + +/* Signal */ +.button.button-signal { + color: #FFFFFF; + background-color: #3a76f0 } +.button.button-signal:hover, +.button.button-signal:focus { + filter: brightness(90%) } + +/* Venmo */ +.button.button-venmo { + color: #FFFFFF; + background-color: #3d95ce } +.button.button-venmo:hover, +.button.button-venmo:focus { + filter: brightness(90%) } /* Discord */ .button.button-discord { @@ -92,11 +124,11 @@ button:hover, filter: brightness(90%) } /* Facebook */ -.button.button-facebook { +.button.button-faceb { color: #FFFFFF; background-color: #1877f2 } -.button.button-facebook:hover, -.button.button-facebook:focus { +.button.button-faceb:hover, +.button.button-faceb:focus { filter: brightness(90%) } /* Facebook Messenger */ @@ -156,11 +188,11 @@ button:hover, filter: brightness(90%) } /* LinkedIn */ -.button.button-linkedin { +.button.button-linked { color: #FFFFFF; background-color: #2867B2 } -.button.button-linkedin:hover, -.button.button-linkedin:focus { +.button.button-linked:hover, +.button.button-linked:focus { filter: brightness(90%) } /* Mastodon */ @@ -263,11 +295,11 @@ button:hover, filter: brightness(90%) } /* Tumblr */ -.button.button-tumblr { +.button.button-tumb { color: #FFFFFF; background-color: #131313 } -.button.button-tumblr:hover, -.button.button-tumblr:focus { +.button.button-tumb:hover, +.button.button-tumb:focus { filter: brightness(90%) } /* Twitch */ @@ -279,11 +311,11 @@ button:hover, filter: brightness(90%) } /* Twitter */ -.button.button-twitter { +.button.button-twit { color: #FFFFFF; background-color: #1DA1F2 } -.button.button-twitter:hover, -.button.button-twitter:focus { +.button.button-twit:hover, +.button.button-twit:focus { filter: brightness(90%) } /* Vimeo */ @@ -303,11 +335,11 @@ button:hover, filter: brightness(90%) } /* YouTube */ -.button.button-youtube { +.button.button-yt { color: #FFFFFF; background-color: #000000 } -.button.button-youtube:hover, -.button.button-youtube:focus { +.button.button-yt:hover, +.button.button-yt:focus { filter: brightness(90%) } /* WhatsApp */ diff --git a/images/icons/bandcamp.svg b/images/icons/bandcamp.svg new file mode 100644 index 0000000..cde6f60 --- /dev/null +++ b/images/icons/bandcamp.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/icons/discord.svg b/images/icons/discord.svg similarity index 100% rename from icons/discord.svg rename to images/icons/discord.svg diff --git a/icons/email.svg b/images/icons/email.svg similarity index 100% rename from icons/email.svg rename to images/icons/email.svg diff --git a/icons/email_alt.svg b/images/icons/email_alt.svg similarity index 100% rename from icons/email_alt.svg rename to images/icons/email_alt.svg diff --git a/icons/facebook.svg b/images/icons/facebook.svg similarity index 100% rename from icons/facebook.svg rename to images/icons/facebook.svg diff --git a/icons/figma.svg b/images/icons/figma.svg similarity index 100% rename from icons/figma.svg rename to images/icons/figma.svg diff --git a/icons/github.svg b/images/icons/github.svg similarity index 100% rename from icons/github.svg rename to images/icons/github.svg diff --git a/icons/gitlab.svg b/images/icons/gitlab.svg similarity index 100% rename from icons/gitlab.svg rename to images/icons/gitlab.svg diff --git a/icons/goodreads.svg b/images/icons/goodreads.svg similarity index 100% rename from icons/goodreads.svg rename to images/icons/goodreads.svg diff --git a/icons/instagram.svg b/images/icons/instagram.svg similarity index 100% rename from icons/instagram.svg rename to images/icons/instagram.svg diff --git a/icons/kit.svg b/images/icons/kit.svg similarity index 100% rename from icons/kit.svg rename to images/icons/kit.svg diff --git a/icons/linkedin.svg b/images/icons/linkedin.svg similarity index 100% rename from icons/linkedin.svg rename to images/icons/linkedin.svg diff --git a/icons/mastodon.svg b/images/icons/mastodon.svg similarity index 100% rename from icons/mastodon.svg rename to images/icons/mastodon.svg diff --git a/icons/matrix.svg b/images/icons/matrix.svg similarity index 100% rename from icons/matrix.svg rename to images/icons/matrix.svg diff --git a/icons/medium.svg b/images/icons/medium.svg similarity index 100% rename from icons/medium.svg rename to images/icons/medium.svg diff --git a/icons/messenger.svg b/images/icons/messenger.svg similarity index 100% rename from icons/messenger.svg rename to images/icons/messenger.svg diff --git a/images/icons/patreon.svg b/images/icons/patreon.svg new file mode 100644 index 0000000..fe07eb1 --- /dev/null +++ b/images/icons/patreon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/icons/paypal.svg b/images/icons/paypal.svg similarity index 100% rename from icons/paypal.svg rename to images/icons/paypal.svg diff --git a/icons/pinterest.svg b/images/icons/pinterest.svg similarity index 100% rename from icons/pinterest.svg rename to images/icons/pinterest.svg diff --git a/icons/producthunt.svg b/images/icons/producthunt.svg similarity index 100% rename from icons/producthunt.svg rename to images/icons/producthunt.svg diff --git a/icons/reddit.svg b/images/icons/reddit.svg similarity index 100% rename from icons/reddit.svg rename to images/icons/reddit.svg diff --git a/images/icons/signal.svg b/images/icons/signal.svg new file mode 100644 index 0000000..4cef57a --- /dev/null +++ b/images/icons/signal.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/icons/skoob.svg b/images/icons/skoob.svg similarity index 100% rename from icons/skoob.svg rename to images/icons/skoob.svg diff --git a/icons/snapchat.svg b/images/icons/snapchat.svg similarity index 100% rename from icons/snapchat.svg rename to images/icons/snapchat.svg diff --git a/icons/soundcloud.svg b/images/icons/soundcloud.svg similarity index 100% rename from icons/soundcloud.svg rename to images/icons/soundcloud.svg diff --git a/icons/sourcehut.svg b/images/icons/sourcehut.svg similarity index 100% rename from icons/sourcehut.svg rename to images/icons/sourcehut.svg diff --git a/icons/spotify.svg b/images/icons/spotify.svg similarity index 100% rename from icons/spotify.svg rename to images/icons/spotify.svg diff --git a/icons/steam.svg b/images/icons/steam.svg similarity index 100% rename from icons/steam.svg rename to images/icons/steam.svg diff --git a/icons/telegram.svg b/images/icons/telegram.svg similarity index 100% rename from icons/telegram.svg rename to images/icons/telegram.svg diff --git a/icons/tiktok.svg b/images/icons/tiktok.svg similarity index 100% rename from icons/tiktok.svg rename to images/icons/tiktok.svg diff --git a/icons/tumblr.svg b/images/icons/tumblr.svg similarity index 100% rename from icons/tumblr.svg rename to images/icons/tumblr.svg diff --git a/icons/twitch.svg b/images/icons/twitch.svg similarity index 100% rename from icons/twitch.svg rename to images/icons/twitch.svg diff --git a/icons/twitter.svg b/images/icons/twitter.svg similarity index 100% rename from icons/twitter.svg rename to images/icons/twitter.svg diff --git a/images/icons/venmo.svg b/images/icons/venmo.svg new file mode 100644 index 0000000..0c37329 --- /dev/null +++ b/images/icons/venmo.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/icons/vimeo.svg b/images/icons/vimeo.svg similarity index 100% rename from icons/vimeo.svg rename to images/icons/vimeo.svg diff --git a/icons/whatsapp.svg b/images/icons/whatsapp.svg similarity index 100% rename from icons/whatsapp.svg rename to images/icons/whatsapp.svg diff --git a/icons/wordpress.svg b/images/icons/wordpress.svg similarity index 100% rename from icons/wordpress.svg rename to images/icons/wordpress.svg diff --git a/icons/xing.svg b/images/icons/xing.svg similarity index 100% rename from icons/xing.svg rename to images/icons/xing.svg diff --git a/icons/youtube.svg b/images/icons/youtube.svg similarity index 100% rename from icons/youtube.svg rename to images/icons/youtube.svg diff --git a/index.html b/index.html index 768b194..e015ead 100644 --- a/index.html +++ b/index.html @@ -47,9 +47,11 @@ You can add your own brand or others brands you may need in the `css/brands.css` file. + You can add custom icons to `images/icons/...`. It is recommended to use a 24x24 .SVG. + Edit the "Your Image Here" section to add your own personal branding, like a picture of yourself or your brand logo! - Edit the "Your Name" section to change the page heading. You can use something like your name, your social handle, or your brand name. + Edit the "Title" section to change the page heading. You can use something like your name, your social handle, or your brand name. Edit the "Short Bio" section tell users about yourself or your brand.