Update VERSION.md

feat: youtube alt

VERSION.md

@@ -1,6 +1,13 @@
 # LittleLink Version History
 
-## Current Version: v3.0.1
+## Current Version: v3.1.0
+
+### v3.1.0 - 1/20/2024
+- 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

css/brands.css

@@ -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;

images/icons/obsidian.svg

@@ -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>

images/icons/youtube-alt.svg

@@ -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>

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">
@@ -211,6 +211,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="OnlyFans 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>
 

privacy.html

@@ -32,43 +32,43 @@
   <body>
     <div class="container-left" role="main">
       <div class="column">
-        <nav role="navigation" aria-label="Back to homepage">
+        <nav role="navigation">
-          <a href="index.html" tabindex="0">← Back to main page</a>
+          <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>
+          <h2 id="analytics-heading">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>
+          <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>
+          <h2 id="external-content-heading">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>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>
+          <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>
+          <h2 id="hosting-heading">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>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>
+          <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>