Merge branch 'sethcottle:main' into Develop

README.md

@@ -56,3 +56,6 @@ Duplicate the [LittleLink Template on Figma Community](https://www.figma.com/com
 
 ##### 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! 
+
+#### 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.

css/brands.css

@@ -124,11 +124,11 @@ button:hover,
   filter: brightness(90%) }
 
 /* Facebook */
-.button.button-facebook {
+.button.button-faceb {
   color: #FFFFFF;
   background-color: #1877f2 }
-.button.button-facebook:hover,
-.button.button-facebook:focus {
+.button.button-faceb:hover,
+.button.button-faceb:focus {
   filter: brightness(90%) }
 
 /* Facebook Messenger */
@@ -188,11 +188,11 @@ button:hover,
   filter: brightness(90%) }
 
 /* LinkedIn */
-.button.button-linkedin {
+.button.button-linked {
   color: #FFFFFF;
   background-color: #2867B2 }
-.button.button-linkedin:hover,
-.button.button-linkedin:focus {
+.button.button-linked:hover,
+.button.button-linked:focus {
   filter: brightness(90%) }
 
 /* Mastodon */
@@ -295,11 +295,11 @@ button:hover,
   filter: brightness(90%) }
 
 /* Tumblr */
-.button.button-tumblr {
+.button.button-tumb {
   color: #FFFFFF;
   background-color: #131313 }
-.button.button-tumblr:hover,
-.button.button-tumblr:focus {
+.button.button-tumb:hover,
+.button.button-tumb:focus {
   filter: brightness(90%) }
 
 /* Twitch */
@@ -311,11 +311,11 @@ button:hover,
   filter: brightness(90%) }
 
 /* Twitter */
-.button.button-twitter {
+.button.button-twit {
   color: #FFFFFF;
   background-color: #1DA1F2 }
-.button.button-twitter:hover,
-.button.button-twitter:focus {
+.button.button-twit:hover,
+.button.button-twit:focus {
   filter: brightness(90%) }
 
 /* Vimeo */
@@ -335,11 +335,11 @@ button:hover,
   filter: brightness(90%) }
 
 /* YouTube */
-.button.button-youtube {
+.button.button-yt {
   color: #FFFFFF;
   background-color:  #000000 }
-.button.button-youtube:hover,
-.button.button-youtube:focus {
+.button.button-yt:hover,
+.button.button-yt:focus {
   filter: brightness(90%) }
 
 /* WhatsApp */

index.html

@@ -44,9 +44,11 @@
 
           You can add your own brand or others brands you may need in the `css/brands.css` file. 
 
+          You can add custom icons to `images/icons/...`. It is recommended to use a 24x24 .SVG.
+
           Edit the "Your Image Here" section to add your own personal branding, like a picture of yourself or your brand logo!
 
-          Edit the "Your Name" section to change the page heading. You can use something like your name, your social handle, or your brand name.
+          Edit the "Title" section to change the page heading. You can use something like your name, your social handle, or your brand name.
 
           Edit the "Short Bio" section tell users about yourself or your brand.
 
@@ -55,7 +57,7 @@
         <!-- Your Image Here -->
         <img src="images/avatar.png" srcset="images/avatar@2x.png 2x" alt="LittleLink Logo">
 
-        <!-- Your Name -->
+        <!-- Title -->
         <h1>LittleLink</h1>
 
         <!-- Short Bio -->
@@ -88,147 +90,151 @@
         -->
 
         <!-- Github -->
-        <a class="button button-github" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/github.svg" alt="GitHub Logo">GitHub</a>
+        <a class="button button-github" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/github.svg" alt="GitHub Logo">GitHub</a>
           <br>
         
         <!-- Twitter -->
-        <a class="button button-twitter" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/twitter.svg" alt="Twitter Logo">Twitter</a>
+        <a class="button button-twit" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/twitter.svg" alt="Twitter Logo">Twitter</a>
           <br>
 
         <!-- Instagram -->
-        <a class="button button-instagram" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/instagram.svg" alt="Instagram Logo">Instagram</a>
+        <a class="button button-instagram" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/instagram.svg" alt="Instagram Logo">Instagram</a>
           <br>
 
         <!-- Facebook -->
-        <a class="button button-facebook" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/facebook.svg" alt="Facebook Logo">Find us on Facebook</a>
+        <a class="button button-faceb" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/facebook.svg" alt="Facebook Logo">Find us on Facebook</a>
           <br>
 
         <!-- Facebook Messenger -->
-        <a class="button button-messenger" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/messenger.svg" alt="Facebook Messenger Logo">Chat on Messenger</a>
+        <a class="button button-messenger" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/messenger.svg" alt="Facebook Messenger Logo">Chat on Messenger</a>
           <br>   
 
         <!-- LinkedIn -->
-        <a class="button button-linkedin" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a>
+        <a class="button button-linked" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a>
           <br>
 
         <!-- YouTube -->
-        <a class="button button-youtube" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/youtube.svg" alt="YouTube Logo">YouTube</a>
+        <a class="button button-yt" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/youtube.svg" alt="YouTube Logo">YouTube</a>
           <br> 
 
         <!-- Discord -->
-        <a class="button button-discord" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/discord.svg" alt="Discord Logo">Discord</a>
+        <a class="button button-discord" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/discord.svg" alt="Discord Logo">Discord</a>
           <br>
 
         <!-- Twitch -->
-        <a class="button button-twitch" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/twitch.svg" alt="Twitch Logo">Twitch</a>
+        <a class="button button-twitch" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/twitch.svg" alt="Twitch Logo">Twitch</a>
           <br>
 
         <!-- ProductHunt -->
-        <a class="button button-producthunt" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/producthunt.svg" alt="Product Hunt Logo">Product Hunt</a>
+        <a class="button button-producthunt" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/producthunt.svg" alt="Product Hunt Logo">Product Hunt</a>
          <br>
 
         <!-- Snapchat -->
-        <a class="button button-snapchat" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/snapchat.svg" alt="Snapchat Logo">Snapchat</a>
+        <a class="button button-snapchat" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/snapchat.svg" alt="Snapchat Logo">Snapchat</a>
           <br>
 
         <!-- Spotify -->
-        <a class="button button-spotify" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/spotify.svg" alt="Spotify Logo">Spotify</a>
+        <a class="button button-spotify" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/spotify.svg" alt="Spotify Logo">Spotify</a>
           <br>      
           
         <!-- Reddit -->
-        <a class="button button-reddit" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/reddit.svg" alt="Reddit Logo">Reddit</a>
+        <a class="button button-reddit" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/reddit.svg" alt="Reddit Logo">Reddit</a>
           <br>   
 
         <!-- Mastodon -->
-        <a class="button button-mastodon" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/mastodon.svg" alt="Mastodon Logo">Mastodon</a>
+        <a class="button button-mastodon" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/mastodon.svg" alt="Mastodon Logo">Mastodon</a>
           <br>           
 
         <!-- Medium -->
-        <a class="button button-medium" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/medium.svg" alt="Medium Logo">Medium</a>
+        <a class="button button-medium" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/medium.svg" alt="Medium Logo">Medium</a>
           <br> 
 
         <!-- Pinterest -->
-        <a class="button button-pinterest" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/pinterest.svg" alt="Pinterest Logo">Follow on Pinterest</a>
+        <a class="button button-pinterest" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/pinterest.svg" alt="Pinterest Logo">Follow on Pinterest</a>
           <br>
 
         <!-- TikTok -->
-        <a class="button button-tiktok" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/tiktok.svg" alt="TikTok Logo">TikTok</a>
+        <a class="button button-tiktok" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/tiktok.svg" alt="TikTok Logo">TikTok</a>
           <br>
 
         <!-- Email -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/email.svg" alt="Email Icon">hello@littlelink.io</a>
+        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/email.svg" alt="Email Icon">hello@littlelink.io</a>
           <br>
 
         <!-- Email Alternative -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/email_alt.svg" alt="Email Icon">hello@littlelink.io</a>
+        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/email_alt.svg" alt="Email Icon">hello@littlelink.io</a>
           <br>
 
         <!-- SoundCloud -->
-        <a class="button button-soundcloud" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/soundcloud.svg" alt="SoundCloud Logo">SoundCloud</a>
+        <a class="button button-soundcloud" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/soundcloud.svg" alt="SoundCloud Logo">SoundCloud</a>
           <br>              
 
         <!-- Figma -->
-        <a class="button button-figma" href="#" target="_blank" rel="noopener" ><img class="icon" src="icons/figma.svg" alt="Figma Logo">Figma</a>
+        <a class="button button-figma" href="#" target="_blank" rel="noopener" ><img class="icon" src="images/icons/figma.svg" alt="Figma Logo">Figma</a>
           <br>
 
         <!-- Kit -->
-        <a class="button button-kit" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/kit.svg" alt="Kit Logo">Kit</a>
+        <a class="button button-kit" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/kit.svg" alt="Kit Logo">Kit</a>
           <br>          
 
         <!-- Telegram -->
-        <a class="button button-telegram" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/telegram.svg" alt="Telegram Logo">Telegram</a>
+        <a class="button button-telegram" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/telegram.svg" alt="Telegram Logo">Telegram</a>
           <br>          
 
         <!-- Tumblr -->
-        <a class="button button-tumblr" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/tumblr.svg" alt="Tumblr Logo">Tumblr</a>
+        <a class="button button-tumb" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/tumblr.svg" alt="Tumblr Logo">Tumblr</a>
           <br>
 
         <!-- Steam -->
-        <a class="button button-steam" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/steam.svg" alt="Steam Logo">Steam</a>
+        <a class="button button-steam" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/steam.svg" alt="Steam Logo">Steam</a>
           <br>
 
         <!-- Vimeo -->
-        <a class="button button-vimeo" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/vimeo.svg" alt="Vimeo Logo">Vimeo</a>
+        <a class="button button-vimeo" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/vimeo.svg" alt="Vimeo Logo">Vimeo</a>
           <br>
 
         <!-- PayPal-->
-        <a class="button button-paypal" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/paypal.svg" alt="PayPal Logo">PayPal</a>
+        <a class="button button-paypal" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/paypal.svg" alt="PayPal Logo">PayPal</a>
         <br>
 
         <!-- WhatsApp -->
-        <a class="button button-whatsapp" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/whatsapp.svg" alt="WhatsApp Logo">WhatsApp</a>
+        <a class="button button-whatsapp" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/whatsapp.svg" alt="WhatsApp Logo">WhatsApp</a>
         <br>
           
         <!-- Wordpress -->
-        <a class="button button-wordpress" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/wordpress.svg" alt="Wordpress Logo">Wordpress</a>
+        <a class="button button-wordpress" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/wordpress.svg" alt="Wordpress Logo">Wordpress</a>
           <br>
 
         <!-- Goodreads -->
-        <a class="button button-goodreads" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/goodreads.svg" alt="Goodreads Logo">Goodreads</a>
+        <a class="button button-goodreads" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/goodreads.svg" alt="Goodreads Logo">Goodreads</a>
           <br>
 
         <!-- Skoob -->
-        <a class="button button-skoob" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/skoob.svg" alt="Skoob Logo">Skoob</a>
+        <a class="button button-skoob" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/skoob.svg" alt="Skoob Logo">Skoob</a>
           <br>
 
         <!-- Gitlab -->
-        <a class="button button-gitlab" href="_blank" target="_blank" rel="noopener"><img class="icon" src="icons/gitlab.svg" alt="GitLab Logo">GitLab</a>
+        <a class="button button-gitlab" href="_blank" target="_blank" rel="noopener"><img class="icon" src="images/icons/gitlab.svg" alt="GitLab Logo">GitLab</a>
           <br>
 
         <!-- XING -->
-        <a class="button button-xing" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/xing.svg" alt="xing Logo">Xing</a>
+        <a class="button button-xing" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/xing.svg" alt="xing Logo">Xing</a>
+          <br>
 
         <!-- Bandcamp -->
-        <a class="button button-bandcamp" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/bandcamp.svg" alt="Bandcamp Logo">Bandcamp</a>
+        <a class="button button-bandcamp" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/bandcamp.svg" alt="Bandcamp Logo">Bandcamp</a>
+          <br>
 
         <!-- Patreon -->
-        <a class="button button-patreon" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/patreon.svg" alt="Patreon Logo">Patreon</a>
+        <a class="button button-patreon" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/patreon.svg" alt="Patreon Logo">Patreon</a>
+        <br>
 
         <!-- Signal -->
-        <a class="button button-signal" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/signal.svg" alt="Signal Logo">Signal</a>
+        <a class="button button-signal" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/signal.svg" alt="Signal Logo">Signal</a>
+        <br>
 
         <!-- Venmo -->
-        <a class="button button-venmo" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/venmo.svg" alt="Venmo Logo">Venmo</a>
+        <a class="button button-venmo" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/venmo.svg" alt="Venmo Logo">Venmo</a>
 
         <br>
         <br>