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.