New Brands

Added Etsy, Kickstarter, LittleLink, Notion, and Trello. Reorganized the brands.css to be in alphabetical order.

README.md

@@ -25,15 +25,22 @@ No need for gulp, npm, or anything else to make LittleLink work—it uses the ba
 Duplicate the [LittleLink Template on Figma Community](https://www.figma.com/community/file/846568099968305613) to help plan out and design your LittleLink page.
 
 ##### 🐋 Docker
-[Techno Tim](https://github.com/timothystewart6) built [LittleLink-Server](https://github.com/techno-tim/littlelink-server). Check out [his video](https://youtu.be/42SqfI_AjXU)!
+[Techno Tim](https://github.com/timothystewart6) is building [LittleLink-Server](https://github.com/techno-tim/littlelink-server). Check out [his video](https://youtu.be/42SqfI_AjXU)!
 
-[Drew](https://github.com/davisdre) built a [super simple Docker implementation of LittleLink](https://github.com/davisdre/littlelink).
+[Drew](https://github.com/davisdre) is building a [super simple Docker implementation of LittleLink](https://github.com/davisdre/littlelink).
 
 ##### 🗃️ 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! 
+[Khashayar](https://github.com/khashayarzavosh) is building [LittleLink Admin](https://github.com/khashayarzavosh/admin-littlelink) which lets you host your own admin portal to manage LittleLink!
+
+[Julian](https://github.com/JulianPrieber) is building [LittleLink Custom](https://github.com/JulianPrieber/littlelink-custom) which approaches the admin portal with an easy-to-use "plug-and-play" mentality!
 
 #### 💖 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 the [LittleLink.io](https://littlelink.io) website.
 
+##### 🏢 Business Supporters
+[Add Your Company Name](https://www.buymeacoffee.com/seth/e/50574)
+
 ##### ✨ Individual Supporters
-[Drew Davis](https://connect.davisdre.me)
+**[Drew Davis](https://connect.davisdre.me)**
+
+[Add Your Name](https://www.buymeacoffee.com/seth/e/50573)

css/brands.css

@@ -94,36 +94,6 @@ button:hover,
   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%);
-}
-
 /* Cash App */
 .button.button-cashapp {
   color: #ffffff;
@@ -144,6 +114,16 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Etsy */
+.button.button-etsy {
+  color: #ffffff;
+  background-color: #F45800;
+}
+.button.button-etsy:hover,
+.button.button-etsy:focus {
+  filter: brightness(90%);
+}
+
 /* Facebook */
 .button.button-faceb {
   color: #ffffff;
@@ -222,6 +202,16 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* kickstarter */
+.button.button-kickstarter {
+  color: #ffffff;
+  background-color: #05ce78;
+}
+.button.button-kickstarter:hover,
+.button.button-kickstarter:focus {
+  filter: brightness(90%);
+}
+
 /* Kit */
 .button.button-kit {
   color: #ffffff;
@@ -262,6 +252,39 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Notion */
+.button.button-notion {
+  color: #000000;
+  border-style: solid;
+  border-color: #000000;
+  border-width: 2px;
+  background-color: #ffffff;
+}
+.button.button-notion:hover,
+.button.button-notion:focus {
+  filter: brightness(90%);
+}
+
+/* Patreon */
+.button.button-patreon {
+  color: #ffffff;
+  background-color: #ff424d;
+}
+.button.button-patreon:hover,
+.button.button-patreon:focus {
+  filter: brightness(90%);
+}
+
+/* PayPal */
+.button.button-paypal {
+  color: #ffffff;
+  background-color: #003087;
+}
+.button.button-paypal:hover,
+.button.button-paypal:focus {
+  filter: brightness(90%);
+}
+
 /* Pinterest */
 .button.button-pinterest {
   color: #000000;
@@ -295,6 +318,16 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Signal */
+.button.button-signal {
+  color: #ffffff;
+  background-color: #3a76f0;
+}
+.button.button-signal:hover,
+.button.button-signal:focus {
+  filter: brightness(90%);
+}
+
 /* Skoob */
 .button.button-skoob {
   color: #ffffff;
@@ -365,6 +398,16 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Trello */
+.button.button-trello {
+  color: #ffffff;
+  background-color: #0065ff;
+}
+.button.button-trello:hover,
+.button.button-trello:focus {
+  filter: brightness(90%);
+}
+
 /* Tumblr */
 .button.button-tumb {
   color: #ffffff;
@@ -395,6 +438,16 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Venmo */
+.button.button-venmo {
+  color: #ffffff;
+  background-color: #008CFF;
+}
+.button.button-venmo:hover,
+.button.button-venmo:focus {
+  filter: brightness(90%);
+}
+
 /* Vimeo */
 .button.button-vimeo {
   color: #ffffff;
@@ -405,26 +458,6 @@ button:hover,
   filter: brightness(90%);
 }
 
-/* PayPal */
-.button.button-paypal {
-  color: #ffffff;
-  background-color: #003087;
-}
-.button.button-paypal:hover,
-.button.button-paypal:focus {
-  filter: brightness(90%);
-}
-
-/* YouTube */
-.button.button-yt {
-  color: #ffffff;
-  background-color: #000000;
-}
-.button.button-yt:hover,
-.button.button-yt:focus {
-  filter: brightness(90%);
-}
-
 /* Website */
 .button.button-web {
   color: #ffffff;
@@ -464,3 +497,13 @@ button:hover,
 .button.button-xing:focus {
   filter: brightness(90%);
 }
+
+/* YouTube */
+.button.button-yt {
+  color: #ffffff;
+  background-color: #000000;
+}
+.button.button-yt:hover,
+.button.button-yt:focus {
+  filter: brightness(90%);
+}

images/icons/etsy.svg

@@ -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="M2 0C0.895431 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.895431 23.1046 0 22 0H2ZM9.71997 11.523V5.60158C9.71997 5.35518 9.71997 5.27831 10.128 5.27732H15.1634C16.0484 5.27732 16.5264 5.99384 16.8418 7.43378L17.1651 8.55833H18.0432C18.128 5.35518 18.2049 4 18.2049 4C18.2049 4 16.0494 4.23063 14.7711 4.23063H8.36479L5 4.16164V5.03979L6.11667 5.27633C6.92485 5.43797 7.16336 5.59961 7.16336 6.31613C7.16336 6.31613 7.24812 8.48047 7.24812 12.0759C7.24812 15.6802 7.16336 17.8435 7.16336 17.8435C7.16336 18.4832 6.92485 18.7217 6.11667 18.8833L5 19.1297V20L8.44167 19.9231H14.2093C15.4876 19.9231 18.5291 20 18.5291 20C18.606 19.2066 19.0062 15.6802 19.0909 15.28H18.2827L17.4125 17.2049C16.7649 18.7217 15.7261 18.8065 14.6863 18.8065H11.3215C10.2049 18.8065 9.71997 18.3984 9.71997 17.4434V12.477C9.71997 12.477 12.1228 12.477 12.9231 12.5618C13.5628 12.6387 13.886 12.8013 14.1246 13.6016L14.3631 14.7261H15.326L15.2412 11.8462L15.4029 9.03536H14.4478L14.1246 10.3215C13.9629 11.1997 13.8013 11.2845 12.9231 11.4382C11.8065 11.523 9.71997 11.523 9.71997 11.523Z" fill="white"/>
+</svg>

images/icons/kickstarter.svg

@@ -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_824_278)">
+<path d="M18.7495 12.0062L20.9317 9.84147C21.4691 9.30777 21.8956 8.67303 22.1867 7.9738C22.4777 7.27457 22.6275 6.52467 22.6275 5.76729C22.6275 5.0099 22.4777 4.26 22.1867 3.56077C21.8956 2.86154 21.4691 2.2268 20.9317 1.69311C19.8393 0.614063 18.3656 0.00897611 16.8301 0.00897611C15.2946 0.00897611 13.821 0.614063 12.7285 1.69311L11.9347 2.48278C11.3992 1.71526 10.6858 1.08883 9.85548 0.65704C9.02517 0.225253 8.10264 0.000952061 7.16677 0.00331437C3.96655 0.00331437 1.37 2.58242 1.37 5.76189V18.2423C1.37 21.4217 3.96655 24.0008 7.16677 24.0008C8.10264 24.0032 9.02517 23.7789 9.85548 23.3471C10.6858 22.9153 11.3992 22.2889 11.9347 21.5214L12.7285 22.311C13.821 23.3901 15.2946 23.9952 16.8301 23.9952C18.3656 23.9952 19.8393 23.3901 20.9317 22.311C21.4691 21.7773 21.8956 21.1426 22.1867 20.4434C22.4777 19.7441 22.6275 18.9942 22.6275 18.2369C22.6275 17.4795 22.4777 16.7296 22.1867 16.0303C21.8956 15.3311 21.4691 14.6964 20.9317 14.1627L18.7495 12.0037V12.0062Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_824_278">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

images/icons/littlelink.svg

@@ -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="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 24ZM11.2697 15.4729C11.2183 15.1282 11.1926 14.7557 11.1926 14.3556C11.1926 13.3228 11.3254 12.146 11.5911 10.8254C11.8653 9.50476 12.2638 8.37037 12.7865 7.42222C13.3178 6.47407 13.9476 6 14.676 6C15.0874 6 15.4087 6.19048 15.6401 6.57143C15.88 6.94392 16 7.48148 16 8.18413C16 9.19153 15.7172 10.3598 15.1516 11.6889C14.5946 13.018 13.832 14.3302 12.8636 15.6254C12.9236 15.9725 13.0307 16.2222 13.185 16.3746C13.3392 16.527 13.5492 16.6032 13.8148 16.6032C13.9605 16.6032 14.1233 16.5608 14.3033 16.4762C14.4918 16.3915 14.6632 16.2815 14.8174 16.146C14.9117 16.0614 15.006 16.019 15.1002 16.019C15.2031 16.019 15.2845 16.0783 15.3444 16.1968C15.413 16.3069 15.4473 16.4423 15.4473 16.6032C15.4473 16.9587 15.3187 17.2423 15.0617 17.454C14.6161 17.818 14.1105 18 13.5449 18C12.7308 18 12.1352 17.6656 11.7582 16.9968C11.7157 16.9205 11.6756 16.8416 11.6379 16.7601C11.342 17.0772 11.0257 17.3466 10.6891 17.5683C10.2606 17.8561 9.77218 18 9.22374 18C8.46964 18 7.90835 17.6614 7.53987 16.9841C7.17996 16.3069 7 15.4307 7 14.3556C7 13.3228 7.13282 12.146 7.39847 10.8254C7.67269 9.50476 8.07117 8.37037 8.59389 7.42222C9.12519 6.47407 9.75504 6 10.4834 6C10.8948 6 11.2161 6.19048 11.4475 6.57143C11.6874 6.94392 11.8074 7.48148 11.8074 8.18413C11.8074 9.19153 11.5246 10.3598 10.959 11.6889C10.3935 13.018 9.6265 14.3344 8.65816 15.6381C8.71815 15.9852 8.8167 16.2349 8.95381 16.3873C9.09091 16.5312 9.27087 16.6032 9.49367 16.6032C9.84502 16.6032 10.1535 16.5058 10.4192 16.3111C10.6484 16.1358 10.932 15.8564 11.2697 15.4729ZM9.53224 8.31111C9.78075 7.60847 10.0035 7.25714 10.2006 7.25714C10.4406 7.25714 10.5606 7.57884 10.5606 8.22222C10.5606 9.04339 10.3806 9.95344 10.0207 10.9524C9.66078 11.9429 9.17661 12.9333 8.56819 13.9238C8.58533 12.9672 8.68816 11.9683 8.87668 10.927C9.06521 9.88571 9.28372 9.01376 9.53224 8.31111ZM13.7248 8.31111C13.9734 7.60847 14.1962 7.25714 14.3933 7.25714C14.6332 7.25714 14.7532 7.57884 14.7532 8.22222C14.7532 9.04339 14.5732 9.95344 14.2133 10.9524C13.8534 11.9429 13.3692 12.9333 12.7608 13.9238C12.7779 12.9672 12.8808 11.9683 13.0693 10.927C13.2578 9.88571 13.4763 9.01376 13.7248 8.31111Z" fill="white"/>
+</svg>

images/icons/trello.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80"><defs><style>.cls-1{fill-rule:evenodd;fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="40.02" y1="70.45" x2="40.02" y2="9.52" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0.4"/><stop offset="0.11" stop-color="#fff" stop-opacity="0.54"/><stop offset="0.25" stop-color="#fff" stop-opacity="0.71"/><stop offset="0.39" stop-color="#fff" stop-opacity="0.83"/><stop offset="0.52" stop-color="#fff" stop-opacity="0.93"/><stop offset="0.64" stop-color="#fff" stop-opacity="0.98"/><stop offset="0.75" stop-color="#fff"/></linearGradient></defs><g id="Logos"><path class="cls-1" d="M63.24,9.52H16.8a7.25,7.25,0,0,0-7.24,7.25V63.21a7.24,7.24,0,0,0,7.24,7.24H63.24a7.25,7.25,0,0,0,7.25-7.24V16.77A7.26,7.26,0,0,0,63.24,9.52ZM35.8,53.41a2.4,2.4,0,0,1-2.4,2.41H23.21a2.4,2.4,0,0,1-2.4-2.41V23.18a2.4,2.4,0,0,1,2.4-2.41H33.4a2.4,2.4,0,0,1,2.4,2.41ZM59.24,39.53a2.41,2.41,0,0,1-2.41,2.41H46.65a2.41,2.41,0,0,1-2.41-2.41V23.18a2.41,2.41,0,0,1,2.41-2.41H56.83a2.41,2.41,0,0,1,2.41,2.41Z"/></g></svg>

index.html

@@ -220,6 +220,31 @@
             src="images/icons/telegram.svg" alt="Telegram Logo">Telegram</a>
         <br>
 
+        <!-- LittleLink -->
+        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon"
+            src="images/icons/littlelink.svg" alt="LittleLink Logo">LittleLink</a>
+        <br>
+
+        <!-- Trello -->
+        <a class="button button-trello" href="#" target="_blank" rel="noopener"><img class="icon"
+            src="images/icons/trello.svg" alt="Trello Logo">Trello</a>
+        <br>
+
+        <!-- Notion -->
+        <a class="button button-notion" href="#" target="_blank" rel="noopener"><img class="icon"
+            src="images/icons/notion.svg" alt="Notion Logo">Notion</a>
+        <br>
+
+        <!-- Kickstarter -->
+        <a class="button button-kickstarter" href="#" target="_blank" rel="noopener"><img class="icon"
+            src="images/icons/kickstarter.svg" alt="Kickstarter Logo">Kickstarter</a>
+        <br>
+
+        <!-- Etsy -->
+        <a class="button button-etsy" href="#" target="_blank" rel="noopener"><img class="icon"
+            src="images/icons/etsy.svg" alt="Etsy Logo">Etsy</a>
+        <br>
+
         <!-- Tumblr -->
         <a class="button button-tumb" href="#" target="_blank" rel="noopener"><img class="icon"
             src="images/icons/tumblr.svg" alt="Tumblr Logo">Tumblr</a>