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 9a13c96e..dd6f2c11 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 35e45695..26c81c51 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 df8d2b22..19db79e2 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 89d99216..9cb862da 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 0a645a9b..5c270735 100644 --- a/icons/kit.svg +++ b/icons/kit.svg @@ -1,15 +1,11 @@ - - - + + - - - diff --git a/icons/medium.svg b/icons/medium.svg index b0ecfa7c..ac7d0fd8 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 00000000..87a9e0aa --- /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 9ee7f5f1..00000000 --- a/icons/mixer.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - diff --git a/icons/pinterest.svg b/icons/pinterest.svg index 3db5661d..c57d0f68 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 947d1ed8..ec269db2 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 0b6d7241..00000000 --- a/icons/rocketseat.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/icons/snapchat.svg b/icons/snapchat.svg index a6b7eef3..55e4b3e9 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 7875b8d4..00000000 --- a/icons/spectrum.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/icons/spotify.svg b/icons/spotify.svg index d005f7ad..97f81060 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 00000000..b04df9b6 --- /dev/null +++ b/icons/vimeo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/icons/wordpress.svg b/icons/wordpress.svg index ab096edb..f8ce5ed6 100644 --- a/icons/wordpress.svg +++ b/icons/wordpress.svg @@ -1,50 +1,3 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + diff --git a/icons/youtube.svg b/icons/youtube.svg index 95d03c3a..7cf1b9b8 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 147394bc..40b4f596 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.