310 lines
18 KiB
HTML
310 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
|
||
<!-- Page Information
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<meta charset="utf-8">
|
||
<title>LittleLink</title>
|
||
<meta name="description" content="Find us online!">
|
||
<meta name="author" content="Seth Cottle">
|
||
|
||
<!-- Mobile Specific Metas
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<!-- FONT
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&display=swap" rel="stylesheet">
|
||
|
||
<!-- CSS
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link rel="stylesheet" href="css/normalize.css">
|
||
|
||
<!-- Themes:
|
||
Auto: css/skeleton-auto.css
|
||
Light: css/skeleton-light.css
|
||
Dark: css/skeleton-dark.css
|
||
-->
|
||
<link rel="stylesheet" href="css/skeleton-auto.css">
|
||
|
||
<link rel="stylesheet" href="css/brands.css">
|
||
<link rel="stylesheet" href="css/brands-extended.css">
|
||
|
||
|
||
<!-- Favicon
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link rel="icon" type="image/png" href="images/littlelink.svg">
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- Primary Page Layout
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="column" style="margin-top: 10%">
|
||
|
||
<!--
|
||
|
||
THIS REPO DOES NOT INCLUDE THE CORE BRANDS FROM THE LITTLELINK REPO.
|
||
|
||
## Getting Started with LittleLink Extended - see the README as well.
|
||
|
||
Import the extended brands by copy & pasting the `brands-extended.css` file from the `css` folder here into the `css` folder of your copy of LittleLink (https://github.com/sethcottle/littlelink).
|
||
|
||
In the <head> section of your copy of index.html in LittleLink, be sure to include <link rel="stylesheet" href="css/brands-extended.css"> so that you can access those extended brand CSS files.
|
||
└── We've set it up in this preview file as you would need to in your index.html, so feel free to copy and paste the CSS section above.
|
||
|
||
In the `images` folder of littlelink-extended, copy and paste `icons-extended` into the `images` folder of your copy of the main LittleLink file to access the extended brand iconography.
|
||
|
||
-->
|
||
|
||
<!-- Your Image Here -->
|
||
<img src="images/littlelink.svg" class="avatar" alt="LittleLink Logo">
|
||
|
||
<!-- Title -->
|
||
<h1>LittleLink Extended</h1>
|
||
|
||
<!-- Short Bio -->
|
||
<p>This page lets you preview the assets that are part of LittleLink Extended.</p>
|
||
|
||
<!--
|
||
|
||
## 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" role="button" | 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.
|
||
|
||
-->
|
||
|
||
<!-- 500px -->
|
||
<a class="button button-500px" href="#" target="_blank" rel="noopener" role="button"> <img class="icon" aria-hidden="true" aria-hidden="true" src="images/icons-extended/500px.svg" alt="500px Logo">500px</a>
|
||
<br>
|
||
|
||
<!-- Alpha Universe (Sony) -->
|
||
<a class="button button-alphauniverse" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/sony-alpha.svg" alt="Alpha Universe Logo">Universe</a>
|
||
<br>
|
||
|
||
<!-- AniList -->
|
||
<a class="button button-anilist" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/anilist.svg" alt="AniList Logo">AniList</a>
|
||
<br>
|
||
|
||
<!-- Audiomack -->
|
||
<a class="button button-audiomack" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/audiomack.svg" alt="Audiomack Logo">Audiomack</a>
|
||
<br>
|
||
|
||
<!-- BeReal -->
|
||
<a class="button button-bereal" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/bereal.svg" alt="BeReal Logo">BeReal</a><br>
|
||
|
||
<!-- Bandsintown -->
|
||
<a class="button button-bandsintown" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/bandsintown.svg" alt="Bandsintown Logo">Bandsintown</a>
|
||
<br>
|
||
|
||
<!-- Big Cartel -->
|
||
<a class="button button-bigcartel" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/bigcartel.svg" alt="Big Cartel Logo">Big Cartel</a>
|
||
<br>
|
||
|
||
<!-- Bonfire -->
|
||
<a class="button button-bonfire" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/bonfire.svg" alt="Bonfire Logo">Bonfire</a>
|
||
<br>
|
||
|
||
<!-- Cameo -->
|
||
<a class="button button-cameo" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/cameo.svg" alt="Cameo Logo">Cameo</a>
|
||
<br>
|
||
|
||
<!-- Clubhouse -->
|
||
<a class="button button-clubhouse" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/clubhouse.svg" alt="Clubhouse Logo">Clubhouse</a><br>
|
||
|
||
<!-- Codepen -->
|
||
<a class="button button-codepen" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/codepen.svg" alt="Codepen Logo">Codepen</a>
|
||
<br>
|
||
|
||
<!-- Deezer -->
|
||
<a class="button button-deezer" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/deezer.svg" alt="Deezer Logo">Listen on Deezer</a>
|
||
<br>
|
||
|
||
<!-- Devpost -->
|
||
<a class="button button-devpost" href="#" target="_blank" rel="noopener" role="button"><img class="icon icon-invert" src="images/icons-extended/devpost.svg" alt="Devpost Logo">Devpost</a>
|
||
<br>
|
||
|
||
<!-- Distiller -->
|
||
<a class="button button-dist" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/distiller.svg" alt="Distiller Logo">Distiller</a>
|
||
<br>
|
||
|
||
<!-- Filmweb -->
|
||
<a class="button button-filmweb" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/filmweb.svg" alt="Filmweb Logo">Filmweb</a>
|
||
<br>
|
||
|
||
<!-- Gog -->
|
||
<a class="button button-gog" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/gog.svg" alt="Gog.com Logo">Gog</a>
|
||
<br>
|
||
|
||
<!-- Guilded -->
|
||
<a class="button button-guilded" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/guilded.svg" alt="Guilded Logo">Guilded</a><br>
|
||
|
||
<!-- Gumroad -->
|
||
<a class="button button-gumroad" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/gumroad.svg" alt="Gumroad Logo">Gumroad</a>
|
||
<br>
|
||
|
||
<!-- Hackerearth -->
|
||
<a class="button button-hackerearth" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/hackerearth.svg" alt="HackerEarth Logo">HackerEarth</a>
|
||
<br>
|
||
|
||
<!-- Hackerrank -->
|
||
<a class="button button-hackerrank" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/hackerrank.svg" alt="HackerRank Logo">HackerRank</a>
|
||
<br>
|
||
|
||
<!-- Itch.io -->
|
||
<a class="button button-itchio" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/itchio.svg" alt="itchio Logo">itch.io</a>
|
||
<br>
|
||
|
||
<!-- Layers -->
|
||
<a class="button button-layers" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/layers.svg" alt="Layers Logo">Layers</a>
|
||
<br>
|
||
|
||
<!-- LeetCode -->
|
||
<a class="button button-leetcode" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/leetcode.svg" alt="LeetCode Logo">LeetCode</a><br>
|
||
|
||
<!-- Lemmy -->
|
||
<a class="button button-lemmy" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/lemmy.svg" alt="Lemmy Logo">Lemmy</a>
|
||
<br>
|
||
|
||
<!-- ListenBrainz -->
|
||
<a class="button button-listenbrainz" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/listenbrainz.svg" alt="ListenBrainz Logo">ListenBrainz</a>
|
||
<br>
|
||
|
||
<!-- Matrix -->
|
||
<a class="button button-matrix" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/matrix.svg" alt="Matrix Logo">Matrix</a>
|
||
<br>
|
||
|
||
<!-- MicroBlog -->
|
||
<a class="button button-microblog" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/microblog.svg" alt="MicroBlog Logo">MicroBlog</a>
|
||
<br>
|
||
|
||
<!-- Mixcloud -->
|
||
<a class="button button-mixcloud" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/mixcloud.svg" alt="Mixcloud Logo">Mixcloud</a>
|
||
<br>
|
||
|
||
<!-- MyAnimeList -->
|
||
<a class="button button-myanimelist" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/myanimelist.svg" alt="MyAnimeList Logo">MyAnimeList</a>
|
||
<br>
|
||
|
||
<!-- OP.GG -->
|
||
<a class="button button-opgg" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/opgg.svg" alt="OP.GG Logo">OP.GG</a>
|
||
<br>
|
||
|
||
<!-- OpenSea -->
|
||
<a class="button button-opensea" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/opensea.svg" alt="OpenSea Logo">OpenSea</a>
|
||
<br>
|
||
|
||
<!-- ORCID ID -->
|
||
<a class="button button-orcid-id" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/orcid-id.svg" alt="ORCID ID Logo">ORCID ID</a>
|
||
<br>
|
||
|
||
<!-- osu! -->
|
||
<a class="button button-osu" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/osu.svg" alt="osu! Logo">osu!</a>
|
||
<br>
|
||
|
||
<!-- Partiful -->
|
||
<a class="button button-partiful" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/partiful.svg" alt="Partiful Logo">Partiful</a><br>
|
||
|
||
<!-- Pixelfed -->
|
||
<a class="button button-pixelfed" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/pixelfed.svg" alt="Pixelfed Logo">Pixelfed</a>
|
||
<br>
|
||
|
||
<!-- PlayStation -->
|
||
<a class="button button-playstation" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/playstation.svg" alt="PlayStation Logo">PlayStation</a>
|
||
<br>
|
||
|
||
<!-- Post.news -->
|
||
<a class="button button-post-news" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/post-news.svg" alt="Post.news Logo">Post.news</a><br>
|
||
|
||
<!-- Qobuz -->
|
||
<a class="button button-qobuz" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/qobuz.svg" alt="Qobuz Logo">Listen on Qobuz</a>
|
||
<br>
|
||
|
||
<!-- QQ -->
|
||
<a class="button button-qq" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/qq.svg" alt="QQ Logo">QQ</a><br>
|
||
|
||
<!-- ravelry -->
|
||
<a class="button button-ravelry" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/ravelry.svg" alt="ravelry Logo">ravelry</a>
|
||
<br>
|
||
|
||
<!-- ResearchGate -->
|
||
<a class="button button-researchgate" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/researchgate.svg" alt="ResearchGate Logo">ResearchGate</a>
|
||
<br>
|
||
|
||
<!-- Roll20 -->
|
||
<a class="button button-roll20" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/roll20.svg" alt="Roll20 Logo">Roll20</a>
|
||
<br>
|
||
|
||
<!-- Skoob -->
|
||
<a class="button button-skoob" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/skoob.svg" alt="Skoob logo">Skoob</a><br>
|
||
|
||
<!-- SpaceHey -->
|
||
<a class="button button-spacehey" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/spacehey.svg" alt="SpaceHey Logo">SpaceHey</a>
|
||
<br>
|
||
|
||
<!-- Tidal -->
|
||
<a class="button button-tidal" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/tidal.svg" alt="Tidal Logo">Listen on Tidal</a>
|
||
<br>
|
||
|
||
<!-- Vero -->
|
||
<a class="button button-vero" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/vero.svg" alt="Vero Logo">Vero</a>
|
||
<br>
|
||
|
||
<!-- VRChat -->
|
||
<a class="button button-vrchat" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/vrchat.svg" alt="VRChat Logo">VRChat</a><br>
|
||
|
||
<!-- WIP -->
|
||
<a class="button button-wip" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/wip.svg" alt="WIP Logo">WIP</a>
|
||
<br>
|
||
|
||
<!-- Write.as -->
|
||
<a class="button button-writeas" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/writeas.svg" alt="Write.as Logo">Write.as</a>
|
||
<br>
|
||
|
||
<!-- Writefreely -->
|
||
<a class="button button-writefreely" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/writefreely.svg" alt="WriteFreely Logo">WriteFreely</a>
|
||
<br>
|
||
|
||
<!-- Xbox -->
|
||
<a class="button button-xbox" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/xbox.svg" alt="Xbox Logo">Xbox</a>
|
||
<br>
|
||
|
||
<!-- Xing -->
|
||
<a class="button button-xing" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons-extended/xing.svg" alt="Xing Logo">Xing</a><br>
|
||
|
||
<br>
|
||
|
||
<p>Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener" role="button">LittleLink</a>.</p>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- End Document
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
</body>
|
||
|
||
</html>
|