diff --git a/README.md b/README.md index ace4189..3965a4e 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. +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,18 +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 -[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! + +[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)** + +**[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. -#### 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. diff --git a/css/brands.css b/css/brands.css index 1b551e2..67b7080 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; @@ -94,33 +114,23 @@ 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 { +.button.button-coffee:hover, +.button.button-coffee:focus { filter: brightness(90%); } -/* Signal */ -.button.button-signal { +/* Ko-fi */ +.button.button-ko-fi { color: #ffffff; - background-color: #3a76f0; + background-color: #13C3FF; } -.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-ko-fi:hover, +.button.button-ko-fi:focus { filter: brightness(90%); } @@ -134,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; @@ -144,6 +164,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; @@ -182,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; @@ -212,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; @@ -222,6 +272,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 +322,49 @@ 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%); +} + +/* 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; + 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 +398,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; @@ -355,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; @@ -365,6 +488,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 +528,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,23 +548,14 @@ button:hover, filter: brightness(90%); } -/* PayPal */ -.button.button-paypal { - color: #ffffff; - background-color: #003087; +/* VRChat */ +.button.button-vrchat { + color: #000000; + background-color: #ffffff; + border: 2px solid black; } -.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 { +.button.button-vrchat:hover, +.button.button-vrchat:focus { filter: brightness(90%); } @@ -464,3 +598,23 @@ 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%); +} + +/* 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 8ae22a0..6d9d188 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 26c2c8c..fe9a7ae 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 e7444a3..de3fd8e 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 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/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/dev_to.svg b/images/icons/dev_to.svg new file mode 100644 index 0000000..d52b2ed --- /dev/null +++ b/images/icons/dev_to.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/flickr.svg b/images/icons/flickr.svg new file mode 100644 index 0000000..bde20ab --- /dev/null +++ b/images/icons/flickr.svg @@ -0,0 +1 @@ + diff --git a/images/icons/gitlab.svg b/images/icons/gitlab.svg index f04b524..b88f362 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/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/ko-fi.svg b/images/icons/ko-fi.svg new file mode 100644 index 0000000..4fefd54 --- /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 0000000..02a9fe2 --- /dev/null +++ b/images/icons/letterboxd.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + 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/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/images/icons/threema.svg b/images/icons/threema.svg new file mode 100644 index 0000000..142a6f8 --- /dev/null +++ b/images/icons/threema.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file 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 5a29bd9..d6674e0 100644 --- a/index.html +++ b/index.html @@ -21,83 +21,50 @@
-
+
- - Marcel Schwarz Profile Picture + + Marcel Schwarz Profile Picture - -

Marcel Schwarz

+ +

Marcel Schwarz

- -

Junior Software Engineer @TeamViewer

+ +

Junior Software Engineer @TeamViewer

- - LinkedIn LogoLinkedIn -
+ + + LinkedIn LogoLinkedIn +
- - GitLab LogoGitLab -
+ + + GitLab LogoGitLab +
- - GitHub LogoGitHub -
+ + + GitHub LogoGitHub +
- - xing LogoXing -
+ + + xing LogoXing +
- - Instagram LogoInstagram -
+ + + Instagram LogoInstagram +
- - Email Iconmail@marcelschwarz.net -
+ + + Email Iconmail@marcelschwarz.net +
- - Twitter LogoTwitter -
- - - Discord LogoDiscord -
- - - Spotify LogoSpotify -
- - - Reddit LogoReddit -
- - - Telegram LogoTelegram -
- - - Steam LogoSteam -
- - - PayPal LogoPayPal -
-
+
diff --git a/privacy.html b/privacy.html new file mode 100644 index 0000000..bdc1201 --- /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.

+
+
+
+
+ + + +