From 3ae139e32ce488296ede11cd5997bcd9acdc4bb2 Mon Sep 17 00:00:00 2001 From: Seth Cottle Date: Fri, 19 Feb 2021 01:37:00 -0500 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20General=20Improvements?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Removed a few deprecated brands, including Mixer and Spectrum. Updated iconography and brand colors to align with guidelines set by brands and to help increase visual accessibility. This will likely be the new style moving forward, so if you want to go back to brand color button backgrounds and solid white or black iconography, you'll need to do that on your own. Added Facebook Messenger and Vimeo, please keep the suggestions coming for popular services that you believe should be included in the main branch for everyone by default. --- README.md | 12 ++++--- css/brands.css | 80 +++++++++++++++++++------------------------ css/skeleton-dark.css | 2 +- icons/figma.svg | 16 +++++++-- icons/kit.svg | 8 ++--- icons/medium.svg | 7 ++-- icons/messenger.svg | 3 ++ icons/mixer.svg | 14 -------- icons/pinterest.svg | 13 +++++-- icons/reddit.svg | 6 ++-- icons/rocketseat.svg | 3 -- icons/snapchat.svg | 6 ++-- icons/spectrum.svg | 5 --- icons/spotify.svg | 2 +- icons/vimeo.svg | 10 ++++++ icons/wordpress.svg | 53 ++-------------------------- icons/youtube.svg | 13 +++++-- index.html | 55 ++++++++++++++--------------- 18 files changed, 138 insertions(+), 170 deletions(-) create mode 100644 icons/messenger.svg delete mode 100644 icons/mixer.svg delete mode 100644 icons/rocketseat.svg delete mode 100644 icons/spectrum.svg create mode 100644 icons/vimeo.svg diff --git a/README.md b/README.md index 9a13c96..dd6f2c1 100644 --- a/README.md +++ b/README.md @@ -3,16 +3,18 @@ ![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://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. 😊 ![Themes](https://cdn.cottle.cloud/littlelink/themes.png) -LittleLink has more than 18 company button styles you can use and we'll be throwing more in soon. You'll also find a light and dark theme ready to go. Not a fan of the colors? Update `skeleton-light.css` or `skeleton-dark.css` to the HEX values of your choosing. +LittleLink has more than 20 company button styles you can use and we'll be throwing more in soon. You'll also find a light and dark theme ready to go. Not a fan of the colors? Update `skeleton-light.css` or `skeleton-dark.css` to the HEX values of your choosing. - ![Performance](https://cdn.cottle.cloud/littlelink/performance.png) +![Performance](https://cdn.cottle.cloud/littlelink/performance.png) -Using [Skeleton](http://getskeleton.com/) let us build something that loads quickly & doesn't have any of the unnecessary bloat you would get from using a large framework for a page that requires nothing more than simplicity. LittleLink scored a 99/100 in performance when tested with Lighthouse. +Using [Skeleton](http://getskeleton.com/) let us build something that loads quickly & doesn't have any of the unnecessary bloat you would get from using a large framework for a page that requires nothing more than simplicity. LittleLink scored a 99/100 in performance when tested with [Google Lighthouse](https://developers.google.com/web/tools/lighthouse). ![Publish](https://cdn.cottle.cloud/littlelink/fork-edit-publish.png) -You won't need gulp, npm, or anything else to make LittleLink work, it uses the bare essentials. You can just fork LittleLink, edit `index.html`, and publish. Use [ZEIT Now](https://zeit.co/github) for continuous deployment when you make an update to your LittleLink. \ No newline at end of file +No need for gulp, npm, or anything else to make LittleLink workβ€”it uses the bare essentials. You can automatically fork and deploy LittleLink with [Vercel](https://vercel.com/). Enjoy free and fast hosting with automatic deployments on every branch push with one click below. πŸ‘‡οΈ + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fsethcottle%2Flittlelink&project-name=littlelink&repository-name=littlelink&demo-title=LittleLink%20Demo&demo-description=Imported%20from%20GitHub.) \ No newline at end of file diff --git a/css/brands.css b/css/brands.css index 35e4569..26c81c5 100644 --- a/css/brands.css +++ b/css/brands.css @@ -44,7 +44,7 @@ button { font-weight: 600; line-height: 48px; letter-spacing: 0.5px; - white-space: nowrap; + white-space: wrap; background-color: transparent; border-radius: 8px; cursor: pointer; @@ -93,10 +93,18 @@ button: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: #131313 } + background-color: #000000 } .button.button-figma:hover, .button.button-figma:focus { filter: brightness(90%) } @@ -104,17 +112,17 @@ button:hover, /* Github */ .button.button-github { color: #FFFFFF; - background-color: #24292e } + background-color: #000000 } .button.button-github:hover, .button.button-github:focus { filter: brightness(90%) } /* Goodreads */ .button.button-goodreads { - color: #553B08; + color: #333333; background-color: #F3F1E6 } -.button.button-youtube:hover, -.button.button-youtube:focus { +.button.button-goodreads:hover, +.button.button-goodreads:focus { filter: brightness(90%) } /* Instagram */ @@ -128,7 +136,7 @@ button:hover, /* Kit */ .button.button-kit { color: #FFFFFF; - background-color: #10c694 } + background-color: #000000 } .button.button-kit:hover, .button.button-kit:focus { filter: brightness(90%) } @@ -136,39 +144,31 @@ button:hover, /* LinkedIn */ .button.button-linkedin { color: #FFFFFF; - background-color: #0A66C2 } + background-color: #2867B2 } .button.button-linkedin:hover, .button.button-linkedin:focus { filter: brightness(90%) } /* Medium */ .button.button-medium { - color: #000000; - background-color: #E8F3EC } + color: #FFFFFF; + background-color: #000000 } .button.button-medium:hover, .button.button-medium:focus { filter: brightness(90%) } -/* Mixer */ -.button.button-mixer { - color: #FFFFFF; - background-color: #212c3d } -.button.button-mixer:hover, -.button.button-mixer:focus { - filter: brightness(90%) } - /* Pinterest */ .button.button-pinterest { - color: #FFFFFF; - background-color: #E60023 } + color: #000000; + background-color: #FFE2EB } .button.button-pinterest:hover, .button.button-pinterest:focus { filter: brightness(90%) } /* Reddit */ .button.button-reddit { - color: #FFFFFF; - background-color: #FF4500 } + color: #000000; + background-color: #D7DFE2 } .button.button-reddit:hover, .button.button-reddit:focus { filter: brightness(90%) } @@ -176,19 +176,11 @@ button:hover, /* Skoob */ .button.button-skoob { color: #FFFFFF; - background-color: #5882BE } -.button.button-youtube:hover, -.button.button-youtube:focus { + background-color: #3189C8 } +.button.button-skoob:hover, +.button.button-skoob:focus { filter: brightness(90%) } -/* Rocketseat */ -.button.button-rocketseat { - color: #FFFFFF; - background-color: #8257E6 } -.button.button-rocketseat:hover, -.button.button-rocketseat:focus { - filter: brightness(90%) } - /* Snapchat */ .button.button-snapchat { color: #000000; @@ -205,18 +197,10 @@ button:hover, .button.button-soundcloud:focus { filter: brightness(90%) } -/* Spectrum */ -.button.button-spectrum { - color: #FFFFFF; - background-color: #7b16ff } -.button.button-spectrum:hover, -.button.button-spectrum:focus { - filter: brightness(90%) } - /* Spotify */ .button.button-spotify { color: #FFFFFF; - background-color: #1DB954 } + background-color: #000000 } .button.button-spotify:hover, .button.button-spotify:focus { filter: brightness(90%) } @@ -261,10 +245,18 @@ button:hover, .button.button-twitter:focus { filter: brightness(90%) } +/* Vimeo */ +.button.button-vimeo { + color: #FFFFFF; + background-color: #1ab7ea } +.button.button-vimeo:hover, +.button.button-vimeo:focus { + filter: brightness(90%) } + /* YouTube */ .button.button-youtube { color: #FFFFFF; - background-color: #FF0000 } + background-color: #000000 } .button.button-youtube:hover, .button.button-youtube:focus { filter: brightness(90%) } @@ -272,7 +264,7 @@ button:hover, /* Wordpress */ .button.button-wordpress { color: #FFFFFF; - background-color: #0073AA } + background-color: #21759b } .button.button-wordpress:hover, .button.button-wordpress:focus { filter: brightness(90%) } diff --git a/css/skeleton-dark.css b/css/skeleton-dark.css index df8d2b2..19db79e 100644 --- a/css/skeleton-dark.css +++ b/css/skeleton-dark.css @@ -77,7 +77,7 @@ are based on 10px sizing. So basically 1.5rem = 15px :) */ html { font-size: 100%; } body { - background-color: #000000; + background-color: #292929; font-size: 18px; line-height: 24px; font-weight: 400; diff --git a/icons/figma.svg b/icons/figma.svg index 89d9921..9cb862d 100644 --- a/icons/figma.svg +++ b/icons/figma.svg @@ -1,2 +1,14 @@ - \ No newline at end of file + + + + + + + + + + + + + + diff --git a/icons/kit.svg b/icons/kit.svg index 0a645a9..5c27073 100644 --- a/icons/kit.svg +++ b/icons/kit.svg @@ -1,15 +1,11 @@ - - - + + - - - diff --git a/icons/medium.svg b/icons/medium.svg index b0ecfa7..ac7d0fd 100644 --- a/icons/medium.svg +++ b/icons/medium.svg @@ -1,2 +1,5 @@ - \ No newline at end of file + + + + + diff --git a/icons/messenger.svg b/icons/messenger.svg new file mode 100644 index 0000000..87a9e0a --- /dev/null +++ b/icons/messenger.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/mixer.svg b/icons/mixer.svg deleted file mode 100644 index 9ee7f5f..0000000 --- a/icons/mixer.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - diff --git a/icons/pinterest.svg b/icons/pinterest.svg index 3db5661..c57d0f6 100644 --- a/icons/pinterest.svg +++ b/icons/pinterest.svg @@ -1,2 +1,11 @@ - \ No newline at end of file + + + + + + + + + + + diff --git a/icons/reddit.svg b/icons/reddit.svg index 947d1ed..ec269db 100644 --- a/icons/reddit.svg +++ b/icons/reddit.svg @@ -1,2 +1,4 @@ - \ No newline at end of file + + + + diff --git a/icons/rocketseat.svg b/icons/rocketseat.svg deleted file mode 100644 index 0b6d724..0000000 --- a/icons/rocketseat.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/icons/snapchat.svg b/icons/snapchat.svg index a6b7eef..55e4b3e 100644 --- a/icons/snapchat.svg +++ b/icons/snapchat.svg @@ -1,2 +1,4 @@ - \ No newline at end of file + + + + diff --git a/icons/spectrum.svg b/icons/spectrum.svg deleted file mode 100644 index 7875b8d..0000000 --- a/icons/spectrum.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/icons/spotify.svg b/icons/spotify.svg index d005f7a..97f8106 100644 --- a/icons/spotify.svg +++ b/icons/spotify.svg @@ -1,2 +1,2 @@ \ No newline at end of file + \ No newline at end of file diff --git a/icons/vimeo.svg b/icons/vimeo.svg new file mode 100644 index 0000000..b04df9b --- /dev/null +++ b/icons/vimeo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/icons/wordpress.svg b/icons/wordpress.svg index ab096ed..f8ce5ed 100644 --- a/icons/wordpress.svg +++ b/icons/wordpress.svg @@ -1,50 +1,3 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + diff --git a/icons/youtube.svg b/icons/youtube.svg index 95d03c3..7cf1b9b 100644 --- a/icons/youtube.svg +++ b/icons/youtube.svg @@ -1,2 +1,11 @@ - \ No newline at end of file + + + + + + + + + + + diff --git a/index.html b/index.html index 147394b..40b4f59 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,8 @@ –––––––––––––––––––––––––––––––––––––––––––––––––– --> LittleLink - - + + @@ -42,10 +42,10 @@

LittleLink

-

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. 😊

+

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. 😊

- + Github @@ -60,9 +60,13 @@
- Facebook + Find us on Facebook
+ + Chat on Messenger +
+ LinkedIn
@@ -71,6 +75,14 @@ YouTube
+ + Discord +
+ + + Twitch +
+ Snapchat
@@ -82,26 +94,18 @@ Reddit
- - - Rocketseat -
Medium
- Pinterest + Follow on Pinterest
SoundCloud -
- - - Spectrum -
+
Figma @@ -123,17 +127,12 @@ Steam
- - Discord -
- - - Twitch -
- - - Mixer -
+ + Vimeo +
+ + + Wordpress Goodreads @@ -142,9 +141,7 @@ Skoob
- - - Wordpress +

Build your own by forking LittleLink.