gkaklas/littlelink-extended
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updates!

Browse source 
Aligns preview.html code with the core LittleLink repo styling. Adds a stroke to the branded content where needed for accessibility like in the core LittleLink repo. New services, including Filmweb, Gog, ListenBrainz, Mixcloud, PlayStation, Roll20, WIP, and Xbox. Some minor updates, like the Alpha Universe png icon to a SVG. This also updates to the newer LittleLink branding.
This commit is contained in:
Seth Cottle 2024-03-06 21:46:11 -05:00
parent 128e1f3ee2
commit 9a6ebbf1fd
19 changed files with 291 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

128
preview.html
View file

@ -35,7 +35,7 @@
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/avatar.png">
<link rel="icon" type="image/png" href="images/littlelink.svg">
</head>
@ -63,7 +63,7 @@
-->
<!-- Your Image Here -->
<img src="images/avatar.svg" class="avatar" alt="LittleLink Logo">
<img src="images/littlelink.svg" class="avatar" alt="LittleLink Logo">
<!-- Title -->
<h1>LittleLink Extended</h1>
@ -83,7 +83,7 @@
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.
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:
@ -98,143 +98,145 @@
-->
<!-- 500px -->
<a class="button button-500px" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/500px.svg" alt="500px Logo">500px</a>
<a class="button button-500px" href="#" target="_blank" rel="noopener" role="button" role="button"> <img class="icon" 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">
<img class="icon" src="images/icons-extended/alphauniverse.png" alt="Alpha Universe Logo">Universe</a>
<a class="button button-alphauniverse" href="#" target="_blank" rel="noopener" role="button">
<img class="icon" 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">
<img class="icon" src="images/icons-extended/anilist.svg" alt="Anilist Logo">Anilist</a>
<br>
<!-- Behance -->
<a class="button button-behance" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/behance.svg" alt="Behance Logo">Behance</a>
<a class="button button-anilist" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons-extended/anilist.svg" alt="Anilist Logo">Anilist</a>
<br>
<!-- Codepen -->
<a class="button button-codepen" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/codepen.svg" alt="Codepen Logo">Codepen</a>
<a class="button button-codepen" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons-extended/codepen.svg" alt="Codepen Logo">Codepen</a>
<br>
<!-- Deezer -->
<a class="button button-deezer" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/deezer.svg" alt="Deezer Logo">Listen on Deezer</a>
<a class="button button-deezer" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons-extended/deezer.svg" alt="Deezer Logo">Listen on Deezer</a>
<br>
<!-- Deezer Alt -->
<a class="button button-deezer-alt" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/deezer-alt.svg" alt="Deezer Alt Logo">Listen on Deezer</a>
<a class="button button-deezer-alt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons-extended/deezer-alt.svg" alt="Deezer Alt Logo">Listen on Deezer</a>
<br>
<!-- Devpost -->
<a class="button button-devpost" href="#" target="_blank" rel="noopener">
<img class="icon icon-invert" src="images/icons-extended/devpost.svg" alt="Devpost Logo">Devpost</a>
<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">
<img class="icon" src="images/icons-extended/distiller.svg" alt="Distiller Logo">Distiller</a>
<a class="button button-dist" href="#" target="_blank" rel="noopener" role="button"><img class="icon" 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" 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" src="images/icons-extended/gog.svg" alt="Gog.com Logo">Gog</a>
<br>
<!-- Hackerearth -->
<a class="button button-hackerearth" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/hackerearth.svg" alt="HackerRank Logo">HackerEarth</a>
<a class="button button-hackerearth" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons-extended/hackerearth.svg" alt="HackerEarth Logo">HackerEarth</a>
<br>
<!-- Hackerrank -->
<a class="button button-hackerrank" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/hackerrank.svg" alt="HackerRank Logo">HackerRank</a>
<a class="button button-hackerrank" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons-extended/hackerrank.svg" alt="HackerRank Logo">HackerRank</a>
<br>
<!-- Itch.io -->
<a class="button button-itchio" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/itchio.svg" alt="itchio Logo">itch.io</a>
<a class="button button-itchio" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons-extended/itchio.svg" alt="itchio Logo">itch.io</a>
<br>
<!-- Lemmy -->
<a class="button button-lemmy" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/lemmy.svg" alt="Lemmy Logo">Lemmy</a>
<a class="button button-lemmy" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons-extended/lemmy.svg" alt="Lemmy Logo">Lemmy</a>
<br>
<!-- Qobuz -->
<a class="button button-qobuz" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/qobuz.svg" alt="Qobuz Logo">Listen on Qobuz</a>
<!-- ListenBrainz -->
<a class="button button-listenbrainz" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons-extended/listenbrainz.svg" alt="ListenBrainz Logo">ListenBrainz</a>
<br>
<!-- Matrix -->
<a class="button button-matrix" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/matrix.svg" alt="Matrix Logo">Matrix</a>
<a class="button button-matrix" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons-extended/matrix.svg" alt="Matrix Logo">Matrix</a>
<br>
<!-- MicroBlog -->
<a class="button button-microblog" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/microblog.svg" alt="MicroBlog Logo">MicroBlog</a>
<a class="button button-microblog" href="#" target="_blank" rel="noopener" role="button"><img class="icon" 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" src="images/icons-extended/mixcloud.svg" alt="Mixcloud Logo">Mixcloud</a>
<br>
<!-- MyAnimeList -->
<a class="button button-myanimelist" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/myanimelist.svg" alt="MyAnimeList Logo">MyAnimeList</a>
<a class="button button-myanimelist" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons-extended/myanimelist.svg" alt="MyAnimeList Logo">MyAnimeList</a>
<br>
<!-- OP.GG -->
<a class="button button-opgg" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/opgg.svg" alt="OP.GG Logo">OP.GG</a>
<a class="button button-opgg" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons-extended/opgg.svg" alt="OP.GG Logo">OP.GG</a>
<br>
<!-- ORCID ID -->
<a class="button button-orcid-id" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/orcid-id.svg" alt="ORCID ID Logo">ORCID ID</a>
<a class="button button-orcid-id" href="#" target="_blank" rel="noopener" role="button"><img class="icon" 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">
<img class="icon" src="images/icons-extended/osu.svg" alt="osu! Logo">osu!</a>
<a class="button button-osu" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons-extended/osu.svg" alt="osu! Logo">osu!</a>
<br>
<!-- Pixelfed -->
<a class="button button-pixelfed" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/pixelfed.svg" alt="Pixelfed Logo">Pixelfed</a>
<a class="button button-pixelfed" href="#" target="_blank" rel="noopener" role="button"><img class="icon" 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" src="images/icons-extended/playstation.svg" alt="PlayStation Logo">PlayStation</a>
<br>
<!-- Qobuz -->
<a class="button button-qobuz" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons-extended/qobuz.svg" alt="Qobuz Logo">Listen on Qobuz</a>
<br>
<!-- ResearchGate -->
<a class="button button-researchgate" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/researchgate.svg" alt="ResearchGate Logo">ResearchGate</a>
<a class="button button-researchgate" href="#" target="_blank" rel="noopener" role="button"><img class="icon" 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" src="images/icons-extended/roll20.svg" alt="Roll20 Logo">Roll20</a>
<br>
<!-- SpaceHey -->
<a class="button button-spacehey" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/spacehey.svg" alt="SpaceHey Logo">SpaceHey</a>
<a class="button button-spacehey" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons-extended/spacehey.svg" alt="SpaceHey Logo">SpaceHey</a>
<br>
<!-- Tidal -->
<a class="button button-tidal" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/tidal.svg" alt="Tidal Logo">Listen on Tidal</a>
<a class="button button-tidal" href="#" target="_blank" rel="noopener" role="button"><img class="icon" 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">
<img class="icon" src="images/icons-extended/vero.svg" alt="Vero Logo">Vero</a>
<br>
<a class="button button-vero" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons-extended/vero.svg" alt="Vero Logo">Vero</a>
<br>
<!-- WIP -->
<a class="button button-wip" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons-extended/wip.svg" alt="WIP Logo">WIP</a>
<br>
<!-- Write.as -->
<a class="button button-writeas" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons-extended/writeas.svg" alt="Write.as Logo">Write.as</a>
<a class="button button-writeas" href="#" target="_blank" rel="noopener" role="button"><img class="icon" 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">
<img class="icon" src="images/icons-extended/writefreely.svg" alt="WriteFreely Logo">WriteFreely</a>
<a class="button button-writefreely" href="#" target="_blank" rel="noopener" role="button"><img class="icon" 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" src="images/icons-extended/xbox.svg" alt="Xbox Logo">Xbox</a>
<br>
<br>
<p>Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener">LittleLink</a>.</p>
<p>Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener" role="button">LittleLink</a>.</p>
</div>
</div>