From a849815bf8c26f5949ebae0a790129353d2332c1 Mon Sep 17 00:00:00 2001 From: Seth Cottle Date: Wed, 4 May 2022 11:03:14 -0400 Subject: [PATCH] New Brands Based on some feedback we've been receiving via email and social I'm adding several new brands, including: Amazon, Apple App Store, Google Play Store, and OnlyFans. Added a SVG of the LittleLink avatar. Cleaned up the README.md to make it more readable, updated some outdated content, and added a new Analytics section promoting Fathom (and adding a referral link to help support LittleLink). I also posted a link to the public LittleLink Fathom analytics dashboard. --- README.md | 31 ++++++++++++++----- css/brands.css | 62 +++++++++++++++++++++++++++++++------- images/avatar.svg | 5 +++ images/icons/amazon.svg | 13 ++++++++ images/icons/appstore.svg | 10 ++++++ images/icons/onlyfans.svg | 4 +++ images/icons/playstore.svg | 33 ++++++++++++++++++++ index.html | 20 ++++++++++++ 8 files changed, 159 insertions(+), 19 deletions(-) create mode 100644 images/avatar.svg create mode 100644 images/icons/amazon.svg create mode 100644 images/icons/appstore.svg create mode 100644 images/icons/onlyfans.svg create mode 100644 images/icons/playstore.svg diff --git a/README.md b/README.md index 7ae7c7d..b85c589 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ and [many.link](https://many.link/). LittleLink was built using [Skeleton](http: ![Themes](https://cdn.cottle.cloud/littlelink/themes.png) -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. +LittleLink has more than 50+ 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](https://cdn.cottle.cloud/littlelink/performance.png) @@ -19,30 +19,45 @@ No need for gulp, npm, or anything else to make LittleLink workβ€”it uses the ba [![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.) -#### 🀝 Community Extras +--- -##### 🎨 Figma +### 🀝 Community Extras + +#### 🎨 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 +#### πŸ‹ 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) is building a [super simple Docker implementation of LittleLink](https://github.com/davisdre/littlelink). -##### πŸ—ƒοΈ Misc +#### πŸ—ƒοΈ 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! [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 +--- + +### πŸ’– 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 +#### 🏒 Business Supporters [Add Your Company Name](https://www.buymeacoffee.com/seth/e/50574) -##### ✨ Individual Supporters +#### ✨ Individual Supporters **[Drew Davis](https://connect.davisdre.me)** **[Robotter112](https://robotter112.de/)** [Add Your Name](https://www.buymeacoffee.com/seth/e/50573) + +--- + +### πŸ“Š Analytics + +To help build a more privacy focused product, we recommend using [Fathom Analytics](https://usefathom.com/ref/EQVZMV)*. On May 03, 2022 we moved [LittleLink.io](https://littlelink.io) from Google Analytics to Fathom! We're also making our analytics dashboard [publicly available](https://app.usefathom.com/share/xbmnwxxl/littlelink.io#/?filters=%5B%5D&range=last_7_days&site=2251799827005303)** for everyone to view. + +###### * This is a referral link. Using this link to sign up for Fathom is an easy way to help support LittleLink! + +###### ** Analytics displayed in this dashboard start May 03, 2022. View this [Google Sheets files](https://docs.google.com/spreadsheets/d/1GL4SroAdH-OZphBVR5z-BoSukHIEVJfao25q_e9-Ii8/edit?usp=sharing) with the generic unique pageview data from Google Analytics. + diff --git a/css/brands.css b/css/brands.css index df5ed25..ee80128 100644 --- a/css/brands.css +++ b/css/brands.css @@ -84,6 +84,26 @@ button:hover, filter: brightness(90%); } +/* Amazon */ +.button.button-amazon { + color: #000000; + background-color: #ffffff; +} +.button.button-amazon:hover, +.button.button-amazon:focus { + filter: brightness(90%); +} + +/* Apple App Store */ +.button.button-appstore { + color: #ffffff; + background-color: #000000; +} +.button.button-appstore:hover, +.button.button-appstore:focus { + filter: brightness(90%); +} + /* Bandcamp */ .button.button-bandcamp { color: #ffffff; @@ -114,17 +134,6 @@ 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%); -} - /* dev.to */ .button.button-dev-to { color: #000000; @@ -223,6 +232,16 @@ button:hover, filter: brightness(90%); } +/* Google Play Store */ +.button.button-playstore { + color: #FFFFFF; + background-color: #000000; +} +.button.button-playstore:hover, +.button.button-playstore:focus { + filter: brightness(90%); +} + /* Instagram */ .button.button-instagram { color: #ffffff; @@ -296,6 +315,16 @@ button:hover, filter: brightness(90%); } +/* OnlyFans */ +.button.button-onlyfans { + color: #ffffff; + background-color: #00AEEF; +} +.button.button-onlyfans:hover, +.button.button-onlyfans:focus { + filter: brightness(90%); +} + /* Patreon */ .button.button-patreon { color: #ffffff; @@ -489,6 +518,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%); +} + /* Website */ .button.button-web { color: #ffffff; diff --git a/images/avatar.svg b/images/avatar.svg new file mode 100644 index 0000000..2456224 --- /dev/null +++ b/images/avatar.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/icons/amazon.svg b/images/icons/amazon.svg new file mode 100644 index 0000000..b0c84df --- /dev/null +++ b/images/icons/amazon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/images/icons/appstore.svg b/images/icons/appstore.svg new file mode 100644 index 0000000..ff199d1 --- /dev/null +++ b/images/icons/appstore.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/icons/onlyfans.svg b/images/icons/onlyfans.svg new file mode 100644 index 0000000..6983076 --- /dev/null +++ b/images/icons/onlyfans.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/icons/playstore.svg b/images/icons/playstore.svg new file mode 100644 index 0000000..7781053 --- /dev/null +++ b/images/icons/playstore.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index e6c5dfb..9e16d65 100644 --- a/index.html +++ b/index.html @@ -310,6 +310,21 @@ src="images/icons/signal.svg" alt="Signal Logo">Signal
+ + Apple App Store LogoApple App Store +
+ + + Google Play Store LogoGoogle Play Store +
+ + + Amazon LogoAmazon +
+ Venmo LogoVenmo @@ -335,6 +350,11 @@ src="images/icons/dev_to.svg" alt="dev.to Logo">dev.to
+ + Only Fans LogoOnlyFans (18+) +
+ Web LogoWebsite