diff --git a/README.md b/README.md
index ace4189..fe6388b 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ and [many.link](https://many.link/). LittleLink was built using [Skeleton](http:
-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.
+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. You can also set your CSS to `skeleton-auto.css`, which will use the system theme of the device you visit on.
@@ -19,18 +19,28 @@ No need for gulp, npm, or anything else to make LittleLink workβit uses the ba
[](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.)
-#### Community Extras
+#### π€ Community Extras
-##### Figma
+##### π¨ Figma
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)!
+##### π Docker
+[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!
+##### ποΈ Misc
+[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!
-#### 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.
+[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)**
+
+[Add Your Name](https://www.buymeacoffee.com/seth/e/50573)
diff --git a/css/brands.css b/css/brands.css
index 1b551e2..31ef39f 100644
--- a/css/brands.css
+++ b/css/brands.css
@@ -94,33 +94,13 @@ button:hover,
filter: brightness(90%);
}
-/* Patreon */
-.button.button-patreon {
- color: #ffffff;
- background-color: #ff424d;
+/* Buy Me a Coffee */
+.button.button-coffee {
+ color: #100a26;
+ background-color: #ffdd00;
}
-.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 {
+.button.button-coffee:hover,
+.button.button-coffee:focus {
filter: brightness(90%);
}
@@ -134,6 +114,17 @@ button:hover,
filter: brightness(90%);
}
+/* VRChat */
+.button.button-vrchat {
+ color: #000000;
+ background-color: #ffffff;
+ border: 2px solid black;
+}
+.button.button-vrchat:hover,
+.button.button-vrchat:focus {
+ filter: brightness(90%);
+}
+
/* Discord */
.button.button-discord {
color: #ffffff;
@@ -144,6 +135,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 +223,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 +273,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 +339,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 +419,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 +459,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 +479,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 +518,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%);
+}
diff --git a/images/icons/coffee.svg b/images/icons/coffee.svg
new file mode 100644
index 0000000..1876bfc
--- /dev/null
+++ b/images/icons/coffee.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/images/icons/etsy.svg b/images/icons/etsy.svg
new file mode 100644
index 0000000..e414e57
--- /dev/null
+++ b/images/icons/etsy.svg
@@ -0,0 +1,3 @@
+
diff --git a/images/icons/kickstarter.svg b/images/icons/kickstarter.svg
new file mode 100644
index 0000000..075b10e
--- /dev/null
+++ b/images/icons/kickstarter.svg
@@ -0,0 +1,10 @@
+
diff --git a/images/icons/littlelink.svg b/images/icons/littlelink.svg
new file mode 100644
index 0000000..99953e4
--- /dev/null
+++ b/images/icons/littlelink.svg
@@ -0,0 +1,3 @@
+
diff --git a/images/icons/notion.svg b/images/icons/notion.svg
new file mode 100644
index 0000000..201f7bb
--- /dev/null
+++ b/images/icons/notion.svg
@@ -0,0 +1,9 @@
+
diff --git a/images/icons/trello.svg b/images/icons/trello.svg
new file mode 100644
index 0000000..c0d516c
--- /dev/null
+++ b/images/icons/trello.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/images/icons/vrchat.svg b/images/icons/vrchat.svg
new file mode 100644
index 0000000..8433269
--- /dev/null
+++ b/images/icons/vrchat.svg
@@ -0,0 +1 @@
+
diff --git a/index.html b/index.html
index 72ee70b..86e0a55 100644
--- a/index.html
+++ b/index.html
@@ -155,6 +155,16 @@
Donate on PayPal
+
+ 
Buy Me a Coffee
+
+
+
+ 
VRChat
+
+
Build your own by forking LittleLink.