Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
d098044f87 | ||
|
|
e3ce08ce19 | ||
|
|
606fc39204 | ||
|
|
949ed19bcb | ||
|
|
b0af864541 | ||
|
|
5a2ed1592a | ||
|
|
2348491382 | ||
|
aede738f1a | ||
|
|
0db66a54d4 | ||
|
|
2f8ddfa076 | ||
|
|
b31d74ee46 | ||
|
460cf6a7a5 | ||
|
905791e1c7 |
@@ -3,6 +3,10 @@
|
||||
# LittleLink
|
||||
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).
|
||||
|
||||
---
|
||||
### 🆕 LittleLink Button Builder
|
||||
Want to make your own buttons for LittleLink but you're not too sure where to start? [Check out our new Button Builder](https://builder.littlelink.io). This new builder lets you preview button styles and with a single click, copy the generated CSS code to put in `css/brands.css`, and copy the generated HTML code to put in `index.html`. This builder also helps automate accessibility features by checking contrast ratios and suggesting strokes when needed, ensuring your custom buttons maintain LittleLink's high standards for visibility in both light and dark themes. Design your buttons visually, preview them live, and get ready to go code. [Live Site](https://builder.littlelink.io) | [GitHub Repo](https://github.com/sethcottle/littlelink-button-builder)
|
||||
|
||||
---
|
||||
### 🌞 Themes and Accessibility
|
||||
LittleLink offers `auto`, `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 `style.css`. You can set any of the themes right in `index.html`. 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.
|
||||
|
||||
13
VERSION.md
13
VERSION.md
@@ -1,6 +1,17 @@
|
||||
# LittleLink Version History
|
||||
|
||||
## Current Version: v3.0.2
|
||||
## Current Version: v3.2.0
|
||||
|
||||
### v3.2.0 - 2/14/2025
|
||||
- Added Apple Invites
|
||||
- Removed Read.cv (service is winding down)
|
||||
|
||||
### v3.1.1 - 1/28/2025
|
||||
- Fixed the alt text for Obsidian (`PR #138` / `@timtjtim`)
|
||||
|
||||
### v3.1.0 - 1/20/2025
|
||||
- Added alternate YouTube button (`PR #138` / `@Omikorin`)
|
||||
- Fixed `index.html` accessibilty issues (`PR #137` / `@rosahaj`)
|
||||
|
||||
### v3.0.2 - 12/20/2024
|
||||
- Added Obsidian as a brand
|
||||
|
||||
@@ -58,6 +58,13 @@
|
||||
--button-border:1px solid #FFFFFF;
|
||||
}
|
||||
|
||||
/* Apple Invites */
|
||||
.button-invites {
|
||||
--button-text:#FFFFFF;
|
||||
--button-background:#000000;
|
||||
--button-border:1px solid #FFFFFF;
|
||||
}
|
||||
|
||||
/* Apple Music */
|
||||
.button-apple-music {
|
||||
--button-text:#ffffff;
|
||||
@@ -400,13 +407,6 @@
|
||||
--button-border:1px solid #212121;
|
||||
}
|
||||
|
||||
/* Read.cv */
|
||||
.button-read-cv {
|
||||
--button-text:#FFFFFF;
|
||||
--button-background:#000000;
|
||||
--button-border:1px solid #FFFFFF;
|
||||
}
|
||||
|
||||
/* Reddit */
|
||||
.button-reddit {
|
||||
--button-text:#FFFFFF;
|
||||
@@ -592,6 +592,12 @@
|
||||
--button-border:1px solid #FFFFFF;
|
||||
}
|
||||
|
||||
/* YouTube Alt */
|
||||
.button-yt-alt {
|
||||
--button-text:#ffffff;
|
||||
--button-background:#FF0000;
|
||||
}
|
||||
|
||||
/* Zoom */
|
||||
.button-zoom {
|
||||
--button-text:#ffffff;
|
||||
|
||||
1
images/icons/apple-invites.svg
Normal file
1
images/icons/apple-invites.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="12" x2="12" y1=".5" y2="8.5"><stop offset="0" stop-color="#fecb00"/><stop offset="1" stop-color="#f3c200"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="12" x2="12" y1="4.93463" y2="24"><stop offset="0" stop-color="#fedf00"/><stop offset="1" stop-color="#ffce00"/></linearGradient><clipPath id="c"><path d="m0 0h24v24h-24z"/></clipPath><g clip-path="url(#c)"><rect fill="#fff" height="17" rx="6" width="24"/><path d="m5.10545 9.1754c.86078 0 1.55858-.6978 1.55858-1.55857 0-.86078-.6978-1.55858-1.55858-1.55858s-1.55857.6978-1.55857 1.55858c0 .86077.69779 1.55857 1.55857 1.55857z" fill="#ff284c"/><path d="m3.52537 10.8893c.86078 0 1.55858-.6978 1.55858-1.55855 0-.86078-.6978-1.55858-1.55858-1.55858s-1.55857.6978-1.55857 1.55858c0 .86075.69779 1.55855 1.55857 1.55855z" fill="#00cbf4" opacity=".9"/><path d="m12.8922 14.2188c.8951 0 1.6207-.7256 1.6207-1.6207s-.7256-1.6208-1.6207-1.6208-1.6207.7257-1.6207 1.6208.7256 1.6207 1.6207 1.6207z" fill="#00c3f3"/><path d="m14.6068 16.4557c.9208 0 1.6673-.7465 1.6673-1.6674 0-.9208-.7465-1.6673-1.6673-1.6673-.9209 0-1.6673.7465-1.6673 1.6673 0 .9209.7464 1.6674 1.6673 1.6674z" fill="#00a102" opacity=".9"/><path d="m17.0618 13.0796c.9209 0 1.6674-.7465 1.6674-1.6673s-.7465-1.66731-1.6674-1.66731c-.9208 0-1.6673.74651-1.6673 1.66731s.7465 1.6673 1.6673 1.6673z" fill="#ff8600"/><path d="m20.2611 10.9722c.9208 0 1.6673-.7465 1.6673-1.66734s-.7465-1.66732-1.6673-1.66732c-.9209 0-1.6673.74648-1.6673 1.66732s.7464 1.66734 1.6673 1.66734z" fill="#ff284c"/><path d="m16.4447 9.52751c.9208 0 1.6673-.74648 1.6673-1.66732 0-.92083-.7465-1.66731-1.6673-1.66731-.9209 0-1.6674.74648-1.6674 1.66731 0 .92084.7465 1.66732 1.6674 1.66732z" fill="#ffc100"/><path d="m14.1203 10.9722c.8722 0 1.5793-.7071 1.5793-1.57932s-.7071-1.57929-1.5793-1.57929-1.5793.70707-1.5793 1.57929.7071 1.57932 1.5793 1.57932z" fill="#ad42cf" opacity=".9"/><path d="m13.748 5.71133c.8608 0 1.5586-.6978 1.5586-1.55858 0-.86077-.6978-1.55857-1.5586-1.55857-.8607 0-1.5585.6978-1.5585 1.55857 0 .86078.6978 1.55858 1.5585 1.55858z" fill="#00c3f3"/><path d="m8.52733 7.11457c.86077 0 1.55857-.6978 1.55857-1.55858s-.6978-1.55858-1.55857-1.55858c-.86078 0-1.55858.6978-1.55858 1.55858s.6978 1.55858 1.55858 1.55858z" fill="#ffc100"/><path d="m9.62498 10.6667c.86082 0 1.55862-.69783 1.55862-1.55861s-.6978-1.55858-1.55862-1.55858c-.86078 0-1.55857.6978-1.55857 1.55858s.69779 1.55861 1.55857 1.55861z" fill="#ff8600"/><path d="m9.75584 13.1262c.86076 0 1.55856-.6978 1.55856-1.5586 0-.8607-.6978-1.5585-1.55856-1.5585-.86078 0-1.55857.6978-1.55857 1.5585 0 .8608.69779 1.5586 1.55857 1.5586z" fill="#ffc100" opacity=".9"/><path d="m6.46678 12.6395c.86078 0 1.55857-.6978 1.55857-1.5586s-.69779-1.55857-1.55857-1.55857-1.55858.69777-1.55858 1.55857.6978 1.5586 1.55858 1.5586z" fill="#ad42cf"/><path d="m10.4121 16.4142c.8608 0 1.5586-.6978 1.5586-1.5585 0-.8608-.6978-1.5586-1.5586-1.5586-.86079 0-1.55858.6978-1.55858 1.5586 0 .8607.69779 1.5585 1.55858 1.5585z" fill="#ff59c2"/><path d="m23.9697 4.93981c-.1709.23301-.3573.45048-.5644.6576l-.901.90097v-.33139c0-2.57864-2.0919-4.67055-4.6705-4.67055h-11.67122c-2.57864 0-4.67055 2.09191-4.67055 4.67055v.37799l-.947568-.94757c-.191586-.19159-.367638-.39353-.5229776-.60582.2381876-2.79612 2.5838156-4.99159 5.4420656-4.99159h13.07445c2.8375 0 5.1728 2.1644 5.4369 4.93463z" fill="url(#a)"/><path d="m23.9689 4.93981c-.1708.23301-.3572.45048-.5644.6576l-.9009.90098-8.0052 8.00521c-1.3929 1.3928-3.6557 1.3928-5.04856 0l-7.95858-7.95861-.947571-.94758c-.191585-.19158-.367638-.39352-.5229773-.60582-.01553402.15534-.0207117.31068-.0207117.4712v13.07441c0 3.0188 2.44401 5.4628 5.46278 5.4628h13.07442c3.0188 0 5.4628-2.444 5.4628-5.4628v-13.07441c0-.17606-.0104-.35211-.0259-.52816z" fill="url(#b)"/><path d="m12.3125 8c.8608 0 1.5586-.6978 1.5586-1.55857 0-.86078-.6978-1.55858-1.5586-1.55858s-1.5586.6978-1.5586 1.55858c0 .86077.6978 1.55857 1.5586 1.55857z" fill="#00a102" opacity=".9"/><path d="m16.7775 7.8602c.9094 0 1.6466-.73721 1.6466-1.6466 0-.9094-.7372-1.64661-1.6466-1.64661s-1.6466.73721-1.6466 1.64661c0 .90939.7372 1.6466 1.6466 1.6466z" fill="#ff59c2" opacity=".9"/></g></svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
@@ -1 +0,0 @@
|
||||
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h24v24h-24z"/></clipPath><g clip-path="url(#a)"><path clip-rule="evenodd" d="m7.81661.0783257 13.47389 3.3594043c1.4019.34953 2.255 1.76934 1.9054 3.17123l-3.8414 15.40724c-.3496 1.4019-1.7694 2.255-3.1713 1.9055l-13.47382-3.3594c-1.40189-.3496-2.255-1.7694-1.905468-3.1713l3.841458-15.4072c.34953-1.401898 1.76934-2.255005 3.17124-1.9054743zm-.54126 4.3583943 12.51095 3.11932c.2835.0707.4561.35791.3854.6415l-.1659.66528c-.0707.28358-.3579.45616-.6415.38545l-12.51088-3.11932c-.28358-.0707-.45616-.35791-.38545-.6415l.16587-.66528c.07071-.28358.35792-.45616.64151-.38545zm11.55995 7.07398-12.51095-3.1193c-.28359-.0707-.5708.10187-.64151.38546l-.16587.66528c-.07071.28358.10187.57076.38546.64146l12.51087 3.1194c.2836.0707.5708-.1019.6415-.3855l.1659-.6653c.0707-.2836-.1019-.5708-.3854-.6415zm-13.49406.5851 5.74196 1.4317c.2836.0707.4562.3579.3855.6415l-.1659.6653c-.0707.2835-.3579.4561-.6415.3854l-5.74198-1.4316c-.28359-.0707-.45616-.3579-.38546-.6415l.16587-.6653c.07071-.2836.35792-.4562.64151-.3855z" fill="#fff" fill-rule="evenodd"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
1
images/icons/youtube-alt.svg
Normal file
1
images/icons/youtube-alt.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><defs><mask id="a" x="0" y="0" width="24" height="24"><path fill="#fff" d="M0 0h24v24H0z"/><path d="M9.545 15.588 15.818 12 9.545 8.412z" fill="#000"/></mask></defs><path d="M23.498 6.154a3.02 3.02 0 0 0-2.122-2.147C19.506 3.5 12 3.5 12 3.5s-7.505 0-9.376.507A3.02 3.02 0 0 0 .502 6.154C0 8.05 0 12 0 12s0 3.951.502 5.846a3.02 3.02 0 0 0 2.122 2.147C4.494 20.5 12 20.5 12 20.5s7.506 0 9.376-.507a3.02 3.02 0 0 0 2.122-2.147C24 15.95 24 12 24 12s0-3.951-.502-5.846" fill="#fff" mask="url(#a)"/></svg>
|
||||
|
After Width: | Height: | Size: 594 B |
15
index.html
15
index.html
@@ -52,12 +52,12 @@
|
||||
<img class="avatar avatar--rounded" src="images/avatar.png" srcset="images/avatar@2x.png 2x" alt="LittleLink">
|
||||
|
||||
<!-- Replace with your name or brand -->
|
||||
<h1 tabindex="0">
|
||||
<h1>
|
||||
<div>LittleLink</div>
|
||||
</h1>
|
||||
|
||||
<!-- Add a short description about yourself or your brand -->
|
||||
<p tabindex="0">An open source DIY Linktree alternative.</p>
|
||||
<p>An open source DIY Linktree alternative.</p>
|
||||
|
||||
<!-- All your buttons go here -->
|
||||
<div class="button-stack" role="navigation">
|
||||
@@ -73,6 +73,9 @@
|
||||
|
||||
<!-- Apple App Store -->
|
||||
<a class="button button-appstore" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/apple.svg" alt="Apple Logo">Apple App Store</a>
|
||||
|
||||
<!-- Apple Invites -->
|
||||
<a class="button button-invites" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/apple-invites.svg" alt="Apple Invites Logo">Apple Invites</a>
|
||||
|
||||
<!-- Apple Music -->
|
||||
<a class="button button-apple-music" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/apple-music.svg" alt="Apple Music Logo">Listen on Apple Music</a>
|
||||
@@ -213,7 +216,7 @@
|
||||
<a class="button button-notion" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/notion.svg" alt="Notion Logo">Notion</a>
|
||||
|
||||
<!-- Obsidian -->
|
||||
<a class="button button-obsidian" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/obsidian.svg" alt="OnlyFans Logo">Obsidian</a>
|
||||
<a class="button button-obsidian" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/obsidian.svg" alt="Obsidian Logo">Obsidian</a>
|
||||
|
||||
<!-- OnlyFans -->
|
||||
<a class="button button-onlyfans" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/onlyfans.svg" alt="OnlyFans Logo">OnlyFans (18+)</a>
|
||||
@@ -230,9 +233,6 @@
|
||||
<!-- Product Hunt -->
|
||||
<a class="button button-product-hunt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/product-hunt.svg" alt="Product Hunt Logo">Product Hunt</a>
|
||||
|
||||
<!-- Read.cv -->
|
||||
<a class="button button-read-cv" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/read-cv.svg" alt="Read.cv logo">Read.cv</a>
|
||||
|
||||
<!-- Reddit -->
|
||||
<a class="button button-reddit" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/reddit.svg" alt="Reddit Logo">Reddit</a>
|
||||
|
||||
@@ -320,6 +320,9 @@
|
||||
<!-- YouTube -->
|
||||
<a class="button button-yt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/youtube.svg" alt="YouTube Logo">YouTube</a>
|
||||
|
||||
<!-- YouTube Alt -->
|
||||
<a class="button button-yt-alt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/youtube-alt.svg" alt="YouTube Logo">YouTube</a>
|
||||
|
||||
<!-- YouTube Music -->
|
||||
<a class="button button-yt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/youtube-music.svg" alt="YouTube Music Logo">Listen on YouTube Music</a>
|
||||
|
||||
|
||||
34
privacy.html
34
privacy.html
@@ -32,43 +32,43 @@
|
||||
<body>
|
||||
<div class="container-left" role="main">
|
||||
<div class="column">
|
||||
<nav role="navigation" aria-label="Back to homepage">
|
||||
<a href="index.html" tabindex="0">← Back to main page</a>
|
||||
<nav role="navigation">
|
||||
<a href="index.html" aria-label="Back to homepage">← Back to main page</a>
|
||||
</nav>
|
||||
|
||||
<h1 tabindex="0">Privacy Overview</h1>
|
||||
<h1>Privacy Overview</h1>
|
||||
|
||||
<section aria-labelledby="analytics-heading">
|
||||
<h2 id="analytics-heading" tabindex="0">Analytics</h2>
|
||||
<p tabindex="0">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.</p>
|
||||
<h2 id="analytics-heading">Analytics</h2>
|
||||
<p>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.</p>
|
||||
|
||||
<h3 tabindex="0">Example LLC</h3>
|
||||
<h3>Example LLC</h3>
|
||||
<ul role="list">
|
||||
<li tabindex="0">Personal Data: various types of Data as specified in the privacy policy of the service</li>
|
||||
<li>Personal Data: various types of Data as specified in the privacy policy of the service</li>
|
||||
<li><a href="https://example.com/privacy/" target="_blank" rel="noopener">Privacy Policy</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="external-content-heading">
|
||||
<h2 id="external-content-heading" tabindex="0">External Content</h2>
|
||||
<p tabindex="0">This type of service allows you to view content hosted on external platforms directly from the pages of this website and interact with them.</p>
|
||||
<p tabindex="0">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.</p>
|
||||
<h2 id="external-content-heading">External Content</h2>
|
||||
<p>This type of service allows you to view content hosted on external platforms directly from the pages of this website and interact with them.</p>
|
||||
<p>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.</p>
|
||||
|
||||
<h3 tabindex="0">Example LLC</h3>
|
||||
<h3>Example LLC</h3>
|
||||
<ul role="list">
|
||||
<li tabindex="0">Personal Data: Usage Data; various types of Data as specified in the privacy policy of the service</li>
|
||||
<li>Personal Data: Usage Data; various types of Data as specified in the privacy policy of the service</li>
|
||||
<li><a href="https://example.com/privacy/" target="_blank" rel="noopener">Privacy Policy</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="hosting-heading">
|
||||
<h2 id="hosting-heading" tabindex="0">Hosting and Infrastructure</h2>
|
||||
<p tabindex="0">This type of service has the purpose of hosting Data and files that enable this website to exist.</p>
|
||||
<p tabindex="0">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.</p>
|
||||
<h2 id="hosting-heading">Hosting and Infrastructure</h2>
|
||||
<p>This type of service has the purpose of hosting Data and files that enable this website to exist.</p>
|
||||
<p>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.</p>
|
||||
|
||||
<h3 tabindex="0">Example LLC</h3>
|
||||
<h3>Example LLC</h3>
|
||||
<ul role="list">
|
||||
<li tabindex="0">Personal Data: various types of Data as specified in the privacy policy of the service</li>
|
||||
<li>Personal Data: various types of Data as specified in the privacy policy of the service</li>
|
||||
<li><a href="https://example.com/privacy" target="_blank" rel="noopener">Privacy Policy</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user