diff --git a/README.md b/README.md index fe6388bd..3965a4e4 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,28 +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 file](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 40713e5c..e258038b 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; @@ -104,6 +124,16 @@ button:hover, filter: brightness(90%); } +/* Ko-fi */ +.button.button-ko-fi { + color: #ffffff; + background-color: #13C3FF; +} +.button.button-ko-fi:hover, +.button.button-ko-fi:focus { + filter: brightness(90%); +} + /* Cash App */ .button.button-cashapp { color: #ffffff; @@ -114,6 +144,16 @@ button:hover, filter: brightness(90%); } +/* dev.to */ +.button.button-dev-to { + color: #000000; + background-color: #f5f5f5; +} +.button.button-dev-to:hover, +.button.button-dev-to:focus { + filter: brightness(90%); +} + /* Discord */ .button.button-discord { color: #ffffff; @@ -172,6 +212,16 @@ button:hover, filter: brightness(90%); } +/* Flickr */ +.button.button-flickr { + color: #ffffff; + background-color: #000000; +} +.button.button-flickr:hover, +.button.button-flickr:focus { + filter: brightness(90%); +} + /* Github */ .button.button-github { color: #ffffff; @@ -202,6 +252,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; @@ -275,6 +335,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; @@ -370,8 +440,8 @@ button:hover, /* Spotify */ .button.button-spotify { - color: #ffffff; - background-color: #000000; + color: #191414; + background-color: #1db954; } .button.button-spotify:hover, .button.button-spotify:focus { @@ -398,6 +468,16 @@ button:hover, filter: brightness(90%); } +/* Threema */ +.button.button-threema { + color: #000000; + background-color: #3fe669; +} +.button.button-threema:hover, +.button.button-threema:focus { + filter: brightness(90%); +} + /* TikTok */ .button.button-tiktok { color: #ffffff; @@ -468,6 +548,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; @@ -516,4 +607,14 @@ button:hover, .button.button-yt:hover, .button.button-yt:focus { filter: brightness(90%); -} \ No newline at end of file +} + +/* Letterboxd */ +.button.button-letterboxd { + color: #ffffff; + background-color: #2c3440; +} +.button.button-letterboxd:hover, +.button.button-letterboxd:focus { + filter: brightness(90%); +} diff --git a/css/skeleton-auto.css b/css/skeleton-auto.css index 8ae22a03..6d9d188e 100644 --- a/css/skeleton-auto.css +++ b/css/skeleton-auto.css @@ -40,6 +40,15 @@ padding: 0 20px; box-sizing: border-box; } +.container-left { + position: relative; + width: 100%; + max-width: 600px; + text-align: left; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; +} .column { position: center; width: 100%; @@ -185,3 +194,15 @@ hr { border-width: 0; border-top: 1px solid #e1e1e1; } +/* Radius values: + +10%-40%: Squircles +50% (default): True circle +*/ +.avatar { + width: 128px; + height: 128px; + object-fit: cover; + background-position: center; + border-radius: 50%; +} \ No newline at end of file diff --git a/css/skeleton-dark.css b/css/skeleton-dark.css index 26c2c8c1..fe9a7ae1 100644 --- a/css/skeleton-dark.css +++ b/css/skeleton-dark.css @@ -40,6 +40,15 @@ padding: 0 20px; box-sizing: border-box; } +.container-left { + position: relative; + width: 100%; + max-width: 600px; + text-align: left; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; +} .column { position: center; width: 100%; @@ -185,3 +194,15 @@ hr { border-width: 0; border-top: 1px solid #e1e1e1; } +/* Radius values: + +10%-40%: Squircles +50% (default): True circle +*/ +.avatar { + width: 128px; + height: 128px; + object-fit: cover; + background-position: center; + border-radius: 50%; +} \ No newline at end of file diff --git a/css/skeleton-light.css b/css/skeleton-light.css index e7444a3c..de3fd8e4 100644 --- a/css/skeleton-light.css +++ b/css/skeleton-light.css @@ -40,6 +40,15 @@ padding: 0 20px; box-sizing: border-box; } +.container-left { + position: relative; + width: 100%; + max-width: 600px; + text-align: left; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; +} .column { position: center; width: 100%; @@ -185,3 +194,15 @@ hr { border-width: 0; border-top: 1px solid #e1e1e1; } +/* Radius values: + +10%-40%: Squircles +50% (default): True circle +*/ +.avatar { + width: 128px; + height: 128px; + object-fit: cover; + background-position: center; + border-radius: 50%; +} \ No newline at end of file diff --git a/images/avatar.svg b/images/avatar.svg new file mode 100644 index 00000000..24562249 --- /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 00000000..b0c84df9 --- /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 00000000..ff199d11 --- /dev/null +++ b/images/icons/appstore.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/icons/dev_to.svg b/images/icons/dev_to.svg new file mode 100644 index 00000000..d52b2ed1 --- /dev/null +++ b/images/icons/dev_to.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/flickr.svg b/images/icons/flickr.svg new file mode 100644 index 00000000..bde20ab7 --- /dev/null +++ b/images/icons/flickr.svg @@ -0,0 +1 @@ + diff --git a/images/icons/gitlab.svg b/images/icons/gitlab.svg index f04b5246..b88f3620 100644 --- a/images/icons/gitlab.svg +++ b/images/icons/gitlab.svg @@ -1,69 +1 @@ - - - - - - - - - - - - - - - - - - - - - 1x - - - 1x - - - 1x - - - - 1x - - - + \ No newline at end of file diff --git a/images/icons/ko-fi.svg b/images/icons/ko-fi.svg new file mode 100644 index 00000000..4fefd54e --- /dev/null +++ b/images/icons/ko-fi.svg @@ -0,0 +1,11 @@ + + + Layer 1 + + + + + + + + \ No newline at end of file diff --git a/images/icons/letterboxd.svg b/images/icons/letterboxd.svg new file mode 100644 index 00000000..02a9fe25 --- /dev/null +++ b/images/icons/letterboxd.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/images/icons/onlyfans.svg b/images/icons/onlyfans.svg new file mode 100644 index 00000000..69830769 --- /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 00000000..7781053e --- /dev/null +++ b/images/icons/playstore.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/icons/spotify.svg b/images/icons/spotify.svg index 97f81060..c037b0fb 100644 --- a/images/icons/spotify.svg +++ b/images/icons/spotify.svg @@ -1,2 +1,2 @@ \ No newline at end of file + diff --git a/images/icons/threema.svg b/images/icons/threema.svg new file mode 100644 index 00000000..142a6f85 --- /dev/null +++ b/images/icons/threema.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/images/icons/vrchat.svg b/images/icons/vrchat.svg new file mode 100644 index 00000000..8433269b --- /dev/null +++ b/images/icons/vrchat.svg @@ -0,0 +1 @@ + diff --git a/index.html b/index.html index 6269a091..53646173 100644 --- a/index.html +++ b/index.html @@ -66,7 +66,7 @@ --> - LittleLink Logo + LittleLink Logo

maymeow

@@ -111,8 +111,8 @@
- Discord LogoDiscord + + Discord LogoDiscord
@@ -156,7 +156,13 @@

-

Build your own by forking LittleLink.

+ +

Privacy Policy | Build your own by forking LittleLink.

diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..bdc12019 --- /dev/null +++ b/privacy.html @@ -0,0 +1,164 @@ + + + + + + + + LittleLink Privacy Policy + + + + + + + + + + + + + + + + + + + + + +
+
+
+

+ โฌ…๏ธ Back to main page +

+ + + + +

๐Ÿ”’ Privacy Overview

+ + +

+ Personal Data collected for the following purposes and using the + following services: +
+
+ + ๐Ÿงฎ Analytics +
+ The services contained in this section enable the Owner to monitor + and analyze web traffic and can be used to keep track of User + behavior. +
+
+ + 1.) Example LLC.
+ Personal Data: + various types of Data as specified in the privacy policy of the + service
+ Privacy Policy +

+ + + +

+ ๐Ÿ“ฆ Displaying Content From External Platforms +
+ This type of service allows you to view content hosted on external + platforms directly from the pages of this website and interact with + them.

+ This type of service might still collect web traffic data for the + pages where the service is installed, even when Users do not use it. +
+
+ + 1.) Example LLC
+ Personal Data: + Usage Data; various types of Data as specified in the privacy + policy of the service +
+ Privacy Policy +

+ + + +

+ ๐Ÿ“ Hosting and Backend Infrastructure +
+ This type of service has the purpose of hosting Data and files that + enable this website to exist. +
+
+ Some services among those listed below, if any, may work through + geographically distributed servers, making it difficult to determine + the actual location where the Personal Data are stored. +
+
+ + 1.) Example LLC.
+ Personal Data: + various types of Data as specified in the privacy policy of the + service +
+ Privacy Policy +

+ +
+
+ + +
+

Build your own by forking LittleLink.

+
+
+
+
+ + + +