⚡️ General Improvements
Added some additional instructional context for those who are very new to using this sort of thing! Updated the default attributes for <a>. Links on index.html now include: `target="_blank"` to automatically open links in a new tab `rel="noopener"` to navigate to the target resource without granting the new browsing context access to the document that opened it. The <img> tags on index.html now include a `alt="Text Here"` attribute to help improve accessibility. LittleLink now scores a 99 in performance, a 94 in accessibility (some brand colors are not accessible, and neither is the LittleLink brand color with light theme), a 100 in best practices, and a 100 in SEO through Google Lighthouse.
This commit is contained in:
Seth Cottle
parent
8425f9dd55
commit
9b720cd33f
1 changed files with 79 additions and 38 deletions
105
index.html
105
index.html
|
|
@ -35,132 +35,173 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="column" style="margin-top: 10%">
|
<div class="column" style="margin-top: 10%">
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
## Getting Started with LittleLink
|
||||||
|
|
||||||
|
This page has been built with every pre-designed button available in LittleLink by default. You can rearrange and delete as needed.
|
||||||
|
|
||||||
|
You can add your own brand or others brands you may need in the `css/brands.css` file.
|
||||||
|
|
||||||
|
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 "Short Bio" section tell users about yourself or your brand.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
<!-- Your Image Here -->
|
<!-- Your Image Here -->
|
||||||
<img src="images/avatar.png" srcset="images/avatar@2x.png 2x">
|
<img src="images/avatar.png" srcset="images/avatar@2x.png 2x" alt="LittleLink Logo">
|
||||||
|
|
||||||
<!-- Your Name -->
|
<!-- Your Name -->
|
||||||
<h1>LittleLink</h1>
|
<h1>LittleLink</h1>
|
||||||
|
|
||||||
<!-- Short Bio -->
|
<!-- Short Bio -->
|
||||||
<p>LittleLink is an open source DIY alternative to services like <a href="https://linktr.ee">Linktree</a> and <a href="https://many.link">many.link</a>. LittleLink was built using <a href="http://www.getskeleton.com">Skeleton</a>, a dead simple, responsive boilerplate—we’ve just created some branded buttons and stripped out the things you won't need. 😊</p>
|
<p>LittleLink is an open source DIY alternative to services like <a href="https://linktr.ee" target="_blank" rel="noopener">Linktree</a> and <a href="https://many.link" target="_blank" rel="noopener">many.link</a>. LittleLink was built using <a href="http://www.getskeleton.com" target="_blank" rel="noopener">Skeleton</a>, a dead simple, responsive boilerplate—we’ve just created some branded buttons and stripped out the things you won't need. 😊</p>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
<!-- Replace # with your profile URL. Delete whatever you don't need & create your own brand styles in css/brands.css -->
|
## Breaking down <a> attributes:
|
||||||
|
|
||||||
|
1.) class="button button-default" | The first "button" here is telling this <a> tag that it should make this element a button and applies the default styling in `css/brands.css`.
|
||||||
|
The second portion, button-default, is declaring the specific brand style you would like to apply. Here we're applying the "default" style and color.
|
||||||
|
If you want to make this button to use the brand colors for Discord, just change "button-default" to "button-discord". Brands are found in `css/brands.css`. You can always edit & add your own there.
|
||||||
|
|
||||||
|
2.) Replace the # in href="#" with the desired target URL for the button.
|
||||||
|
|
||||||
|
3.) target="_blank" | This attribute opens links in a new tab. Remove this attribute to prevent links from opening in a new tab.
|
||||||
|
|
||||||
|
4.) rel="noopener" | This attribute instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it.
|
||||||
|
This is especially useful when opening untrusted links. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener
|
||||||
|
|
||||||
|
## Breaking down the <img> attributes:
|
||||||
|
|
||||||
|
1.) class="icon" | This class is telling the <img> tag that it should use the styling for icons found in `css/brands.css`.
|
||||||
|
|
||||||
|
2.) src="icons/[icon_name].svg" | This defines the icon you would like to display from the icons/ folder. For example, you can change this to src="icons/discord.svg" to use the Discord icon.
|
||||||
|
Add your own 24x24 icons to the "icons" folder to reference them. We recommend providing a SVG.
|
||||||
|
|
||||||
|
3.) alt="Example Logo" | This alt attribute helps provides alternate text for an image, this can assist users who use screen readers.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
<!-- Github -->
|
<!-- Github -->
|
||||||
<a class="button button-github" href="#"><img class="icon" src="icons/github.svg">Github</a>
|
<a class="button button-github" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/github.svg" alt="GitHub Logo">GitHub</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Twitter -->
|
<!-- Twitter -->
|
||||||
<a class="button button-twitter" href="#"><img class="icon" src="icons/twitter.svg">Twitter</a>
|
<a class="button button-twitter" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/twitter.svg" alt="Twitter Logo">Twitter</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Instagram -->
|
<!-- Instagram -->
|
||||||
<a class="button button-instagram" href="#"><img class="icon" src="icons/instagram.svg">Instagram</a>
|
<a class="button button-instagram" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/instagram.svg" alt="Instagram Logo">Instagram</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Facebook -->
|
<!-- Facebook -->
|
||||||
<a class="button button-facebook" href="#"><img class="icon" src="icons/facebook.svg">Find us on Facebook</a>
|
<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>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Facebook Messenger -->
|
<!-- Facebook Messenger -->
|
||||||
<a class="button button-messenger" href="#"><img class="icon" src="icons/messenger.svg">Chat on Messenger</a>
|
<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>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- LinkedIn -->
|
<!-- LinkedIn -->
|
||||||
<a class="button button-linkedin" href="#"><img class="icon" src="icons/linkedin.svg">LinkedIn</a>
|
<a class="button button-linkedin" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- YouTube -->
|
<!-- YouTube -->
|
||||||
<a class="button button-youtube" href="#"><img class="icon" src="icons/youtube.svg">YouTube</a>
|
<a class="button button-youtube" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/youtube.svg" alt="YouTube Logo">YouTube</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Discord -->
|
<!-- Discord -->
|
||||||
<a class="button button-discord" href="#"><img class="icon" src="icons/discord.svg">Discord</a>
|
<a class="button button-discord" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/discord.svg" alt="Discord Logo">Discord</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Twitch -->
|
<!-- Twitch -->
|
||||||
<a class="button button-twitch" href="#"><img class="icon" src="icons/twitch.svg">Twitch</a>
|
<a class="button button-twitch" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/twitch.svg" alt="Twitch Logo">Twitch</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- ProductHunt -->
|
<!-- ProductHunt -->
|
||||||
<a class="button button-producthunt" href="#"><img class="icon" src="icons/producthunt.svg">Product Hunt</a>
|
<a class="button button-producthunt" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/producthunt.svg" alt="Product Hunt Logo">Product Hunt</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Snapchat -->
|
<!-- Snapchat -->
|
||||||
<a class="button button-snapchat" href="#"><img class="icon" src="icons/snapchat.svg">Snapchat</a>
|
<a class="button button-snapchat" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/snapchat.svg" alt="Snapchat Logo">Snapchat</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Spotify -->
|
<!-- Spotify -->
|
||||||
<a class="button button-spotify" href="#"><img class="icon" src="icons/spotify.svg">Spotify</a>
|
<a class="button button-spotify" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/spotify.svg" alt="Spotify Logo">Spotify</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Reddit -->
|
<!-- Reddit -->
|
||||||
<a class="button button-reddit" href="#"><img class="icon" src="icons/reddit.svg">Reddit</a>
|
<a class="button button-reddit" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/reddit.svg" alt="Reddit Logo">Reddit</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Medium -->
|
<!-- Medium -->
|
||||||
<a class="button button-medium" href="#"><img class="icon" src="icons/medium.svg">Medium</a>
|
<a class="button button-medium" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/medium.svg" alt="Medium Logo">Medium</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Pinterest -->
|
<!-- Pinterest -->
|
||||||
<a class="button button-pinterest" href="#"><img class="icon" src="icons/pinterest.svg">Follow on Pinterest</a>
|
<a class="button button-pinterest" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/pinterest.svg" alt="Pinterest Logo">Follow on Pinterest</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- TikTok -->
|
<!-- TikTok -->
|
||||||
<a class="button button-tiktok" href="#"><img class="icon" src="icons/tiktok.svg">TikTok</a>
|
<a class="button button-tiktok" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/tiktok.svg" alt="TikTok Logo">TikTok</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Email -->
|
<!-- Email -->
|
||||||
<a class="button button-default" href="#"><img class="icon" src="icons/email.svg">hello@littlelink.io</a>
|
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/email.svg" alt="Email Icon">hello@littlelink.io</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Email Alternative -->
|
<!-- Email Alternative -->
|
||||||
<a class="button button-default" href="#"><img class="icon" src="icons/email_alt.svg">hello@littlelink.io</a>
|
<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>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- SoundCloud -->
|
<!-- SoundCloud -->
|
||||||
<a class="button button-soundcloud" href="#"><img class="icon" src="icons/soundcloud.svg">SoundCloud</a>
|
<a class="button button-soundcloud" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/soundcloud.svg" alt="SoundCloud Logo">SoundCloud</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Figma -->
|
<!-- Figma -->
|
||||||
<a class="button button-figma" href="#"><img class="icon" src="icons/figma.svg">Figma</a>
|
<a class="button button-figma" href="#" target="_blank" rel="noopener" ><img class="icon" src="icons/figma.svg" alt="Figma Logo">Figma</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Kit -->
|
<!-- Kit -->
|
||||||
<a class="button button-kit" href="#"><img class="icon" src="icons/kit.svg">Kit</a>
|
<a class="button button-kit" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/kit.svg" alt="Kit Logo">Kit</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Telegram -->
|
<!-- Telegram -->
|
||||||
<a class="button button-telegram" href="#"><img class="icon" src="icons/telegram.svg">Telegram</a>
|
<a class="button button-telegram" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/telegram.svg" alt="Telegram Logo">Telegram</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Tumblr -->
|
<!-- Tumblr -->
|
||||||
<a class="button button-tumblr" href="#"><img class="icon" src="icons/tumblr.svg">Tumblr</a>
|
<a class="button button-tumblr" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/tumblr.svg" alt="Tumblr Logo">Tumblr</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Steam -->
|
<!-- Steam -->
|
||||||
<a class="button button-steam" href="#"><img class="icon" src="icons/steam.svg">Steam</a>
|
<a class="button button-steam" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/steam.svg" alt="Steam Logo">Steam</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Vimeo -->
|
<!-- Vimeo -->
|
||||||
<a class="button button-vimeo" href="#"><img class="icon" src="icons/vimeo.svg">Vimeo</a>
|
<a class="button button-vimeo" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/vimeo.svg" alt="Vimeo Logo">Vimeo</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Wordpress -->
|
<!-- Wordpress -->
|
||||||
<a class="button button-wordpress" href="#"><img class="icon" src="icons/wordpress.svg">Wordpress</a>
|
<a class="button button-wordpress" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/wordpress.svg" alt="Wordpress Logo">Wordpress</a>
|
||||||
|
<br>
|
||||||
|
|
||||||
<!-- Goodreads -->
|
<!-- Goodreads -->
|
||||||
<a class="button button-goodreads" href="#"><img class="icon" src="icons/goodreads.svg">Goodreads</a>
|
<a class="button button-goodreads" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/goodreads.svg" alt="Goodreads Logo">Goodreads</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Skoob -->
|
<!-- Skoob -->
|
||||||
<a class="button button-skoob" href="#"><img class="icon" src="icons/skoob.svg">Skoob</a>
|
<a class="button button-skoob" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/skoob.svg" alt="Skoob Logo">Skoob</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<p>Build your own by forking <a href="https://littlelink.io">LittleLink</a>.</p>
|
<p>Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener">LittleLink</a>.</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue