baalajimaestro/littlelink
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

⚡️ General Improvements

Browse source 
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.
This commit is contained in:
Seth Cottle 2021-02-19 01:37:00 -05:00
parent 55b5528537
commit 3ae139e32c
18 changed files with 138 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
README.md
View file

@ -7,12 +7,14 @@ LittleLink is a lightweight DIY alternative to services like [Linktree](https://
![Themes](https://cdn.cottle.cloud/littlelink/themes.png) ![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) ![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 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.)

80
css/brands.css
View file

@ -44,7 +44,7 @@ button {
font-weight: 600; font-weight: 600;
line-height: 48px; line-height: 48px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
white-space: nowrap; white-space: wrap;
background-color: transparent; background-color: transparent;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
@ -93,10 +93,18 @@ button:hover,
.button.button-facebook:focus { .button.button-facebook:focus {
filter: brightness(90%) } 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 */ /* Figma */
.button.button-figma { .button.button-figma {
color: #FFFFFF; color: #FFFFFF;
background-color: #131313 } background-color: #000000 }
.button.button-figma:hover, .button.button-figma:hover,
.button.button-figma:focus { .button.button-figma:focus {
filter: brightness(90%) } filter: brightness(90%) }
@ -104,17 +112,17 @@ button:hover,
/* Github */ /* Github */
.button.button-github { .button.button-github {
color: #FFFFFF; color: #FFFFFF;
background-color: #24292e } background-color: #000000 }
.button.button-github:hover, .button.button-github:hover,
.button.button-github:focus { .button.button-github:focus {
filter: brightness(90%) } filter: brightness(90%) }
/* Goodreads */ /* Goodreads */
.button.button-goodreads { .button.button-goodreads {
color: #553B08; color: #333333;
background-color: #F3F1E6 } background-color: #F3F1E6 }
.button.button-youtube:hover, .button.button-goodreads:hover,
.button.button-youtube:focus { .button.button-goodreads:focus {
filter: brightness(90%) } filter: brightness(90%) }
/* Instagram */ /* Instagram */
@ -128,7 +136,7 @@ button:hover,
/* Kit */ /* Kit */
.button.button-kit { .button.button-kit {
color: #FFFFFF; color: #FFFFFF;
background-color: #10c694 } background-color: #000000 }
.button.button-kit:hover, .button.button-kit:hover,
.button.button-kit:focus { .button.button-kit:focus {
filter: brightness(90%) } filter: brightness(90%) }
@ -136,39 +144,31 @@ button:hover,
/* LinkedIn */ /* LinkedIn */
.button.button-linkedin { .button.button-linkedin {
color: #FFFFFF; color: #FFFFFF;
background-color: #0A66C2 } background-color: #2867B2 }
.button.button-linkedin:hover, .button.button-linkedin:hover,
.button.button-linkedin:focus { .button.button-linkedin:focus {
filter: brightness(90%) } filter: brightness(90%) }
/* Medium */ /* Medium */
.button.button-medium { .button.button-medium {
color: #000000; color: #FFFFFF;
background-color: #E8F3EC } background-color: #000000 }
.button.button-medium:hover, .button.button-medium:hover,
.button.button-medium:focus { .button.button-medium:focus {
filter: brightness(90%) } filter: brightness(90%) }
/* Mixer */
.button.button-mixer {
color: #FFFFFF;
background-color: #212c3d }
.button.button-mixer:hover,
.button.button-mixer:focus {
filter: brightness(90%) }
/* Pinterest */ /* Pinterest */
.button.button-pinterest { .button.button-pinterest {
color: #FFFFFF; color: #000000;
background-color: #E60023 } background-color: #FFE2EB }
.button.button-pinterest:hover, .button.button-pinterest:hover,
.button.button-pinterest:focus { .button.button-pinterest:focus {
filter: brightness(90%) } filter: brightness(90%) }
/* Reddit */ /* Reddit */
.button.button-reddit { .button.button-reddit {
color: #FFFFFF; color: #000000;
background-color: #FF4500 } background-color: #D7DFE2 }
.button.button-reddit:hover, .button.button-reddit:hover,
.button.button-reddit:focus { .button.button-reddit:focus {
filter: brightness(90%) } filter: brightness(90%) }
@ -176,17 +176,9 @@ button:hover,
/* Skoob */ /* Skoob */
.button.button-skoob { .button.button-skoob {
color: #FFFFFF; color: #FFFFFF;
background-color: #5882BE } background-color: #3189C8 }
.button.button-youtube:hover, .button.button-skoob:hover,
.button.button-youtube:focus { .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%) } filter: brightness(90%) }
/* Snapchat */ /* Snapchat */
@ -205,18 +197,10 @@ button:hover,
.button.button-soundcloud:focus { .button.button-soundcloud:focus {
filter: brightness(90%) } filter: brightness(90%) }
/* Spectrum */
.button.button-spectrum {
color: #FFFFFF;
background-color: #7b16ff }
.button.button-spectrum:hover,
.button.button-spectrum:focus {
filter: brightness(90%) }
/* Spotify */ /* Spotify */
.button.button-spotify { .button.button-spotify {
color: #FFFFFF; color: #FFFFFF;
background-color: #1DB954 } background-color: #000000 }
.button.button-spotify:hover, .button.button-spotify:hover,
.button.button-spotify:focus { .button.button-spotify:focus {
filter: brightness(90%) } filter: brightness(90%) }
@ -261,10 +245,18 @@ button:hover,
.button.button-twitter:focus { .button.button-twitter:focus {
filter: brightness(90%) } filter: brightness(90%) }
/* Vimeo */
.button.button-vimeo {
color: #FFFFFF;
background-color: #1ab7ea }
.button.button-vimeo:hover,
.button.button-vimeo:focus {
filter: brightness(90%) }
/* YouTube */ /* YouTube */
.button.button-youtube { .button.button-youtube {
color: #FFFFFF; color: #FFFFFF;
background-color: #FF0000 } background-color: #000000 }
.button.button-youtube:hover, .button.button-youtube:hover,
.button.button-youtube:focus { .button.button-youtube:focus {
filter: brightness(90%) } filter: brightness(90%) }
@ -272,7 +264,7 @@ button:hover,
/* Wordpress */ /* Wordpress */
.button.button-wordpress { .button.button-wordpress {
color: #FFFFFF; color: #FFFFFF;
background-color: #0073AA } background-color: #21759b }
.button.button-wordpress:hover, .button.button-wordpress:hover,
.button.button-wordpress:focus { .button.button-wordpress:focus {
filter: brightness(90%) } filter: brightness(90%) }

2
css/skeleton-dark.css
View file

@ -77,7 +77,7 @@ are based on 10px sizing. So basically 1.5rem = 15px :) */
html { html {
font-size: 100%; } font-size: 100%; }
body { body {
background-color: #000000; background-color: #292929;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;

16
icons/figma.svg
View file

@ -1,2 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="littlelink" data-icon="figma" class="svg-inline figma" role="img" viewBox="0 0 384 512"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#FFFFFF" d="M277 170.7A85.35 85.35 0 0 0 277 0H106.3a85.3 85.3 0 0 0 0 170.6 85.35 85.35 0 0 0 0 170.7 85.35 85.35 0 1 0 85.3 85.4v-256zm0 0a85.3 85.3 0 1 0 85.3 85.3 85.31 85.31 0 0 0-85.3-85.3z"/></svg> <g clip-path="url(#clip0)">
<path d="M8.00153 23.9999C10.2095 23.9999 12.0015 22.208 12.0015 20V16H8.00153C5.79354 16 4.00156 17.792 4.00156 20C4.00156 22.208 5.79354 23.9999 8.00153 23.9999Z" fill="#0ACF83"/>
<path d="M4.00156 12C4.00156 9.79199 5.79354 8 8.00153 8H12.0015V15.9999H8.00153C5.79354 15.9999 4.00156 14.208 4.00156 12Z" fill="#A259FF"/>
<path d="M4.00156 4.00005C4.00156 1.79205 5.79354 4.57764e-05 8.00153 4.57764e-05H12.0015V8.00005H8.00153C5.79354 8.00005 4.00156 6.20805 4.00156 4.00005Z" fill="#F24E1E"/>
<path d="M12.0016 4.57764e-05H16.0016C18.2096 4.57764e-05 20.0016 1.79205 20.0016 4.00005C20.0016 6.20805 18.2096 8.00005 16.0016 8.00005H12.0016V4.57764e-05Z" fill="#FF7262"/>
<path d="M20.0016 12C20.0016 14.208 18.2096 15.9999 16.0016 15.9999C13.7936 15.9999 12.0016 14.208 12.0016 12C12.0016 9.79199 13.7936 8 16.0016 8C18.2096 8 20.0016 9.79199 20.0016 12Z" fill="#1ABCFE"/>
</g>
<defs>
<clipPath id="clip0">
<rect x="4" width="16.0032" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 395 B

After

Width:  |  Height:  |  Size: 1.1 KiB

8
icons/kit.svg
View file

@ -1,15 +1,11 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)"> <g clip-path="url(#clip0)">
<g clip-path="url(#clip1)"> <path d="M3.53166 18.1471L10.6358 10.8946V10.8978L10.6561 10.8786C10.6607 10.8721 10.667 10.8657 10.6747 10.8657L20.4387 0.90124C20.7322 0.603633 21.1273 0.436873 21.5389 0.436873C21.9504 0.436873 22.3455 0.603633 22.6391 0.90124C22.784 1.04756 22.8991 1.22227 22.9778 1.41512C23.0564 1.60797 23.0969 1.81508 23.0969 2.02429C23.0969 2.2335 23.0564 2.44061 22.9778 2.63346C22.8991 2.82631 22.784 3.00102 22.6391 3.14734L13.959 12.0016L22.6406 20.8543C22.7856 21.0006 22.9007 21.1753 22.9793 21.3681C23.0579 21.561 23.0984 21.7681 23.0984 21.9773C23.0984 22.1865 23.0579 22.3936 22.9793 22.5865C22.9007 22.7793 22.7856 22.954 22.6406 23.1004C22.3481 23.3999 21.9526 23.568 21.5404 23.568C21.1283 23.568 20.7328 23.3999 20.4402 23.1004L11.7555 14.2445L3.07383 23.0972C2.78033 23.3949 2.38449 23.5607 1.97285 23.5583C1.76988 23.56 1.56857 23.5203 1.38049 23.4415C1.19242 23.3627 1.02127 23.2464 0.876869 23.0992C0.732471 22.952 0.617668 22.7769 0.539047 22.5838C0.460426 22.3907 0.419536 22.1835 0.418722 21.9741V2.01947C0.419741 1.80982 0.460801 1.60244 0.539553 1.40917C0.618306 1.2159 0.733206 1.04055 0.877687 0.893124C1.02217 0.745701 1.19339 0.629104 1.38158 0.549997C1.56976 0.470891 1.77121 0.430828 1.97441 0.432097C2.38482 0.429959 2.77928 0.595899 3.07124 0.893499C3.36319 1.1911 3.52878 1.59605 3.53166 2.01947V18.1471Z" fill="white"/>
<path d="M10.843 11.468L4 18.239V3.182C3.99722 2.78669 3.83772 2.40862 3.55651 2.13077C3.27529 1.85293 2.89532 1.69801 2.5 1.7C2.30427 1.69882 2.11023 1.73622 1.92896 1.81008C1.74769 1.88393 1.58276 1.99279 1.44359 2.13042C1.30442 2.26806 1.19375 2.43178 1.11789 2.61221C1.04203 2.79265 1.00248 2.98627 1.0015 3.182V21.812C1.00228 22.0075 1.04167 22.201 1.1174 22.3812C1.19313 22.5615 1.30372 22.725 1.44281 22.8624C1.5819 22.9999 1.74675 23.1085 1.92792 23.182C2.10908 23.2555 2.30298 23.2926 2.4985 23.291C2.89501 23.2933 3.27629 23.1385 3.559 22.8605L11.9215 14.5955L20.287 22.8635C20.5688 23.1432 20.9497 23.3001 21.3467 23.3001C21.7438 23.3001 22.1247 23.1432 22.4065 22.8635C22.5461 22.7269 22.657 22.5638 22.7327 22.3837C22.8085 22.2037 22.8475 22.0103 22.8475 21.815C22.8475 21.6197 22.8085 21.4263 22.7327 21.2463C22.657 21.0662 22.5461 20.9031 22.4065 20.7665L14.044 12.5015L22.405 4.235C22.5446 4.09839 22.6555 3.93528 22.7312 3.75523C22.807 3.57518 22.846 3.38182 22.846 3.1865C22.846 2.99118 22.807 2.79782 22.7312 2.61777C22.6555 2.43773 22.5446 2.27461 22.405 2.138C22.1222 1.86015 21.7417 1.70446 21.3452 1.70446C20.9488 1.70446 20.5683 1.86015 20.2855 2.138L10.8805 11.441C10.873 11.441 10.867 11.447 10.8625 11.453L10.843 11.471V11.468ZM35.668 23.297C35.4723 23.2984 35.2782 23.2612 35.0968 23.1875C34.9155 23.1138 34.7505 23.0051 34.6112 22.8676C34.4718 22.7301 34.361 22.5665 34.285 22.3862C34.2089 22.2058 34.1692 22.0122 34.168 21.8165V3.185C34.169 2.98907 34.2086 2.79526 34.2845 2.61464C34.3604 2.43402 34.4712 2.27014 34.6105 2.13236C34.7498 1.99459 34.9149 1.88562 35.0964 1.81169C35.2778 1.73776 35.4721 1.70032 35.668 1.7015C36.493 1.7015 37.1665 2.366 37.1665 3.185V21.815C37.1653 22.0107 37.1256 22.2043 37.0495 22.3847C36.9735 22.565 36.8627 22.7286 36.7233 22.8661C36.584 23.0036 36.419 23.1123 36.2377 23.186C36.0563 23.2597 35.8622 23.2969 35.6665 23.2955L35.668 23.297ZM56.077 4.6685V21.8165C56.077 22.634 56.746 23.297 57.574 23.297C58.399 23.297 59.074 22.637 59.074 21.8165V4.6685H66.997C67.193 4.66989 67.3873 4.63265 67.569 4.55892C67.7506 4.48519 67.9159 4.37641 68.0554 4.23879C68.195 4.10118 68.3061 3.93742 68.3824 3.75686C68.4587 3.57631 68.4986 3.3825 68.5 3.1865C68.4976 2.79092 68.3383 2.41247 68.057 2.13431C67.7758 1.85614 67.3956 1.70101 67 1.703H48.151C47.7559 1.7018 47.3765 1.85729 47.0959 2.13537C46.8153 2.41345 46.6564 2.79145 46.654 3.1865C46.654 4.004 47.3245 4.6685 48.1525 4.6685H56.08H56.0785H56.077Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6561 10.8786C10.6607 10.8721 10.667 10.8657 10.6747 10.8657L20.4387 0.90124C20.7322 0.603633 21.1273 0.436873 21.5389 0.436873C21.9504 0.436873 22.3455 0.603633 22.6391 0.90124C22.784 1.04756 22.8991 1.22227 22.9778 1.41512C23.0564 1.60797 23.0969 1.81508 23.0969 2.02429C23.0969 2.2335 23.0564 2.44061 22.9778 2.63346C22.8991 2.82631 22.784 3.00102 22.6391 3.14734L13.959 12.0016L22.6406 20.8543C22.7856 21.0006 22.9007 21.1753 22.9793 21.3681C23.0579 21.561 23.0984 21.7681 23.0984 21.9773C23.0984 22.1865 23.0579 22.3936 22.9793 22.5865C22.9007 22.7793 22.7856 22.954 22.6406 23.1004C22.3481 23.3999 21.9526 23.568 21.5404 23.568C21.1283 23.568 20.7328 23.3999 20.4402 23.1004L11.7555 14.2445L3.07383 23.0972C2.78033 23.3949 2.38449 23.5607 1.97285 23.5583C1.76988 23.56 1.56857 23.5203 1.38049 23.4415C1.19242 23.3627 1.02127 23.2464 0.876869 23.0992C0.732471 22.952 0.617668 22.7769 0.539047 22.5838C0.460426 22.3907 0.419536 22.1835 0.418722 21.9741V2.01947C0.419741 1.80982 0.460801 1.60244 0.539553 1.40917C0.618306 1.2159 0.733206 1.04055 0.877687 0.893124C1.02217 0.745701 1.19339 0.629104 1.38158 0.549997C1.56976 0.470891 1.77121 0.430828 1.97441 0.432097C2.38482 0.429959 2.77928 0.595899 3.07124 0.893499C3.36319 1.1911 3.52878 1.59605 3.53166 2.01947V18.1471L10.6358 10.8946V10.8978L10.6561 10.8786ZM11.0546 9.87036V9.85931L3.95045 17.1117V2.01944L3.95044 2.01641C3.94678 1.47855 3.73644 0.964164 3.36558 0.586135C2.99528 0.208668 2.49515 -0.00205383 1.97466 2.40687e-05C1.71722 -0.00127011 1.46203 0.0496385 1.22361 0.149865C0.984464 0.250394 0.766868 0.398566 0.583262 0.585911C0.399656 0.773257 0.25364 0.996101 0.153561 1.2417C0.0534828 1.48731 0.00130415 1.75085 8.61112e-06 2.01728L0 21.9741L6.71418e-06 21.9758C0.00104117 22.2421 0.0530385 22.5056 0.153015 22.7511C0.252991 22.9966 0.398978 23.2194 0.582597 23.4065C0.766217 23.5937 0.983853 23.7416 1.22302 23.8418C1.46124 23.9416 1.71616 23.992 1.97324 23.9903C2.49457 23.9927 2.99573 23.7824 3.36749 23.4052L11.7555 14.8519L20.1453 23.407C20.1453 23.407 20.1454 23.4071 20.1453 23.407C20.5163 23.7867 21.0179 24 21.5405 24C22.0627 24 22.5637 23.7872 22.9346 23.4081C23.1189 23.2217 23.2653 22.9994 23.3654 22.7539C23.4656 22.5081 23.5172 22.244 23.5172 21.9773C23.5172 21.7105 23.4656 21.4465 23.3654 21.2006C23.2653 20.9552 23.1188 20.7327 22.9345 20.5464C22.9342 20.5461 22.9338 20.5458 22.9335 20.5454L14.5547 12.0015L22.932 3.4561C22.9318 3.45633 22.9322 3.45587 22.932 3.4561C23.1164 3.26969 23.2637 3.0465 23.3638 2.80092C23.464 2.55505 23.5157 2.291 23.5157 2.02426C23.5157 1.75753 23.464 1.49348 23.3638 1.2476C23.2636 1.0018 23.1169 0.779109 22.9322 0.592588C22.5603 0.215878 22.06 0.00480541 21.5389 0.00480541C21.0176 0.00480541 20.5171 0.216052 20.1452 0.593051L11.0546 9.87036Z" fill="white"/>
</g>
</g> </g>
<defs> <defs>
<clipPath id="clip0"> <clipPath id="clip0">
<rect width="24" height="24" fill="white"/> <rect width="24" height="24" fill="white"/>
</clipPath> </clipPath>
<clipPath id="clip1">
<rect x="1" y="0.5" width="67.5" height="24" fill="white"/>
</clipPath>
</defs> </defs>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

7
icons/medium.svg
View file

@ -1,2 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="littlelink" data-icon="medium" class="svg-inline medium" role="img" viewBox="0 0 448 512"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#000000" d="M0 32v448h448V32H0zm372.2 106.1l-24 23c-2.1 1.6-3.1 4.2-2.7 6.7v169.3c-.4 2.6.6 5.2 2.7 6.7l23.5 23v5.1h-118V367l24.3-23.6c2.4-2.4 2.4-3.1 2.4-6.7V199.8l-67.6 171.6h-9.1L125 199.8v115c-.7 4.8 1 9.7 4.4 13.2l31.6 38.3v5.1H71.2v-5.1l31.6-38.3c3.4-3.5 4.9-8.4 4.1-13.2v-133c.4-3.7-1-7.3-3.8-9.8L75 138.1V133h87.3l67.4 148L289 133.1h83.2v5z"/></svg> <path d="M13.5374 12.0001C13.5374 15.8661 10.5069 19 6.76884 19C3.03073 19 0 15.8661 0 12.0001C0 8.13418 3.0305 5 6.76884 5C10.5072 5 13.5374 8.13418 13.5374 12.0001Z" fill="#FFFFFF"/>
<path d="M20.9628 12.0001C20.9628 15.6391 19.4476 18.5902 17.5784 18.5902C15.7092 18.5902 14.194 15.6391 14.194 12.0001C14.194 8.36116 15.709 5.41003 17.5782 5.41003C19.4473 5.41003 20.9626 8.36021 20.9626 12.0001" fill="#FFFFFF"/>
<path d="M24 12.0001C24 15.2597 23.4672 17.9038 22.8097 17.9038C22.1522 17.9038 21.6196 15.2604 21.6196 12.0001C21.6196 8.73979 22.1525 6.09644 22.8097 6.09644C23.467 6.09644 24 8.73955 24 12.0001Z" fill="#FFFFFF"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 550 B

After

Width:  |  Height:  |  Size: 736 B

3
icons/messenger.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 11.64C0 4.95169 5.24005 0 12 0C18.76 0 24 4.95169 24 11.64C24 18.3284 18.76 23.28 12 23.28C10.7858 23.28 9.6209 23.1197 8.52638 22.8188C8.31362 22.7602 8.08737 22.7768 7.88545 22.8658L5.50362 23.9172C4.88058 24.1923 4.17728 23.7492 4.1564 23.0684L4.09105 20.9338C4.08301 20.6708 3.96469 20.425 3.76868 20.2496C1.43376 18.1615 0 15.1385 0 11.64ZM8.31906 9.4516L4.79406 15.0441C4.45578 15.5808 5.11549 16.1856 5.62086 15.8021L9.4073 12.9284C9.66343 12.734 10.0174 12.733 10.2746 12.9259L13.0783 15.0287C13.9195 15.6597 15.1203 15.4381 15.681 14.5485L19.206 8.95595C19.5442 8.41924 18.8846 7.81444 18.3792 8.19796L14.5927 11.0716C14.3366 11.266 13.9827 11.267 13.7254 11.0741L10.9218 8.97136C10.0805 8.3404 8.87978 8.56192 8.31906 9.4516Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 907 B

14
icons/mixer.svg
View file

@ -1,14 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M116.03,77.68c-15.76-21.29-46.72-24.61-66.91-6.36c-17.42,16.04-18.8,43.13-4.7,62.21l90.96,121.92
L43.87,378.48c-14.1,19.08-12.99,46.17,4.7,62.21c20.18,18.25,51.15,14.93,66.91-6.36l127.73-171.69c3.04-4.15,3.04-9.95,0-14.1
L116.03,77.68z"/>
<path class="st0" d="M396.37,77.68c15.76-21.29,46.72-24.61,66.91-6.36c17.42,16.04,18.8,43.13,4.7,62.21l-90.96,121.92
l91.51,123.03c14.1,19.08,12.99,46.17-4.7,62.21c-20.18,18.25-51.15,14.93-66.91-6.36L269.47,262.36c-3.04-4.15-3.04-9.95,0-14.1
L396.37,77.68z"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 934 B

13
icons/pinterest.svg
View file

@ -1,2 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="littlelink" data-icon="pinterest" class="svg-inline pinterest" role="img" viewBox="0 0 496 512"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#FFFFFF" d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/></svg> <g clip-path="url(#clip0)">
<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="white"/>
<path d="M12 0C5.37284 0 0 5.37284 0 12C0 17.0864 3.16049 21.4321 7.62469 23.1802C7.51605 22.2321 7.42716 20.7704 7.6642 19.7333C7.88148 18.7951 9.06667 13.7679 9.06667 13.7679C9.06667 13.7679 8.71111 13.0469 8.71111 11.9901C8.71111 10.321 9.67901 9.07654 10.884 9.07654C11.9111 9.07654 12.4049 9.84691 12.4049 10.7654C12.4049 11.7926 11.7531 13.3333 11.4074 14.7654C11.121 15.9605 12.0099 16.9383 13.1852 16.9383C15.3185 16.9383 16.958 14.6864 16.958 11.4469C16.958 8.57284 14.8938 6.5679 11.9407 6.5679C8.52346 6.5679 6.51852 9.12593 6.51852 11.7728C6.51852 12.8 6.91358 13.9062 7.40741 14.5086C7.50617 14.6272 7.51605 14.7358 7.48642 14.8543C7.39753 15.2296 7.19012 16.0494 7.15062 16.2173C7.10123 16.4346 6.97284 16.484 6.74568 16.3753C5.24444 15.6741 4.30617 13.4914 4.30617 11.7235C4.30617 7.94074 7.05185 4.4642 12.237 4.4642C16.3951 4.4642 19.6346 7.42716 19.6346 11.3975C19.6346 15.5358 17.0272 18.8642 13.4123 18.8642C12.1975 18.8642 11.0519 18.2321 10.6667 17.4815C10.6667 17.4815 10.0642 19.7728 9.91605 20.3358C9.64938 21.3827 8.91852 22.6864 8.42469 23.4864C9.55062 23.8321 10.7358 24.0198 11.9802 24.0198C18.6074 24.0198 23.9802 18.6469 23.9802 12.0198C24 5.37284 18.6272 0 12 0Z" fill="#E60023"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 886 B

After

Width:  |  Height:  |  Size: 1.5 KiB

6
icons/reddit.svg
View file

@ -1,2 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="littlelink" data-icon="reddit" class="svg-inline reddit" role="img" viewBox="0 0 512 512"> <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#FFFFFF" d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"/></svg> <path d="M12.0999 24.4C18.7273 24.4 24.0999 19.0274 24.0999 12.4C24.0999 5.77261 18.7273 0.400024 12.0999 0.400024C5.47244 0.400024 0.0998535 5.77261 0.0998535 12.4C0.0998535 19.0274 5.47244 24.4 12.0999 24.4Z" fill="#FF4500"/>
<path d="M20.0999 12.4C20.0999 11.4316 19.3139 10.6456 18.3455 10.6456C17.8683 10.6456 17.4472 10.8281 17.1385 11.1368C15.9455 10.2807 14.2893 9.7193 12.4648 9.64912L13.2648 5.90175L15.8613 6.44912C15.8893 7.10877 16.4367 7.64211 17.1104 7.64211C17.7981 7.64211 18.3595 7.0807 18.3595 6.39298C18.3595 5.70526 17.7981 5.14386 17.1104 5.14386C16.6192 5.14386 16.1981 5.42456 16.0016 5.84561L13.0964 5.22807C13.0121 5.21404 12.9279 5.22807 12.8578 5.27018C12.7876 5.31228 12.7455 5.38246 12.7174 5.46667L11.8332 9.64912C9.96653 9.70526 8.29635 10.2526 7.08933 11.1368C6.78056 10.8421 6.34547 10.6456 5.88232 10.6456C4.91389 10.6456 4.12793 11.4316 4.12793 12.4C4.12793 13.1158 4.54898 13.7193 5.16653 14C5.13846 14.1684 5.12442 14.3509 5.12442 14.5333C5.12442 17.2281 8.25425 19.4035 12.1279 19.4035C16.0016 19.4035 19.1314 17.2281 19.1314 14.5333C19.1314 14.3509 19.1174 14.1825 19.0893 14.014C19.6648 13.7333 20.0999 13.1158 20.0999 12.4ZM8.09986 13.6491C8.09986 12.9614 8.66126 12.4 9.34898 12.4C10.0367 12.4 10.5981 12.9614 10.5981 13.6491C10.5981 14.3368 10.0367 14.8982 9.34898 14.8982C8.66126 14.8982 8.09986 14.3368 8.09986 13.6491ZM15.0753 16.9474C14.2192 17.8035 12.5911 17.8597 12.1139 17.8597C11.6367 17.8597 9.9946 17.7895 9.15249 16.9474C9.02617 16.8211 9.02617 16.6105 9.15249 16.4842C9.27881 16.3579 9.48933 16.3579 9.61565 16.4842C10.149 17.0175 11.2999 17.214 12.1279 17.214C12.956 17.214 14.0928 17.0175 14.6402 16.4842C14.7665 16.3579 14.9771 16.3579 15.1034 16.4842C15.2016 16.6246 15.2016 16.8211 15.0753 16.9474ZM14.8507 14.8982C14.163 14.8982 13.6016 14.3368 13.6016 13.6491C13.6016 12.9614 14.163 12.4 14.8507 12.4C15.5385 12.4 16.0999 12.9614 16.0999 13.6491C16.0999 14.3368 15.5385 14.8982 14.8507 14.8982Z" fill="white"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 2 KiB

3
icons/rocketseat.svg
View file

@ -1,3 +0,0 @@
<svg width="280" height="347" viewBox="0 0 280 347" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M276.548 7.24237L231.284 0.580887C229.945 0.314428 228.606 0.847314 228.07 1.38023L208.787 26.4274C207.447 28.0262 207.18 30.1579 207.715 32.0231C208.251 33.8883 206.644 35.4871 204.769 35.2206L188.967 31.7566C186.557 31.2237 183.878 32.0231 182.271 34.1548L119.599 114.093C118.527 115.691 116.385 116.224 114.51 115.425L90.673 104.767C88.5303 103.701 86.1199 103.967 84.245 105.299L72.1926 113.56C70.3178 114.892 67.6395 115.158 65.4968 114.093L59.6045 111.162C55.8549 109.296 51.3018 111.428 50.2304 115.425L45.9451 134.344C44.8738 138.873 46.7486 143.403 50.7661 145.801L59.8723 151.397L89.066 169.25L103.261 178.043C107.279 180.441 112.367 179.908 115.849 176.977L139.686 156.193C141.561 154.594 144.507 154.062 146.65 155.394L153.881 159.124C156.292 160.457 159.238 159.924 161.113 158.058L173.165 146.867C175.04 145.002 177.986 144.735 180.129 145.801L198.073 154.062C200.752 155.394 203.966 154.594 205.84 152.196L214.143 141.538L277.084 61.3336C280.03 57.6032 278.155 52.0076 273.334 50.9417L259.407 47.7442C256.461 47.2113 255.121 43.4808 257.264 41.3492L278.958 14.4367C281.101 11.2392 279.762 7.77529 276.548 7.24237ZM68.9781 168.717C67.6389 167.918 66.2998 169.25 66.8354 170.582L73.5312 188.168C74.0669 189.501 74.0668 190.833 73.799 192.165L67.9067 215.081C67.6389 216.68 68.1746 218.278 69.2459 219.078L86.1193 232.134C87.7263 233.2 89.8689 233.2 91.2081 231.868L108.885 216.413C109.956 215.614 111.295 215.081 112.367 214.814L132.454 212.683C133.793 212.416 134.329 210.551 132.99 209.752L68.9781 168.717ZM59.0689 227.338C60.4081 226.805 62.0151 227.072 63.0864 227.871L81.2989 241.727C82.1024 242.526 82.6381 243.592 82.6381 244.924L81.0311 265.175C80.7633 266.241 80.4955 267.04 79.692 267.84L1.21734 346.179C0.681676 346.978 -0.389674 346.179 0.145989 345.38L21.8404 309.94C22.1082 309.674 21.8403 309.141 21.5725 308.875H20.769L13.8054 311.539C13.2697 311.539 13.0019 311.273 12.7341 311.006V310.473L42.999 236.131C43.5347 235.332 44.0704 234.532 44.8739 234.266L59.0689 227.338Z" fill="white"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 2.1 KiB

6
icons/snapchat.svg
View file

@ -1,2 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="littlelink" data-icon="snapchat" class="svg-inline snapchat" role="img" viewBox="0 0 512 512"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#000000" d="M510.846 392.673c-5.211 12.157-27.239 21.089-67.36 27.318-2.064 2.786-3.775 14.686-6.507 23.956-1.625 5.566-5.623 8.869-12.128 8.869l-.297-.005c-9.395 0-19.203-4.323-38.852-4.323-26.521 0-35.662 6.043-56.254 20.588-21.832 15.438-42.771 28.764-74.027 27.399-31.646 2.334-58.025-16.908-72.871-27.404-20.714-14.643-29.828-20.582-56.241-20.582-18.864 0-30.736 4.72-38.852 4.72-8.073 0-11.213-4.922-12.422-9.04-2.703-9.189-4.404-21.263-6.523-24.13-20.679-3.209-67.31-11.344-68.498-32.15a10.627 10.627 0 0 1 8.877-11.069c69.583-11.455 100.924-82.901 102.227-85.934.074-.176.155-.344.237-.515 3.713-7.537 4.544-13.849 2.463-18.753-5.05-11.896-26.872-16.164-36.053-19.796-23.715-9.366-27.015-20.128-25.612-27.504 2.437-12.836 21.725-20.735 33.002-15.453 8.919 4.181 16.843 6.297 23.547 6.297 5.022 0 8.212-1.204 9.96-2.171-2.043-35.936-7.101-87.29 5.687-115.969C158.122 21.304 229.705 15.42 250.826 15.42c.944 0 9.141-.089 10.11-.089 52.148 0 102.254 26.78 126.723 81.643 12.777 28.65 7.749 79.792 5.695 116.009 1.582.872 4.357 1.942 8.599 2.139 6.397-.286 13.815-2.389 22.069-6.257 6.085-2.846 14.406-2.461 20.48.058l.029.01c9.476 3.385 15.439 10.215 15.589 17.87.184 9.747-8.522 18.165-25.878 25.018-2.118.835-4.694 1.655-7.434 2.525-9.797 3.106-24.6 7.805-28.616 17.271-2.079 4.904-1.256 11.211 2.46 18.748.087.168.166.342.239.515 1.301 3.03 32.615 74.46 102.23 85.934 6.427 1.058 11.163 7.877 7.725 15.859z"/></svg> <path d="M22.2398 17.6933C18.5505 15.8857 17.9625 13.0948 17.9364 12.8878C17.9047 12.6371 17.8688 12.4399 18.1421 12.1849C18.4057 11.9384 19.5749 11.2059 19.8994 10.9767C20.4356 10.5972 20.6718 10.2183 20.4977 9.75256C20.376 9.43034 20.0796 9.30897 19.7673 9.30897C19.6688 9.30928 19.5706 9.32043 19.4745 9.34224C18.8853 9.47162 18.3131 9.77042 17.982 9.85113C17.9422 9.86151 17.9014 9.8671 17.8603 9.86776C17.6837 9.86776 17.6168 9.78829 17.6338 9.57327C17.6752 8.92146 17.7629 7.64924 17.6612 6.46081C17.5218 4.82571 17.0008 4.01556 16.383 3.29905C16.0841 2.95158 14.6963 1.4588 12.018 1.4588C9.3398 1.4588 7.95381 2.95158 7.65677 3.29474C7.03712 4.01125 6.51669 4.8214 6.37852 6.45649C6.27687 7.64492 6.36817 8.91653 6.40591 9.56896C6.41809 9.7735 6.356 9.86345 6.17948 9.86345C6.1384 9.86274 6.09754 9.85716 6.05774 9.84682C5.72722 9.76611 5.15505 9.46731 4.56584 9.33793C4.46973 9.31612 4.37155 9.30497 4.27306 9.30466C3.95958 9.30466 3.66437 9.42788 3.54263 9.74824C3.36854 10.214 3.6035 10.5929 4.14158 10.9724C4.46601 11.2016 5.63531 11.9335 5.89887 12.1806C6.17157 12.4356 6.13626 12.6328 6.10461 12.8835C6.07844 13.0936 5.48983 15.8845 1.80116 17.689C1.58508 17.7949 1.21743 18.0192 1.86568 18.3815C2.88341 18.9507 3.56089 18.8897 4.08741 19.2329C4.53419 19.5243 4.27001 20.1527 4.59505 20.3794C4.99436 20.6585 6.17461 20.3597 7.69938 20.8692C8.97763 21.2955 9.75432 22.5 12.0211 22.5C14.2879 22.5 15.0871 21.29 16.3428 20.8692C17.8645 20.3597 19.0472 20.6585 19.4471 20.3794C19.7716 20.1527 19.508 19.5243 19.9548 19.2329C20.4813 18.8897 21.1582 18.9507 22.1765 18.3815C22.8235 18.0235 22.4559 17.7993 22.2398 17.6933Z" fill="white"/>
<path d="M23.4178 17.3218C23.2579 16.8802 22.9535 16.644 22.6068 16.4483C22.5416 16.4095 22.4817 16.3785 22.4305 16.3546C22.3271 16.3003 22.2213 16.2478 22.1161 16.1923C21.0355 15.6106 20.1916 14.8767 19.6063 14.0068C19.4401 13.7619 19.296 13.5023 19.1756 13.2312C19.1256 13.0862 19.128 13.0039 19.1638 12.9287C19.1994 12.8708 19.2464 12.821 19.3019 12.7825C19.4876 12.6578 19.6792 12.5313 19.8091 12.446C20.0406 12.2938 20.2239 12.1733 20.3421 12.088C20.7857 11.773 21.096 11.4383 21.2899 11.0642C21.4252 10.8057 21.5041 10.5207 21.5213 10.2285C21.5384 9.93633 21.4934 9.64383 21.3892 9.37089C21.0954 8.58571 20.365 8.09825 19.48 8.09825C19.2933 8.09807 19.1072 8.11807 18.9247 8.15792C18.8759 8.16866 18.8271 8.17999 18.7795 8.19252C18.7877 7.65554 18.776 7.08873 18.729 6.53087C18.5621 4.5697 17.8857 3.54169 17.1805 2.7219C16.729 2.20818 16.1971 1.77357 15.6062 1.43554C14.5361 0.815028 13.3227 0.5 11.9999 0.5C10.6771 0.5 9.4695 0.815028 8.39823 1.43554C7.80595 1.77367 7.27298 2.20916 6.82099 2.72429C6.11582 3.54407 5.43945 4.57388 5.27256 6.53326C5.22555 7.09112 5.21379 7.66091 5.22143 8.19491C5.17383 8.18238 5.12565 8.17104 5.07687 8.1603C4.89437 8.12046 4.70822 8.10046 4.52155 8.10064C3.63597 8.10064 2.90436 8.5881 2.61171 9.37328C2.50711 9.64633 2.46163 9.93905 2.47836 10.2315C2.49509 10.524 2.57364 10.8094 2.70867 11.0683C2.90318 11.4424 3.21346 11.7772 3.65713 12.0922C3.77466 12.1757 3.95859 12.2962 4.19012 12.4502C4.31529 12.5325 4.49804 12.653 4.67727 12.7735C4.73998 12.8147 4.79328 12.869 4.83359 12.9329C4.8712 13.011 4.87237 13.0951 4.81655 13.2503C4.69781 13.5157 4.55602 13.7699 4.39286 14.0098C3.82049 14.86 3.00132 15.5808 1.95532 16.1577C1.40117 16.456 0.82528 16.6553 0.581996 17.3265C0.398651 17.8331 0.51853 18.4094 0.98453 18.8951C1.15556 19.0764 1.35392 19.2288 1.57217 19.3468C2.0263 19.6002 2.50919 19.7963 3.01013 19.9309C3.11351 19.958 3.21165 20.0025 3.30043 20.0627C3.47026 20.2137 3.44616 20.441 3.67241 20.7739C3.78598 20.946 3.93028 21.0949 4.09786 21.2131C4.57267 21.546 5.10625 21.5669 5.67157 21.589C6.18223 21.6086 6.76105 21.6313 7.42215 21.8527C7.69599 21.9446 7.98041 22.1224 8.31008 22.33C9.10163 22.824 10.1852 23.5 11.9987 23.5C13.8122 23.5 14.9034 22.8204 15.7009 22.3246C16.0282 22.1206 16.3108 21.9446 16.577 21.8551C17.2381 21.6331 17.817 21.611 18.3276 21.5913C18.8929 21.5693 19.4265 21.5484 19.9013 21.2155C20.0998 21.0749 20.2652 20.8916 20.3855 20.6785C20.5483 20.3975 20.5442 20.2012 20.697 20.0639C20.7803 20.0066 20.8724 19.9638 20.9697 19.9374C21.4774 19.8025 21.9669 19.6045 22.427 19.348C22.6589 19.2217 22.8676 19.0558 23.044 18.8575L23.0499 18.8504C23.4871 18.3754 23.597 17.8158 23.4178 17.3218ZM21.8059 18.2012C20.8227 18.7525 20.1693 18.6934 19.661 19.0258C19.2291 19.308 19.4847 19.9166 19.1709 20.1361C18.7854 20.4064 17.646 20.117 16.1739 20.6105C14.9598 21.018 14.1853 22.1898 12.0016 22.1898C9.81797 22.1898 9.06167 21.0203 7.82762 20.6075C6.35852 20.114 5.21673 20.4034 4.83065 20.1331C4.51744 19.9136 4.77189 19.305 4.34056 19.0228C3.83166 18.6905 3.1782 18.7495 2.19566 18.2012C1.56982 17.8504 1.92476 17.6332 2.13337 17.5306C5.69448 15.78 6.26273 13.0772 6.288 12.8768C6.31856 12.6339 6.35264 12.443 6.08938 12.196C5.83493 11.9573 4.70607 11.2479 4.39286 11.026C3.87456 10.6584 3.64655 10.2915 3.81462 9.84045C3.93214 9.5284 4.21891 9.41087 4.51979 9.41087C4.61488 9.41116 4.70965 9.42197 4.80244 9.44309C5.37128 9.56838 5.92366 9.85775 6.24275 9.93591C6.28118 9.94593 6.32062 9.95133 6.36028 9.95202C6.5307 9.95202 6.59064 9.86491 6.57889 9.66683C6.54245 9.03498 6.45431 7.80351 6.55244 6.65259C6.68701 5.06909 7.18945 4.28451 7.78649 3.59061C8.07326 3.25709 9.42072 1.81142 11.9975 1.81142C14.5743 1.81142 15.9253 3.25112 16.2121 3.58345C16.8097 4.27735 17.3128 5.06193 17.4462 6.64543C17.5443 7.79635 17.4597 9.02842 17.4197 9.65967C17.4062 9.86789 17.4679 9.94486 17.6383 9.94486C17.678 9.94422 17.7174 9.93881 17.7558 9.92875C18.0755 9.85059 18.6279 9.56122 19.1967 9.43593C19.2895 9.4148 19.3843 9.404 19.4794 9.40371C19.782 9.40371 20.067 9.52304 20.1846 9.83329C20.3526 10.2844 20.1258 10.6513 19.6069 11.0188C19.2937 11.2408 18.1648 11.9496 17.9104 12.1888C17.6465 12.4358 17.6812 12.6268 17.7118 12.8696C17.737 13.0731 18.3047 15.7759 21.8664 17.5234C22.0768 17.6302 22.4317 17.8474 21.8059 18.2012Z" fill="black"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

5
icons/spectrum.svg
View file

@ -1,5 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg">
<g id="logo">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 14.5C6 15.3284 6.67157 16 7.5 16H9C12.866 16 16 19.134 16 23V24.5C16 25.3284 16.6716 26 17.5 26H24.5C25.3284 26 26 25.3284 26 24.5V23C26 13.6111 18.3889 6 9 6H7.5C6.67157 6 6 6.67157 6 7.5V14.5Z" fill="#FFFFFF"/>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 390 B

2
icons/spotify.svg
View file

@ -1,2 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="littlelink" data-icon="spotify" class="svg-inline spotify" role="img" viewBox="0 0 496 512"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="littlelink" data-icon="spotify" class="svg-inline spotify" role="img" viewBox="0 0 496 512">
<path fill="#FFFFFF" d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"/></svg> <path fill="#1DB954" d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"/></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1,005 B

After

Width:  |  Height:  |  Size: 1,005 B

10
icons/vimeo.svg Normal file
View file

@ -0,0 +1,10 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M24.1776 6.35832C24.07 8.72157 22.4253 11.9576 19.2444 16.0647C15.9556 20.3551 13.1731 22.5 10.8969 22.5C9.48735 22.5 8.2936 21.194 7.31925 18.5809C6.66807 16.1857 6.01761 13.7907 5.36668 11.3955C4.64268 8.78384 3.86644 7.47634 3.0365 7.47634C2.85557 7.47634 2.22229 7.85846 1.13811 8.6198L0 7.14825C1.19375 6.09542 2.37154 5.04283 3.53021 3.98878C5.12236 2.60786 6.31756 1.88166 7.11412 1.80824C8.99679 1.62675 10.1555 2.91826 10.5904 5.68301C11.0604 8.66584 11.3855 10.5212 11.5684 11.2474C12.1109 13.7221 12.7079 14.9579 13.3603 14.9579C13.8666 14.9579 14.6271 14.1554 15.6412 12.5503C16.6542 10.9448 17.1968 9.72327 17.2701 8.88416C17.4142 7.49863 16.8714 6.80417 15.6412 6.80417C15.0621 6.80417 14.4651 6.93793 13.8509 7.20229C15.0396 3.29408 17.311 1.39607 20.6636 1.50439C23.1491 1.57756 24.3208 3.19546 24.1776 6.35832Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

51
icons/wordpress.svg
View file

@ -1,50 +1,3 @@
<?xml version="1.0" encoding="iso-8859-1"?> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <path d="M12 0C5.38667 0 0 5.38133 0 12C0 18.6133 5.38667 24 12 24C18.6133 24 24 18.6133 24 12C24 5.38133 18.6133 0 12 0ZM1.21067 12C1.21067 10.4373 1.54667 8.94933 2.144 7.61067L7.29067 21.712C3.69067 19.9573 1.21067 16.2667 1.21067 12ZM12 22.7893C10.9387 22.7893 9.92 22.6347 8.94933 22.3467L12.1867 12.9387L15.4987 22.0267C15.5253 22.08 15.5467 22.128 15.5787 22.176C14.464 22.5707 13.2587 22.7893 12 22.7893ZM13.488 6.944C14.1387 6.912 14.72 6.84267 14.72 6.84267C15.3013 6.77333 15.232 5.92 14.6507 5.952C14.6507 5.952 12.9013 6.08533 11.776 6.08533C10.7147 6.08533 8.93333 5.952 8.93333 5.952C8.352 5.92 8.28267 6.81067 8.864 6.84267C8.864 6.84267 9.41333 6.912 9.99467 6.944L11.6747 11.552L9.312 18.6293L5.38133 6.944C6.032 6.912 6.61333 6.84267 6.61333 6.84267C7.19467 6.77333 7.12533 5.92 6.544 5.952C6.544 5.952 4.79467 6.08533 3.66933 6.08533C3.46667 6.08533 3.22667 6.08 2.97067 6.06933C4.90133 3.14133 8.21333 1.20533 11.984 1.20533C14.7893 1.20533 17.3493 2.27733 19.2693 4.03733C19.2213 4.032 19.1787 4.02667 19.1307 4.02667C18.0693 4.02667 17.3227 4.94933 17.3227 5.94133C17.3227 6.832 17.8347 7.584 18.384 8.46933C18.7947 9.184 19.2747 10.112 19.2747 11.4453C19.2747 12.368 18.9227 13.44 18.4533 14.9333L17.3813 18.528L13.488 6.944ZM17.424 21.3227L20.72 11.7973C21.3333 10.256 21.5413 9.02933 21.5413 7.93067C21.5413 7.536 21.5147 7.168 21.4667 6.82133C22.3093 8.36267 22.7893 10.1227 22.7893 12C22.7893 15.984 20.6347 19.456 17.424 21.3227Z" fill="white"/>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<path style="fill:#D6D6D6;" d="M113.778,113.597L113.778,113.597c-31.289,6.637-63.526,6.637-94.815,0l0,0
C8.533,113.597,0,105.063,0,94.634l0,0c0-10.43,8.533-18.963,18.963-18.963l0,0c31.289,6.637,63.526,6.637,94.815,0l0,0
c10.43,0,18.963,8.533,18.963,18.963l0,0C132.741,105.063,124.207,113.597,113.778,113.597"/>
<path style="fill:#D6D6D6;" d="M312.889,113.597L312.889,113.597c-37.926,6.637-75.852,6.637-113.778,0
c-10.43,0-18.963-8.533-18.963-18.963l0,0c0-10.43,8.533-18.963,18.963-18.963c37.926,6.637,75.852,6.637,113.778,0
c10.43,0,18.963,8.533,18.963,18.963l0,0C331.852,105.063,323.319,113.597,312.889,113.597"/>
<path style="fill:#D6D6D6;" d="M505.363,77.567c-9.481-24.652-17.067-35.081-69.215-35.081c-24.652,0-47.407,18.963-47.407,47.407
c0,20.859,17.067,41.719,28.444,66.37c10.43,20.859,18.963,35.081,18.963,66.37c0,12.326-2.844,25.6-6.637,41.719l0,0
l-40.77,119.467l-94.815-267.378c-26.548,2.844-53.096,2.844-78.696,0L256,222.634l-56.889,168.77l-98.607-274.963
c-24.652,2.844-51.2,2.844-75.852-1.896l117.57,323.319c5.689,15.17,18.015,26.548,33.185,30.341
c23.704,5.689,48.356-7.585,55.941-31.289l62.578-185.837l66.37,185.837c7.585,18.015,23.704,28.444,41.719,18.963
c9.481-3.793,17.067-11.378,20.859-21.807l70.163-210.489C507.259,187.552,512,153.419,512,127.819v-15.17
C512,100.323,510.104,88.945,505.363,77.567"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

13
icons/youtube.svg
View file

@ -1,2 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="littlelink" data-icon="youtube" class="svg-inline youtube" role="img" viewBox="0 0 576 512"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#FFFFFF" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg> <g clip-path="url(#clip0)">
<path d="M23.4982 6.15419C23.2227 5.10952 22.4086 4.28694 21.3764 4.00726C19.5055 3.5 12 3.5 12 3.5C12 3.5 4.49455 3.5 2.62364 4.00726C1.59136 4.28694 0.777273 5.10952 0.501818 6.15419C0 8.04887 0 12 0 12C0 12 0 15.9511 0.501818 17.8458C0.777273 18.8905 1.59136 19.7131 2.62364 19.9927C4.49455 20.5 12 20.5 12 20.5C12 20.5 19.5055 20.5 21.3764 19.9927C22.4086 19.7131 23.2227 18.8905 23.4982 17.8458C24 15.9511 24 12 24 12C24 12 24 8.04887 23.4982 6.15419Z" fill="#FF0000"/>
<path d="M9.54541 15.5878L15.8181 11.9999L9.54541 8.41211V15.5878Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="24" height="17" fill="white" transform="translate(0 3.5)"/>
</clipPath>
</defs>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 686 B

After

Width:  |  Height:  |  Size: 816 B

45
index.html
View file

@ -6,8 +6,8 @@
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8"> <meta charset="utf-8">
<title>LittleLink</title> <title>LittleLink</title>
<meta name="description" content=""> <meta name="description" content="Find us online!">
<meta name="author" content=""> <meta name="author" content="Seth Cottle">
<!-- Mobile Specific Metas <!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->
@ -44,8 +44,8 @@
<!-- Short Bio --> <!-- Short Bio -->
<p>LittleLink is an open source DIY alternative to services like <a href="https://linktr.ee">Linktree</a> and <a href="https://many.link">many.link</a>. LittleLink was built using <a href="http://www.getskeleton.com">Skeleton</a>, a dead simple, responsive boilerplate—we’ve just created some branded buttons and stripped out the things you won't need. 😊</p> <p>LittleLink is an open source DIY alternative to services like <a href="https://linktr.ee">Linktree</a> and <a href="https://many.link">many.link</a>. LittleLink was built using <a href="http://www.getskeleton.com">Skeleton</a>, a dead simple, responsive boilerplate—we’ve just created some branded buttons and stripped out the things you won't need. 😊</p>
<!-- Replace # with your profile URL. Delete whatever you don't need & create your own brand styles in css/brands.css -->
<!-- Replace # with your profile URL. Delete whatever you don't need & create your own brand styles in css/brands.css -->
<!-- Github --> <!-- Github -->
<a class="button button-github" href="#"><img class="icon" src="icons/github.svg">Github</a> <a class="button button-github" href="#"><img class="icon" src="icons/github.svg">Github</a>
@ -60,7 +60,11 @@
<br> <br>
<!-- Facebook --> <!-- Facebook -->
<a class="button button-facebook" href="#"><img class="icon" src="icons/facebook.svg">Facebook</a> <a class="button button-facebook" href="#"><img class="icon" src="icons/facebook.svg">Find us on Facebook</a>
<br>
<!-- Facebook Messenger -->
<a class="button button-messenger" href="#"><img class="icon" src="icons/messenger.svg">Chat on Messenger</a>
<br> <br>
<!-- LinkedIn --> <!-- LinkedIn -->
@ -71,6 +75,14 @@
<a class="button button-youtube" href="#"><img class="icon" src="icons/youtube.svg">YouTube</a> <a class="button button-youtube" href="#"><img class="icon" src="icons/youtube.svg">YouTube</a>
<br> <br>
<!-- Discord -->
<a class="button button-discord" href="#"><img class="icon" src="icons/discord.svg">Discord</a>
<br>
<!-- Twitch -->
<a class="button button-twitch" href="#"><img class="icon" src="icons/twitch.svg">Twitch</a>
<br>
<!-- Snapchat --> <!-- Snapchat -->
<a class="button button-snapchat" href="#"><img class="icon" src="icons/snapchat.svg">Snapchat</a> <a class="button button-snapchat" href="#"><img class="icon" src="icons/snapchat.svg">Snapchat</a>
<br> <br>
@ -83,26 +95,18 @@
<a class="button button-reddit" href="#"><img class="icon" src="icons/reddit.svg">Reddit</a> <a class="button button-reddit" href="#"><img class="icon" src="icons/reddit.svg">Reddit</a>
<br> <br>
<!-- Rocketseat -->
<a class="button button-rocketseat" href="#"><img class="icon" src="icons/rocketseat.svg">Rocketseat</a>
<br>
<!-- Medium --> <!-- Medium -->
<a class="button button-medium" href="#"><img class="icon" src="icons/medium.svg">Medium</a> <a class="button button-medium" href="#"><img class="icon" src="icons/medium.svg">Medium</a>
<br> <br>
<!-- Pinterest --> <!-- Pinterest -->
<a class="button button-pinterest" href="#"><img class="icon" src="icons/pinterest.svg">Pinterest</a> <a class="button button-pinterest" href="#"><img class="icon" src="icons/pinterest.svg">Follow on Pinterest</a>
<br> <br>
<!-- SoundCloud --> <!-- SoundCloud -->
<a class="button button-soundcloud" href="#"><img class="icon" src="icons/soundcloud.svg">SoundCloud</a> <a class="button button-soundcloud" href="#"><img class="icon" src="icons/soundcloud.svg">SoundCloud</a>
<br> <br>
<!-- Spectrum -->
<a class="button button-spectrum" href="#"><img class="icon" src="icons/spectrum.svg">Spectrum</a>
<br>
<!-- Figma --> <!-- Figma -->
<a class="button button-figma" href="#"><img class="icon" src="icons/figma.svg">Figma</a> <a class="button button-figma" href="#"><img class="icon" src="icons/figma.svg">Figma</a>
<br> <br>
@ -123,17 +127,12 @@
<a class="button button-steam" href="#"><img class="icon" src="icons/steam.svg">Steam</a> <a class="button button-steam" href="#"><img class="icon" src="icons/steam.svg">Steam</a>
<br> <br>
<!-- Discord --> <!-- Vimeo -->
<a class="button button-discord" href="#"><img class="icon" src="icons/discord.svg">Discord</a> <a class="button button-vimeo" href="#"><img class="icon" src="icons/vimeo.svg">Vimeo</a>
<br> <br>
<!-- Twitch --> <!-- Wordpress -->
<a class="button button-twitch" href="#"><img class="icon" src="icons/twitch.svg">Twitch</a> <a class="button button-wordpress" href="#"><img class="icon" src="icons/wordpress.svg">Wordpress</a>
<br>
<!-- Mixer -->
<a class="button button-mixer" href="#"><img class="icon" src="icons/mixer.svg">Mixer</a>
<br>
<!-- Goodreads --> <!-- Goodreads -->
<a class="button button-goodreads" href="#"><img class="icon" src="icons/goodreads.svg">Goodreads</a> <a class="button button-goodreads" href="#"><img class="icon" src="icons/goodreads.svg">Goodreads</a>
@ -143,8 +142,6 @@
<a class="button button-skoob" href="#"><img class="icon" src="icons/skoob.svg">Skoob</a> <a class="button button-skoob" href="#"><img class="icon" src="icons/skoob.svg">Skoob</a>
<br> <br>
<!-- Wordpress -->
<a class="button button-wordpress" href="#"><img class="icon" src="icons/wordpress.svg">Wordpress</a>
<br> <br>
<br> <br>
<p>Build your own by forking <a href="https://littlelink.io">LittleLink</a>.</p> <p>Build your own by forking <a href="https://littlelink.io">LittleLink</a>.</p>