Merge github.com:sethcottle/littlelink

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.

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 */

images/icons/bandcamp.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="682.7" height="682.7">
+  <defs>
+    <clipPath clipPathUnits="userSpaceOnUse" id="a">
+      <path d="M2560 0c1413.8 0 2560 1146.2 2560 2560S3973.8 5120 2560 5120 0 3973.8 0 2560 1146.2 0 2560 0Z" clip-rule="evenodd" />
+    </clipPath>
+    <clipPath clipPathUnits="userSpaceOnUse" id="b">
+      <path d="M0 0h5120v5120H0Z" />
+    </clipPath>
+    <clipPath clipPathUnits="userSpaceOnUse" id="c">
+      <path d="M3057.8 1755H1190l872.2 1610H3930l-872.2-1610" clip-rule="evenodd" />
+    </clipPath>
+    <clipPath clipPathUnits="userSpaceOnUse" id="d">
+      <path d="M0 0h5120v5120H0Z" />
+    </clipPath>
+  </defs>
+  <g clip-path="url(#a)" transform="matrix(.13333 0 0 -.13333 0 682.7)">
+    <g clip-path="url(#b)">
+      <path d="M2560 0c1413.8 0 2560 1146.2 2560 2560S3973.8 5120 2560 5120 0 3973.8 0 2560 1146.2 0 2560 0Z" style="fill:none;stroke:#fff;stroke-width:320;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+  </g>
+  <g clip-path="url(#c)" transform="matrix(.13333 0 0 -.13333 0 682.7)">
+    <g clip-path="url(#d)">
+      <path d="M1140 1705h2840v1710H1140Z" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none" />
+    </g>
+  </g>
+</svg>

images/icons/patreon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024">
+   <path d="M629.8 111.5a301 301 0 0 0-300.7 300.7C329 577.5 464 712 629.8 712a300.1 300.1 0 0 0 0-600.5m-535.4 801h146.9v-801h-147" style="fill:#fff;stroke-width:1.76957" />
+</svg>

images/icons/signal.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024">
+   <path fill="#fff" d="m397 46.7 10.7 43.6a435.2 435.2 0 0 0-120.4 49.9l-23-38.6A473.3 473.3 0 0 1 397 46.7zm230 0-10.7 43.6a435.2 435.2 0 0 1 120.4 49.9l23.2-38.6a476.7 476.7 0 0 0-132.8-54.9ZM101.7 264.2a475.9 475.9 0 0 0-54.9 132.7l43.6 10.8a435.2 435.2 0 0 1 49.9-120.4ZM77.6 512a433.7 433.7 0 0 1 5-65L38.2 440a479.3 479.3 0 0 0 0 143.7l44.4-6.7a435 435 0 0 1-5-65.1Zm682 410.2-23-38.4a432.7 432.7 0 0 1-120.2 49.9l10.8 43.6a477 477 0 0 0 132.5-55ZM946.4 512a435 435 0 0 1-4.9 65l44.4 6.8a479.3 479.3 0 0 0 0-143.7l-44.4 6.8a433.7 433.7 0 0 1 5 65.1zm31 115-43.6-10.8a434.3 434.3 0 0 1-49.9 120.5l38.6 23.1A475 475 0 0 0 977.3 627ZM577 941.3a434.5 434.5 0 0 1-130.2 0l-6.7 44.4a478.3 478.3 0 0 0 143.6 0zm284.6-171.8a433.1 433.1 0 0 1-92 92l26.6 36.1a483.5 483.5 0 0 0 101.6-101.1Zm-92-607.3a433.8 433.8 0 0 1 92 92l36.2-26.9a482.8 482.8 0 0 0-101.3-101.3Zm-607.4 92a433.8 433.8 0 0 1 92-92l-26.9-36.2a482.8 482.8 0 0 0-101.3 101.3Zm760 9.9-38.5 23.1a432.7 432.7 0 0 1 49.9 120.3l43.6-10.8a475 475 0 0 0-55-132.6ZM447 82.6a434.5 434.5 0 0 1 130.2 0l6.7-44.4a478.3 478.3 0 0 0-143.6 0zM185.4 909.7l-92.8 21.5 21.7-92.7-43.7-10.2L48.9 921a45 45 0 0 0 33.5 54 47 47 0 0 0 20.4 0l92.8-21.3ZM79.8 788.3l43.9 10 15-64.2a430.5 430.5 0 0 1-48.4-118L46.7 627A481 481 0 0 0 91 741zm209.7 97.2-64.2 15 10.2 43.8 47.2-11a475.2 475.2 0 0 0 114 44l10.7-43.5A431.2 431.2 0 0 1 290 885.2Zm222.5-763a389.5 389.5 0 0 0-389.3 389.6 390.4 390.4 0 0 0 59.8 207l-37.4 159.8 159.7-37.4a389.5 389.5 0 0 0 415.1-659 390.4 390.4 0 0 0-207.9-60" style="stroke-width:1.36157"/>
+</svg>

images/icons/venmo.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" xml:space="preserve">
+   <path d="M434.6 41.4a157 157 0 0 1 22.6 85.8c0 107-91.3 245.9-165.3 343.4H122.6L54.8 64.8l148.1-14 36 288.7c33.4-54.6 74.8-140.5 74.8-199 0-32-5.5-53.8-14-71.8z" style="fill:#fff;stroke-width:4.00528"/>
+</svg>

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.