diff --git a/.gitignore b/.gitignore
index e43b0f9..4befed3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
.DS_Store
+.idea
diff --git a/README.md b/README.md
index 2a16536..a2b84a0 100644
--- a/README.md
+++ b/README.md
@@ -1,32 +1,47 @@
# LittleLink
-The DIY self-hosted LinkTree alternative. LittleLink has more than 100 branded button styles you can easily use, with more being added by our community all the time.
+The DIY self-hosted LinkTree alternative. LittleLink has more than 100 branded button styles you can easily use, with more regularly added by our community in this repo and in [LittleLink Extended](https://github.com/sethcottle/littlelink-extended).
+
+---
+### ๐ Themes and Accessibility
+LittleLink offers both `light` and `dark` themes right out of the box. If the default color schemes don't match your preference, you can easily customize them by updating the values in `skeleton-light.css` or `skeleton-dark.css`. For those who prefer an automatic adjustment, setting your CSS to `skeleton-auto.css` enables the theme to adapt based on the device's system settings. To enhance visual accessibility in both `light` and `dark` modes, buttons lacking sufficient contrast with the background are outlined with an inverse stroke to ensure visibility. While LittleLink emphasizes accessibility, it's important to acknowledge that not all brands incorporated into LittleLink achieve this standard. Branded buttons that come into LittleLink always retain the original essence of the brand and some branded buttons might fall short of optimal accessibility in terms of contrast.
-LittleLink has more than 100 branded button styles you can use (with even more being added by our community). You'll also find a light and dark theme ready to go. Not a fan of the default 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.
+---
+### ๐ฅ Performance
-
+
-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).
+LittleLink epitomizes simplicity and minimalism. When evaluating the [LittleLink sample page](https://littlelink.io/sample/seth) (which mirrors a typical LittleLink setup for an individual) through tools such as [Google PageSpeed Insights](https://pagespeed.web.dev/analysis/https-littlelink-io-sample-seth/17ex80ryq4?form_factor=mobile), showcases LittleLink's excellence with 100/100 in Performance, Accessibility, Best Practices, and SEO. My initial vision for LittleLink was to craft it from the fundamentals. I chose [Skeleton](http://getskeleton.com/) as the foundation, enabling me to create something minimal and quick, removing the unnecessary bloat you would get from using a large framework for a page that requires nothing more than simplicity.
-
+---
+### โ๏ธ Deploy
-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 [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/), or [Amplify](https://aws.amazon.com/amplify). ๐๏ธ
+
-[](https://app.netlify.com/start/deploy?repository=https://github.com/sethcottle/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/), [Netlify](https://www.netlify.com/), or [Amplify](https://aws.amazon.com/amplify) using the button below. LittleLink is also easy to host through [GitHub Pages](https://pages.github.com/) or on your home lab server, CDN, or other frontend hosting services. To edit, all you need is a little basic HTML knowledge to add a link to the exisiting buttons or you can create your own. See our [adding custom buttons to your own fork wiki](https://github.com/sethcottle/littlelink/wiki/Adding-custom-buttons-to-your-own-fork). It's simple, promise. ๐ค
+
+---
+##### One-Click Deployments
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsethcottle%2Flittlelink&project-name=littlelink&repository-name=littlelink)
+[](https://app.netlify.com/start/deploy?repository=https://github.com/sethcottle/littlelink)
+
[](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/sethcottle/littlelink)
---
-### ๐ค Community Extras
+### ๐ค Contributions
+Please reference the [submitting a new brand to LittleLink wiki](https://github.com/sethcottle/littlelink/wiki/Submitting-a-new-brand-to-LittleLink) before opening a PR.
-#### ๐ฆ LittleLink Extended
-Looking for more niche services to add to your copy of LittleLink? Check out [LittleLink Extended](https://github.com/sethcottle/littlelink-extended). Users can add more niche services to this repository to help keep the core LittleLink repository less cluttered.
+---
+### ๐ฆ Community Extras
+
+#### ๐ธ LittleLink Extended
+Looking for more niche services to add to your copy of LittleLink? Check out [LittleLink Extended](https://github.com/sethcottle/littlelink-extended). Users can add more niche services to this repository to help keep the core LittleLink repository less cluttered and more focused on delivering branded experiences for the majority of users.
#### ๐จ Figma
Duplicate the [LittleLink Template on Figma Community](https://www.figma.com/community/file/846568099968305613) to help plan out and design your LittleLink page.
@@ -88,4 +103,4 @@ To help build a more privacy focused product, we recommend using [Fathom Analyti
###### ** Analytics in this dashboard start May 03, 2022. View this [Google Sheets file](https://docs.google.com/spreadsheets/d/1GL4SroAdH-OZphBVR5z-BoSukHIEVJfao25q_e9-Ii8/edit?usp=sharing) with the generic unique pageview data from Google Analytics.
-[](https://usefathom.com/ref/EQVZMV)
+[](https://usefathom.com/ref/EQVZMV)
diff --git a/css/brands.css b/css/brands.css
index 8e170f2..0f04e30 100644
--- a/css/brands.css
+++ b/css/brands.css
@@ -194,15 +194,26 @@ button:hover,
/* Bluesky */
.button.button-bluesky {
- color: #000000;
- background-color: #F3F9FF;
- border: 1px solid #212121;
+ color: #FFFFFF;
+ background-color: #1185FE;
}
+
.button.button-bluesky:hover,
.button.button-bluesky:focus {
filter: brightness(90%);
}
+/* Bluesky Alt */
+.button.button-bluesky-alt {
+ color: #000000;
+ background-color: #FFFFFF;
+ border: 1px solid #000000;
+}
+.button.button-bluesky-alt:hover,
+.button.button-bluesky-alt:focus {
+ filter: brightness(90%);
+}
+
/* Buy Me a Coffee */
.button.button-coffee {
color: #000000;
@@ -244,17 +255,6 @@ button:hover,
filter: brightness(90%);
}
-/* Clubhouse */
-.button.button-clubhouse {
- color: #1F1F1A;
- background-color: #F1EFE3;
- border: 1px solid #212121;
-}
-.button.button-clubhouse:hover,
-.button.button-clubhouse:focus {
- filter: brightness(90%);
-}
-
/* dev.to */
.button.button-dev-to {
color: #000000;
@@ -266,10 +266,32 @@ button:hover,
filter: brightness(90%);
}
+/* Discogs */
+.button.button-discogs {
+ color: #000000;
+ background-color: #FFFFFF;
+ border: 1px solid #000000
+}
+.button.button-discogs:hover,
+.button.button-discogs:focus {
+ filter: brightness(90%);
+}
+
+/* Discogs Alt */
+.button.button-discogs-alt {
+ color: #FFFFFF;
+ background-color: #000000;
+ border: 1px solid #FFFFFF
+}
+.button.button-discogs-alt:hover,
+.button.button-discogs-alt:focus {
+ filter: brightness(90%);
+}
+
/* Discord */
.button.button-discord {
color: #ffffff;
- background-color: #5865f2;
+ background-color: #161CBB;
}
.button.button-discord:hover,
.button.button-discord:focus {
@@ -421,17 +443,6 @@ button:hover,
filter: brightness(90%);
}
-/* Google Podcasts */
-.button.button-google-podcasts {
- color: #000000;
- background-color: #FFFFFF;
- border: 1px solid #212121;
-}
-.button.button-google-podcasts:hover,
-.button.button-google-podcasts:focus {
- filter: brightness(90%);
-}
-
/* Google Scholar */
.button.button-google-scholar {
color: #000000;
@@ -443,16 +454,6 @@ button:hover,
filter: brightness(90%);
}
-/* Guilded */
-.button.button-guilded {
- color: #000000;
- background-color: #F5C400;
-}
-.button.button-guilded:hover,
-.button.button-guilded:focus {
- filter: brightness(90%);
-}
-
/* Hashnode */
.button.button-hashnode {
color: #000000;
@@ -493,7 +494,6 @@ button:hover,
filter: brightness(90%);
}
-
/* Kickstarter */
.button.button-kickstarter {
color: #ffffff;
@@ -598,6 +598,17 @@ button:hover,
filter: brightness(90%);
}
+/* Microsoft */
+.button.button-microsoft {
+ color: #ffffff;
+ background-color: #000000;
+ border: 1px solid #FFFFFF;
+}
+.button.button-microsoft:hover,
+.button.button-microsoft:focus {
+ filter: brightness(90%);
+}
+
/* NGL */
.button.button-ngl {
color: #ffffff;
@@ -629,17 +640,6 @@ button:hover,
filter: brightness(90%);
}
-/* Partiful */
-.button.button-partiful {
- color: #ffffff;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-partiful:hover,
-.button.button-partiful:focus {
- filter: brightness(90%);
-}
-
/* Patreon */
.button.button-patreon {
color: #ffffff;
@@ -725,6 +725,17 @@ button:hover,
filter: brightness(90%);
}
+/* Revolut */
+.button.button-revolut {
+ color: #000000;
+ background-color: #ffffff;
+ border: 1px solid black;
+}
+.button.button-revolut:hover,
+.button.button-revolut:focus {
+ filter: brightness(90%);
+}
+
/* Shop */
.button.button-shop {
color: #ffffff;
@@ -745,16 +756,6 @@ button:hover,
filter: brightness(90%);
}
-/* Skoob */
-.button.button-skoob {
- color: #ffffff;
- background-color: #3189c8;
-}
-.button.button-skoob:hover,
-.button.button-skoob:focus {
- filter: brightness(90%);
-}
-
/* Slack */
.button.button-slack {
color: #000000;
@@ -766,7 +767,6 @@ button:hover,
filter: brightness(90%);
}
-
/* Snapchat */
.button.button-snapchat {
color: #000000;
@@ -818,13 +818,14 @@ button:hover,
filter: brightness(90%);
}
-/* Steam Dark */
-.button.button-steam-dark {
- color: #ffffff;
- background-image: linear-gradient(90deg, #09172a, #072a57, #0c5085);
+/* Stack Overflow */
+.button.button-stack-overflow {
+ color: #000000;
+ background-color: #FFFFFF;
+ border: 1px solid #000000;
}
-.button.button-steam-dark:hover,
-.button.button-steam-dark:focus {
+.button.button-stack-overflow:hover,
+.button.button-stack-overflow:focus {
filter: brightness(90%);
}
@@ -838,6 +839,17 @@ button:hover,
filter: brightness(90%);
}
+/* Steam Alt */
+.button.button-steam-alt {
+ color: #ffffff;
+ background-image: linear-gradient(90deg, #09172a, #072a57, #0c5085);
+ border: 1px solid #FFFFFF;
+}
+.button.button-steam-alt:hover,
+.button.button-steam-alt:focus {
+ filter: brightness(90%);
+}
+
/* Strava */
.button.button-strava {
color: #ffffff;
@@ -941,16 +953,6 @@ button:hover,
filter: brightness(90%);
}
-/* Twitter (archiving soon, see 'X') */
-.button.button-twit {
- color: #ffffff;
- background-color: #1da1f2;
-}
-.button.button-twit:hover,
-.button.button-twit:focus {
- filter: brightness(90%);
-}
-
/* Unsplash */
.button.button-unsplash {
color: #000000;
@@ -1002,17 +1004,6 @@ button:hover,
filter: brightness(90%);
}
-/* VRChat */
-.button.button-vrchat {
- color: #000000;
- background-color: #ffffff;
- border: 1px solid black;
-}
-.button.button-vrchat:hover,
-.button.button-vrchat:focus {
- filter: brightness(90%);
-}
-
/* VSCO */
.button.button-vsco {
color: #FFFFFF;
@@ -1066,16 +1057,6 @@ button:hover,
filter: brightness(90%);
}
-/* Xing */
-.button.button-xing {
- color: #ffffff;
- background-color: #026466;
-}
-.button.button-xing:hover,
-.button.button-xing:focus {
- filter: brightness(90%);
-}
-
/* YouTube */
.button.button-yt {
color: #ffffff;
@@ -1095,5 +1076,4 @@ button:hover,
.button.button-zoom:hover,
.button.button-zoom:focus {
filter: brightness(90%);
-}
-
+}
\ No newline at end of file
diff --git a/images/icons/bluesky-alt.svg b/images/icons/bluesky-alt.svg
new file mode 100644
index 0000000..9e04bb0
--- /dev/null
+++ b/images/icons/bluesky-alt.svg
@@ -0,0 +1,38 @@
+
+
diff --git a/images/icons/bluesky.svg b/images/icons/bluesky.svg
index c21441e..8eba5b0 100644
--- a/images/icons/bluesky.svg
+++ b/images/icons/bluesky.svg
@@ -1,14 +1,38 @@
-