Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
949ed19bcb | ||
|
|
b0af864541 | ||
|
|
5a2ed1592a | ||
|
|
2348491382 | ||
|
aede738f1a | ||
|
|
0db66a54d4 | ||
|
|
2f8ddfa076 | ||
|
|
b31d74ee46 | ||
|
460cf6a7a5 | ||
|
905791e1c7 | ||
|
|
94794514ac | ||
|
|
15f8614461 | ||
|
|
568b2f6c0e | ||
|
c48c752a26 |
@@ -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 `brands.css` or copy the generated HTML code to put in `index.html`. This builder also helps automate accessibility features by checking contrast ratios and suggesting borders 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.
|
||||
|
||||
12
VERSION.md
12
VERSION.md
@@ -1,6 +1,16 @@
|
||||
# LittleLink Version History
|
||||
|
||||
## Current Version: v3.0.1
|
||||
## Current Version: v3.1.1
|
||||
|
||||
### 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
|
||||
|
||||
### v3.0.1 - 11/13/2024
|
||||
- Removed Trakt logo from `images/icons` since this now lives in LittleLink Extended
|
||||
|
||||
@@ -359,6 +359,13 @@
|
||||
--button-border:1px solid #212121;
|
||||
}
|
||||
|
||||
/* Obsidian */
|
||||
.button.button-obsidian {
|
||||
--button-text:#ffffff;
|
||||
--button-background:#262626;
|
||||
--button-border:1px solid #ffffff;
|
||||
}
|
||||
|
||||
/* OnlyFans */
|
||||
.button-onlyfans {
|
||||
--button-text:#ffffff;
|
||||
@@ -585,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;
|
||||
|
||||
51
images/icons/obsidian.svg
Normal file
51
images/icons/obsidian.svg
Normal file
@@ -0,0 +1,51 @@
|
||||
<svg fill="none" height="100%" width="100%" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<radialGradient id="logo-bottom-left" cx="0" cy="0" gradientTransform="matrix(-59 -225 150 -39 161.4 470)" gradientUnits="userSpaceOnUse" r="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity=".4"/>
|
||||
<stop offset="1" stop-opacity=".1"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="logo-top-right" cx="0" cy="0" gradientTransform="matrix(50 -379 280 37 360 374.2)" gradientUnits="userSpaceOnUse" r="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity=".6"/>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity=".1"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="logo-top-left" cx="0" cy="0" gradientTransform="matrix(69 -319 218 47 175.4 307)" gradientUnits="userSpaceOnUse" r="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity=".8"/>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity=".4"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="logo-bottom-right" cx="0" cy="0" gradientTransform="matrix(-96 -163 187 -111 335.3 512.2)" gradientUnits="userSpaceOnUse" r="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity=".3"/>
|
||||
<stop offset="1" stop-opacity=".3"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="logo-top-edge" cx="0" cy="0" gradientTransform="matrix(-36 166 -112 -24 310 128.2)" gradientUnits="userSpaceOnUse" r="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity=".2"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="logo-left-edge" cx="0" cy="0" gradientTransform="matrix(88 89 -190 187 111 220.2)" gradientUnits="userSpaceOnUse" r="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity=".2"/>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity=".4"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="logo-bottom-edge" cx="0" cy="0" gradientTransform="matrix(9 130 -276 20 215 284)" gradientUnits="userSpaceOnUse" r="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity=".2"/>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity=".3"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="logo-middle-edge" cx="0" cy="0" gradientTransform="matrix(-198 -104 327 -623 400 399.2)" gradientUnits="userSpaceOnUse" r="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity=".2"/>
|
||||
<stop offset=".5" stop-color="#fff" stop-opacity=".2"/>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity=".3"/>
|
||||
</radialGradient>
|
||||
<clipPath id="clip">
|
||||
<path d="M.2.2h512v512H.2z"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#clip)">
|
||||
<path d="M382.3 475.6c-3.1 23.4-26 41.6-48.7 35.3-32.4-8.9-69.9-22.8-103.6-25.4l-51.7-4a34 34 0 0 1-22-10.2l-89-91.7a34 34 0 0 1-6.7-37.7s55-121 57.1-127.3c2-6.3 9.6-61.2 14-90.6 1.2-7.9 5-15 11-20.3L248 8.9a34.1 34.1 0 0 1 49.6 4.3L386 125.6a37 37 0 0 1 7.6 22.4c0 21.3 1.8 65 13.6 93.2 11.5 27.3 32.5 57 43.5 71.5a17.3 17.3 0 0 1 1.3 19.2 1494 1494 0 0 1-44.8 70.6c-15 22.3-21.9 49.9-25 73.1z" fill="#6c31e3"/>
|
||||
<path d="M165.9 478.3c41.4-84 40.2-144.2 22.6-187-16.2-39.6-46.3-64.5-70-80-.6 2.3-1.3 4.4-2.2 6.5L60.6 342a34 34 0 0 0 6.6 37.7l89.1 91.7a34 34 0 0 0 9.6 7z" fill="url(#logo-bottom-left)"/>
|
||||
<path d="M278.4 307.8c11.2 1.2 22.2 3.6 32.8 7.6 34 12.7 65 41.2 90.5 96.3 1.8-3.1 3.6-6.2 5.6-9.2a1536 1536 0 0 0 44.8-70.6 17 17 0 0 0-1.3-19.2c-11-14.6-32-44.2-43.5-71.5-11.8-28.2-13.5-72-13.6-93.2 0-8.1-2.6-16-7.6-22.4L297.6 13.2a34 34 0 0 0-1.5-1.7 96 96 0 0 1 2 54 198.3 198.3 0 0 1-17.6 41.3l-7.2 14.2a171 171 0 0 0-19.4 71c-1.2 29.4 4.8 66.4 24.5 115.8z" fill="url(#logo-top-right)"/>
|
||||
<path d="M278.4 307.8c-19.7-49.4-25.8-86.4-24.5-115.9a171 171 0 0 1 19.4-71c2.3-4.8 4.8-9.5 7.2-14.1 7.1-13.9 14-27 17.6-41.4a96 96 0 0 0-2-54A34.1 34.1 0 0 0 248 9l-105.4 94.8a34.1 34.1 0 0 0-10.9 20.3l-12.8 85-.5 2.3c23.8 15.5 54 40.4 70.1 80a147 147 0 0 1 7.8 24.8c28-6.8 55.7-11 82.1-8.3z" fill="url(#logo-top-left)"/>
|
||||
<path d="M333.6 511c22.7 6.2 45.6-12 48.7-35.4a187 187 0 0 1 19.4-63.9c-25.6-55-56.5-83.6-90.4-96.3-36-13.4-75.2-9-115 .7 8.9 40.4 3.6 93.3-30.4 162.2 4 1.8 8.1 3 12.5 3.3 0 0 24.4 2 53.6 4.1 29 2 72.4 17.1 101.6 25.2z" fill="url(#logo-bottom-right)"/>
|
||||
<g clip-rule="evenodd" fill-rule="evenodd">
|
||||
<path d="M254.1 190c-1.3 29.2 2.4 62.8 22.1 112.1l-6.2-.5c-17.7-51.5-21.5-78-20.2-107.6a174.7 174.7 0 0 1 20.4-72c2.4-4.9 8-14.1 10.5-18.8 7.1-13.7 11.9-21 16-33.6 5.7-17.5 4.5-25.9 3.8-34.1 4.6 29.9-12.7 56-25.7 82.4a177.1 177.1 0 0 0-20.7 72z" fill="url(#logo-top-edge)"/>
|
||||
<path d="M194.3 293.4c2.4 5.4 4.6 9.8 6 16.5L195 311c-2.1-7.8-3.8-13.4-6.8-20-17.8-42-46.3-63.6-69.7-79.5 28.2 15.2 57.2 39 75.7 81.9z" fill="url(#logo-left-edge)"/>
|
||||
<path d="M200.6 315.1c9.8 46-1.2 104.2-33.6 160.9 27.1-56.2 40.2-110.1 29.3-160z" fill="url(#logo-bottom-edge)"/>
|
||||
<path d="M312.5 311c53.1 19.9 73.6 63.6 88.9 100-19-38.1-45.2-80.3-90.8-96-34.8-11.8-64.1-10.4-114.3 1l-1.1-5c53.2-12.1 81-13.5 117.3 0z" fill="url(#logo-middle-edge)"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 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 |
10
index.html
10
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">
|
||||
@@ -212,6 +212,9 @@
|
||||
<!-- Notion -->
|
||||
<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="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>
|
||||
|
||||
@@ -317,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