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

12
README.md
View file

@ -1,26 +1,28 @@
# 🔗 LittleLink Extended
![LittleLink](https://cdn.cottle.cloud/littlelink/social-circle.png)
![Logo](https://cdn.cottle.cloud/littlelink/littlelink.gif)
LittleLink Extended is an extension repository for [LittleLink](https://github.com/sethcottle/littlelink). This repository welcomes more niche services that aren't as globally or regionally popular as required by the core LittleLink repo. Users will be able to import the entirety of these extensions into their fork of LittleLink or selectively add services from it by copy and pasting what they'd like to use into their `brands.css` file and `icons` folders.
LittleLink Extended is an addon repository for [LittleLink](https://github.com/sethcottle/littlelink). This repository welcomes more niche services that aren't as globally or regionally popular as required by the core LittleLink repo. Users will be able to import the entirety of these extensions into their fork of LittleLink or selectively add services from it by copy and pasting what they'd like to use into their `brands.css` file and `icons` folders.
### 📂 Getting Started
You will need to fork or download a copy of the original [LittleLink project](https://github.com/sethcottle/littlelink) to use these extended brands in tandem with.
#### Import the Extended CSS
#### ⬇️ Import the Extended CSS
Copy and paste the `brands-extended.css` file that is in the `css` folder of this repository into the `css` folder that is in your copy of the [LittleLink project](https://github.com/sethcottle/littlelink). Your folder should look a little something like this after:
![Extended Brands CSS](https://cdn.cottle.cloud/littlelink/brands-extended-folder.png)
#### Import the Extended Icons
#### ⬇️ Import the Extended Icons
Copy and paste the `icons-extended` folder that is in the `images` folder of this repository into the `images` folder in your copy of the [LittleLink project](https://github.com/sethcottle/littlelink). Your folder should look a little something like this after:
![Extended Brands Icons](https://cdn.cottle.cloud/littlelink/icons-extended-folder.png)
#### Edit `index.html` to include the Extended CSS
When access iconography, you'll reference the folder `images/icons-extended/...` to refence the icons included with LittleLink Extended.
#### ✏️ Edit `index.html` to include the Extended CSS
Open `index.html` in your copy of the [LittleLink project](https://github.com/sethcottle/littlelink), the first section of the HTML has a `<head>` section. Find the CSS segment `<link rel="stylesheet" href="css/brands.css">` and underneath it, add `<link rel="stylesheet" href="css/brands-extended.css">`. It should look something like this:

139
css/brands-extended.css
View file

@ -88,6 +88,7 @@ button:hover,
.button.button-500px {
color: #000000;
background-color: #ffffff;
border: 1px solid #000000;
}
.button.button-500px:hover,
.button.button-500px:focus {
@ -98,6 +99,7 @@ button:hover,
.button.button-alphauniverse {
color: #ffffff;
background-color: #000000;
border: 1px solid #ffffff;
}
.button.button-alphauniverse:hover,
.button.button-alphauniverse:focus {
@ -108,26 +110,18 @@ button:hover,
.button.button-anilist {
color: #ffffff;
background-color: #152232;
border: 1px solid #ffffff;
}
.button.button-anilist:hover,
.button.button-anilist:focus {
filter: brightness(90%);
}
/* Behance */
.button.button-behance {
color: #1769ff;
background-color: #ffffff;
}
.button.button-behance:hover,
.button.button-behance:focus {
filter: brightness(90%);
}
/* Codepen */
.button.button-codepen {
color: #000000;
background-color: #ffffff;
border: 1px solid #000000;
}
.button.button-codepen:hover,
.button.button-codepen:focus {
@ -138,6 +132,7 @@ button:hover,
.button.button-deezer {
color: #ffffff;
background-color: #181818;
border: 1px solid #ffffff;
}
.button.button-deezer:hover,
.button.button-deezer:focus {
@ -148,6 +143,7 @@ button:hover,
.button.button-deezer-alt {
color: #ffffff;
background-color: #181818;
border: 1px solid #ffffff;
}
.button.button-deezer-alt:hover,
.button.button-deezer-alt:focus {
@ -158,6 +154,7 @@ button:hover,
.button.button-devpost {
color: #ffffff;
background-color: #003E54;
border: 1px solid #ffffff;
}
.button.button-devpost:hover,
.button.button-devpost:focus {
@ -174,6 +171,28 @@ button:hover,
filter: brightness(90%);
}
/* Filmweb */
.button.button-filmweb {
color: #ffffff;
background-color: #000000;
border: 1px solid #ffffff;
}
.button.button-filmweb:hover,
.button.button-filmweb:focus {
filter: brightness(90%);
}
/* Gog */
.button.button-gog {
color: #ffffff;
background-color: #303030;
border: 1px solid #ffffff;
}
.button.button-gog:hover,
.button.button-gog:focus {
filter: brightness(90%);
}
/* Hackerearth */
.button.button-hackerearth {
color: #ffffff;
@ -188,6 +207,7 @@ button:hover,
.button.button-hackerrank {
color: #000000;
background-color: #ffffff;
border: 1px solid #000000;
}
.button.button-hackerrank:hover,
.button.button-hackerrank:focus {
@ -214,11 +234,22 @@ button:hover,
filter: brightness(90%);
}
/* ListenBrainz */
.button.button-listenbrainz {
color: #000000;
background-color: #ffffff;
border: 1px solid #000000;
}
.button.button-listenbrainz:hover,
.button.button-listenbrainz:focus {
filter: brightness(90%);
}
/* Matrix */
.button.button-matrix {
color: #ffffff;
border: 1px solid #ffffff;
background-color: #000000;
border: 1px solid #ffffff;
}
.button.button-matrix:hover,
.button.button-matrix:focus {
@ -233,10 +264,22 @@ button:hover,
.button.button-microblog:focus {
filter: brightness(90%) }
/* Mixcloud */
.button.button-mixcloud {
color: #ffffff;
background-color: #5000FF;
}
.button.button-mixcloud:hover,
.button.button-mixcloud:focus {
filter: brightness(90%);
}
/* MyAnimeList */
.button.button-myanimelist {
color: #133a95;
background-color: #ffffff }
color: #000000;
background-color: #ffffff;
border: 1px solid #000000;
}
.button.button-myanimelist:hover,
.button.button-myanimelist:focus {
filter: brightness(90%) }
@ -263,7 +306,7 @@ button:hover,
/* osu! */
.button.button-osu {
color: #ffffff;
color: #000000;
background-color: #ff8ee6;
}
.button.button-osu:hover,
@ -271,10 +314,30 @@ button:hover,
filter: brightness(90%);
}
/* Pixelfed */
.button.button-pixelfed {
color: #000000;
background-color: #ffffff;
border: 1px solid #000000;
}
.button.button-pixelfed:hover,
.button.button-pixelfed:focus {
filter: brightness(90%) }
/* PlayStation */
.button.button-playstation {
color: #ffffff;
background-color: #0070D1;
}
.button.button-playstation:hover,
.button.button-playstation:focus {
filter: brightness(90%) }
/* Qobuz */
.button.button-qobuz {
color: #ffffff;
background-color: #000000;
border: 1px solid #ffffff;
}
.button.button-qobuz:hover,
.button.button-qobuz:focus {
@ -292,6 +355,14 @@ button:hover,
filter: brightness(90%);
}
/* Roll20 */
.button.button-roll20 {
color: #FFFFFF;
background-color: #ec008c }
.button.button-roll20:hover,
.button.button-roll20:focus {
filter: brightness(90%) }
/* SpaceHey */
.button.button-spacehey {
color: #FFFFFF;
@ -306,6 +377,7 @@ button:hover,
.button.button-tidal {
color: #ffffff;
background-color: #000000;
border: 1px solid #ffffff;
}
.button.button-tidal:hover,
.button.button-tidal:focus {
@ -315,24 +387,26 @@ button:hover,
/* Vero */
.button.button-vero {
color: #ffffff;
background-color: #000000 }
background-color: #000000;
border: 1px solid #ffffff;
}
.button.button-vero:hover,
.button.button-vero:focus {
filter: brightness(90%) }
/* Pixelfed */
.button.button-pixelfed {
/* WIP */
.button.button-wip {
color: #000000;
background-color: #ffffff }
.button.button-pixelfed:hover,
.button.button-pixelfed:focus {
background-color: #F9DB00}
.button.button-wip:hover,
.button.button-wip:focus {
filter: brightness(90%) }
/* write.as */
.button.button-writeas {
color: #000000;
border: 1px solid #000000;
background-color: #ffffff;
border: 1px solid #000000;
}
.button.button-writeas:hover,
.button.button-writeas:focus {
@ -342,10 +416,31 @@ button:hover,
/* writefreely */
.button.button-writefreely {
color: #000000;
border: 1px solid #000000;
background-color: #f4f4f4;
border: 1px solid #000000;
}
.button.button-writefreely:hover,
.button.button-writefreely:focus {
filter: brightness(90%);
}
/* writefreely */
.button.button-writefreely {
color: #000000;
background-color: #f4f4f4;
border: 1px solid #000000;
}
.button.button-writefreely:hover,
.button.button-writefreely:focus {
filter: brightness(90%);
}
/* Xbox */
.button.button-xbox {
color: #ffffff;
background-color: #107C10;
}
.button.button-xbox:hover,
.button.button-xbox:focus {
filter: brightness(90%);
}

BIN
images/avatar.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.7 KiB

5
images/avatar.svg
View file

@ -1,5 +0,0 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="32" fill="#0085FF"/>
<path d="M31.4178 40.2794C31.7149 40.2794 31.9434 40.4148 32.1034 40.6857C32.2862 40.9566 32.3776 41.3291 32.3776 41.8032C32.3776 42.7062 32.1605 43.406 31.7263 43.9026C30.7437 45.0991 29.6697 46.0811 28.5043 46.8487C27.3617 47.6162 26.0592 48 24.5967 48C22.5857 48 21.0889 47.097 20.1063 45.291C19.1466 43.485 18.6667 41.1485 18.6667 38.2815C18.6667 35.5273 19.0209 32.3894 19.7293 28.8677C20.4605 25.346 21.5231 22.321 22.9171 19.7926C24.3339 17.2642 26.0135 16 27.9558 16C29.0527 16 29.9096 16.5079 30.5266 17.5238C31.1665 18.5171 31.4864 19.9506 31.4864 21.8243C31.4864 24.5108 30.7323 27.6261 29.2241 31.1704C27.7159 34.7146 25.6707 38.225 23.0885 41.7016C23.2484 42.6272 23.5112 43.2931 23.8768 43.6995C24.2425 44.0832 24.7223 44.2751 25.3165 44.2751C26.2534 44.2751 27.0761 44.0155 27.7844 43.4963C28.4928 42.9545 29.3955 42.0402 30.4924 40.7534C30.7666 40.4374 31.0751 40.2794 31.4178 40.2794ZM27.2017 19.3524C26.6762 19.3524 26.082 20.2892 25.4193 22.163C24.7566 24.0367 24.1739 26.3619 23.6712 29.1386C23.1684 31.9153 22.8942 34.5792 22.8485 37.1302C24.471 34.4889 25.7621 31.8476 26.7219 29.2063C27.6816 26.5425 28.1615 24.1157 28.1615 21.9259C28.1615 20.2102 27.8416 19.3524 27.2017 19.3524Z" fill="white"/>
<path d="M39.5132 43.0561C39.7645 42.8303 40.0159 42.7175 40.2673 42.7175C40.5415 42.7175 40.7586 42.8755 40.9185 43.1915C41.1014 43.485 41.1928 43.8462 41.1928 44.2751C41.1928 45.2233 40.85 45.9795 40.1644 46.5439C38.9762 47.5146 37.6279 48 36.1197 48C33.9488 48 32.3606 47.1083 31.3552 45.3249C30.3497 43.5189 29.847 41.1711 29.847 38.2815C29.847 35.5273 30.2012 32.3894 30.9096 28.8677C31.6408 25.346 32.7034 22.321 34.0974 19.7926C35.5142 17.2642 37.1937 16 39.1361 16C40.233 16 41.0899 16.5079 41.7069 17.5238C42.3468 18.5171 42.6667 19.9506 42.6667 21.8243C42.6667 24.5108 41.9126 27.6261 40.4044 31.1704C38.919 34.7146 36.8853 38.2138 34.303 41.6677C34.463 42.5933 34.7486 43.2593 35.16 43.6656C35.5713 44.072 36.1312 44.2751 36.8396 44.2751C37.228 44.2751 37.6622 44.1623 38.1421 43.9365C38.6448 43.7108 39.1019 43.4173 39.5132 43.0561ZM38.382 19.3524C37.8564 19.3524 37.2623 20.2892 36.5996 22.163C35.9369 24.0367 35.3542 26.3619 34.8515 29.1386C34.3487 31.9153 34.0745 34.5792 34.0288 37.1302C35.6513 34.4889 36.9424 31.8476 37.9021 29.2063C38.8619 26.5425 39.3418 24.1157 39.3418 21.9259C39.3418 20.2102 39.0219 19.3524 38.382 19.3524Z" fill="white"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 2.5 KiB

BIN
images/avatar@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
images/icons-extended/alphauniverse.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.2 KiB

14
images/icons-extended/filmweb.svg Normal file
View file

@ -0,0 +1,14 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1664_3499)">
<path d="M12.0003 0C18.6273 0 24 5.35348 24 11.9572C24 18.5608 18.6273 23.9143 12.0003 23.9143C5.37275 23.9143 0 18.5608 0 11.9572C0 5.35348 5.37275 0 12.0003 0ZM8.65897 15.3291L8.49755 15.3324C7.92616 15.3543 7.38389 15.5903 6.97833 15.9934L6.87736 16.101C6.48742 16.5361 6.29212 17.0575 6.29212 17.6687L6.29478 17.8182C6.32002 18.4094 6.54322 18.9142 6.95707 19.344L7.06468 19.447C7.50245 19.8416 8.02458 20.0375 8.63838 20.0375H8.66694L8.82504 20.0329C9.38687 20.0047 9.91836 19.7695 10.317 19.3726L10.4193 19.2636C10.8119 18.8219 11.0079 18.3031 11.0159 17.6953L11.0132 17.5458C10.9866 16.9552 10.7588 16.4497 10.3403 16.0219L10.2327 15.919C9.79623 15.5237 9.27476 15.3291 8.65964 15.3291H8.65897ZM15.4779 4.4082L14.4396 6.45553L14.6522 6.56713C15.0124 6.76817 15.3512 7.00544 15.6632 7.27526L15.7927 7.39218C15.8784 7.47189 15.9635 7.55426 16.0485 7.63996L16.1707 7.77281L16.2903 7.91231L16.4437 8.09034C16.5939 8.2697 16.7354 8.45504 16.8636 8.65233L16.9645 8.81309L17.0642 8.97517L17.1758 9.18442C17.2834 9.39567 17.3791 9.61156 17.4574 9.83742L17.5385 10.0726C17.7152 10.6273 17.8002 11.2258 17.8002 11.8542L17.7962 12.1026C17.7784 12.7345 17.6549 13.3589 17.4309 13.95L17.3339 14.1838C17.2648 14.3386 17.1891 14.4907 17.108 14.6422L17.0296 14.7757C16.9765 14.8634 16.922 14.9484 16.8636 15.0355L16.7281 15.2427C16.5886 15.4486 16.4384 15.6506 16.271 15.8472L16.1627 15.9701L16.0485 16.099V16.1189L15.9482 16.2053L15.8485 16.2923L15.6599 16.4517C15.2848 16.7579 14.8753 17.0192 14.4396 17.2303L15.5051 19.2716L15.7529 19.1461C16.3397 18.8385 16.8859 18.4592 17.3791 18.0168L17.4163 17.9676L17.4574 17.9158L17.5684 17.8208L17.6813 17.7238L17.7338 17.6747L17.9364 17.4634C18.7289 16.6118 19.3141 15.6718 19.6855 14.6422L19.7592 14.3984C19.8057 14.2337 19.8469 14.0663 19.8847 13.9002L19.9445 13.6205C20.0555 13.0559 20.1086 12.466 20.1086 11.8535L20.1066 11.5626C20.0942 11.0061 20.0277 10.4521 19.908 9.90849L19.8349 9.58964C19.7837 9.38292 19.7264 9.17779 19.6629 8.97451L19.5499 8.69551C19.229 7.94882 18.797 7.25499 18.2685 6.63755L18.0932 6.44158C17.976 6.31266 17.8562 6.1862 17.7338 6.06228L17.7032 6.03438L17.6806 6.01113L17.5571 5.84041L17.5186 5.82646L17.4814 5.81317L17.2768 5.62451C16.8752 5.264 16.4371 4.94651 15.9694 4.67724L15.9495 4.65067L15.9269 4.62875L15.7775 4.55036C15.6792 4.49955 15.5792 4.45258 15.4779 4.4082ZM5.0705 9.32791L4.9197 9.33057C4.32384 9.35647 3.813 9.57834 3.3779 9.99552L3.27626 10.1038C2.88632 10.5422 2.69036 11.067 2.69036 11.6808L2.69235 11.8309C2.71693 12.4255 2.94013 12.9356 3.35664 13.3668L3.46492 13.4704C3.90534 13.8663 4.43145 14.0643 5.0499 14.0643H5.0778L5.23723 14.0596C5.80276 14.0311 6.33764 13.7939 6.73852 13.394L6.84215 13.2857C7.23607 12.8426 7.4327 12.3205 7.44001 11.7094L7.43801 11.5586C7.41211 10.9647 7.1816 10.4559 6.7631 10.0247L6.65482 9.92112C6.21573 9.52454 5.68961 9.32857 5.07116 9.32857L5.0705 9.32791ZM14.2177 10.6711H10.2287V13.1396H14.2177V10.6711ZM8.59786 3.42373L8.44773 3.42639C7.87134 3.4449 7.32344 3.68135 6.91456 4.08802L6.81358 4.19497C6.42564 4.63074 6.22835 5.15154 6.22835 5.76468L6.23167 5.9261C6.2609 6.512 6.48343 7.01354 6.8933 7.44067L7.00091 7.54297C7.43868 7.93689 7.96147 8.13219 8.57793 8.13219H8.61114L8.76924 8.12754C9.33016 8.09876 9.86061 7.86358 10.2586 7.46724L10.3682 7.34966C10.7535 6.91123 10.9461 6.39309 10.9547 5.79125L10.9521 5.64178C10.9242 5.0499 10.6963 4.54372 10.2812 4.11592L10.1735 4.01295C9.73511 3.6177 9.21299 3.4244 8.59786 3.4244V3.42373Z" fill="url(#paint0_linear_1664_3499)"/>
</g>
<defs>
<linearGradient id="paint0_linear_1664_3499" x1="319.368" y1="334.011" x2="2107.31" y2="2037.81" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFCD05"/>
<stop offset="1" stop-color="#D89124"/>
</linearGradient>
<clipPath id="clip0_1664_3499">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

10
images/icons-extended/gog.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 6.6 KiB

11
images/icons-extended/listenbrainz.svg Normal file
View file

@ -0,0 +1,11 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1664_3482)">
<path d="M11.5715 0L1.28577 6V18L11.5715 24V0Z" fill="#353070"/>
<path d="M12.4285 0L22.7142 6V18L12.4285 24V0Z" fill="#EB743B"/>
</g>
<defs>
<clipPath id="clip0_1664_3482">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 379 B

10
images/icons-extended/mixcloud.svg Normal file
View file

@ -0,0 +1,10 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1664_3489)">
<path d="M24 22.5201H20.2662H20.2556V5.40591L20.9431 2.96254H19.7373L15.4429 22.5306H8.56765L4.24152 2.96254H3.06743L3.74438 5.41648V22.5201H0V2H7.40414L11.5293 21.5681H12.4813L16.5959 2H24V22.5201Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1664_3489">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 464 B

10
images/icons-extended/playstation.svg Normal file
View file

@ -0,0 +1,10 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1664_3536)">
<path d="M0.48575 16.2521C-0.413725 16.8518 -0.1139 17.9911 1.80498 18.5308C3.78383 19.1904 5.94257 19.3703 8.04134 19.0105C8.16127 19.0105 8.2812 18.9505 8.34117 18.9505V16.9117L6.30236 17.5713C5.52281 17.8112 4.74327 17.8712 3.96372 17.6913C3.36407 17.5114 3.484 17.1516 4.20358 16.8518L8.34117 15.4126V13.1939L2.58453 15.1727C1.86494 15.4126 1.14536 15.7724 0.48575 16.2521ZM14.3976 7.25735V13.074C16.8562 14.2733 18.7751 13.074 18.7751 9.95578C18.7751 6.77763 17.6357 5.33847 14.3377 4.19914C12.5987 3.59949 10.7997 3.0598 9.00078 2.70001V20.0299L13.1983 21.2892V6.71767C13.1983 6.05805 13.1983 5.57833 13.6781 5.75823C14.3377 5.93812 14.3976 6.59774 14.3976 7.25735ZM22.1931 14.8729C20.4541 14.2733 18.5952 14.0334 16.7962 14.2133C15.8368 14.2733 14.9373 14.5131 14.0978 14.8129L13.9179 14.8729V17.2115L17.8156 15.7724C18.5952 15.5325 19.3747 15.4726 20.1543 15.6525C20.7539 15.8323 20.634 16.1921 19.9144 16.492L13.9179 18.7107V20.9893L22.1931 17.9311C22.7927 17.6913 23.3324 17.3914 23.8121 16.9117C24.2319 16.3121 24.052 15.4726 22.1931 14.8729Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1664_3536">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

20
images/icons-extended/roll20.svg Normal file
View file

@ -0,0 +1,20 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M1.3761 5.815C1.31306 5.40071 1.55472 5.31215 1.8084 5.25962C4.69188 4.6547 7.57536 4.05279 10.4603 3.45387C10.627 3.41935 10.8266 3.3488 10.9317 3.54544C11.0593 3.7856 10.8701 3.97473 10.7636 4.16236C8.80621 7.61924 6.84586 11.0716 4.88551 14.527C4.7249 14.8092 4.5688 15.0944 4.40368 15.3736C4.30461 15.5402 4.23256 15.7788 3.9894 15.7488C3.74323 15.7188 3.73572 15.4681 3.68919 15.282C3.43552 14.2643 3.19085 13.2436 2.94168 12.2244C2.45384 10.2355 1.96751 8.24517 1.48117 6.2563C1.43914 6.08668 1.39862 5.91557 1.3761 5.815Z" fill="white"/>
<path d="M13.4099 3.43587C15.8896 3.95222 18.3332 4.45657 20.7769 4.96992C22.7012 5.3737 22.6982 5.3782 22.2299 7.28752C21.595 9.8828 20.9676 12.4811 20.3236 15.0734C20.2636 15.318 20.3146 15.6978 19.9619 15.7368C19.6662 15.7698 19.5986 15.4351 19.4815 15.228C17.3936 11.5595 15.3102 7.88943 13.2312 4.2149C13.1142 4.00776 12.898 3.80512 13.0391 3.53193C13.1217 3.37282 13.2988 3.42836 13.4099 3.43587Z" fill="white"/>
<path d="M11.9899 17.5936C14.0118 17.5936 16.0352 17.5906 18.0571 17.5981C18.2942 17.5996 18.6095 17.493 18.7401 17.7587C18.8872 18.0544 18.5674 18.1895 18.3978 18.3456C16.448 20.1364 14.4831 21.9091 12.5453 23.7118C12.122 24.1066 11.8323 24.0901 11.4165 23.7043C9.47719 21.9031 7.51084 20.1304 5.561 18.3396C5.39288 18.185 5.07916 18.0484 5.23227 17.7467C5.35085 17.511 5.63455 17.5981 5.84919 17.5966C7.8951 17.5921 9.94251 17.5936 11.9899 17.5936Z" fill="white"/>
<path d="M11.6311 1.20833C11.6311 2.45269 11.6311 2.45419 10.4483 2.71387C8.57054 3.12665 6.69275 3.54844 4.81046 3.94171C4.52826 4.00025 4.09596 4.28995 3.95187 3.88317C3.83178 3.54394 4.31511 3.47789 4.56128 3.3518C6.58768 2.31909 8.62007 1.3014 10.6525 0.282195C11.5741 -0.180123 11.6266 -0.144098 11.6326 0.908125C11.6311 1.00869 11.6311 1.10926 11.6311 1.20833Z" fill="white"/>
<path d="M19.447 4.01376C17.3261 3.54544 15.0595 3.04409 12.7914 2.54575C12.5078 2.48421 12.3531 2.3266 12.3531 2.0294C12.3531 2.00388 12.3471 1.97986 12.3501 1.95434C12.4117 1.32091 12.0424 0.468323 12.5363 0.105073C12.9731 -0.214647 13.5975 0.436801 14.1184 0.691977C15.9811 1.6016 17.8274 2.54575 19.6767 3.48089C19.8463 3.56645 20.0955 3.6355 20.0369 3.88917C19.9859 4.11433 19.7697 4.05729 19.447 4.01376Z" fill="white"/>
<path d="M22.4476 17.2183C22.4341 17.9764 22.3065 18.0364 21.6701 17.6837C20.5938 17.0847 20.5938 17.0847 20.855 15.8884C21.2813 13.9371 21.7016 11.9842 22.1384 10.0344C22.1924 9.79573 22.1384 9.37094 22.5332 9.44599C22.8169 9.50003 22.7103 9.86628 22.7103 10.1064C22.7133 11.2788 22.7118 12.4526 22.7118 13.6264" fill="#FFFDFD"/>
<path d="M3.27641 16.6645C3.27941 17.0652 2.12362 17.9583 1.78288 17.8863C1.60426 17.8488 1.53971 17.7122 1.53371 17.5576C1.43614 14.9608 1.34158 12.3655 1.25002 9.76872C1.24551 9.61861 1.27553 9.4505 1.46016 9.42348C1.65079 9.39646 1.71984 9.55557 1.75136 9.70117C2.26771 12.0428 2.77807 14.3859 3.27641 16.6645Z" fill="#FFFDFD"/>
<path d="M8.63057 22.2573C8.61556 22.4254 8.51199 22.5035 8.3784 22.4689C8.21329 22.4254 8.05268 22.3489 7.90407 22.2618C6.18089 21.2501 4.4592 20.2369 2.74202 19.2162C2.06506 18.8139 2.07106 18.6878 2.73902 18.2661C3.7192 17.6491 3.71769 17.6491 4.56728 18.4237C5.78612 19.5344 7.00646 20.6407 8.22379 21.7529C8.3844 21.9016 8.58854 22.0231 8.63057 22.2573Z" fill="#FFFDFD"/>
<path d="M21.7211 18.6969C21.7001 18.922 21.574 19.0076 21.4449 19.0826C19.5972 20.1754 17.7479 21.2681 15.8971 22.3564C15.7275 22.4554 15.5219 22.5935 15.3718 22.3639C15.2472 22.1747 15.4348 22.0397 15.5579 21.9271C16.9959 20.6137 18.4399 19.3063 19.8778 17.9914C20.145 17.7467 20.4062 17.7437 20.6854 17.9433C21.0396 18.2 21.5065 18.3111 21.7211 18.6969Z" fill="#FFFDFD"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0654 16.8546H10.0653H10.0643C8.49558 16.8558 6.92658 16.857 5.35834 16.8506C4.57481 16.8476 4.49225 16.708 4.87201 16.0355C7.09053 12.0983 9.31206 8.16411 11.5396 4.23141C11.9134 3.57246 12.0484 3.57246 12.4207 4.22991C14.6482 8.16111 16.8713 12.0968 19.0913 16.0325C19.4725 16.7095 19.393 16.8476 18.6125 16.8506C17.0257 16.857 15.439 16.8558 13.8522 16.8546C13.2174 16.8541 12.5827 16.8536 11.9479 16.8536C11.3205 16.8536 10.693 16.8541 10.0654 16.8546ZM15.4332 12.4436C15.4317 13.8365 14.8118 14.6831 13.7896 14.6876C12.7524 14.6936 12.134 13.868 12.128 12.4676C12.122 11.0356 12.7629 10.156 13.8016 10.171C14.7983 10.186 15.4332 11.0686 15.4332 12.4436ZM10.3644 13.7398C10.1908 13.7394 10.002 13.7389 9.79089 13.7389C10.1197 13.3497 10.4571 13.154 10.7616 12.9773C10.9339 12.8774 11.0957 12.7835 11.2394 12.6642C11.7557 12.2379 11.9644 11.711 11.7377 11.0716C11.4946 10.3871 10.9422 10.141 10.2607 10.165C9.56874 10.189 9.0764 10.5267 8.86325 11.2007L8.86162 11.2058C8.79722 11.4064 8.71122 11.6743 9.01336 11.7666C9.24451 11.8371 9.5132 11.8837 9.69032 11.6285C9.72047 11.5839 9.74318 11.5336 9.76582 11.4835C9.79503 11.4188 9.82413 11.3543 9.86894 11.3028C10.1196 11.0161 10.4318 10.941 10.7155 11.2142C10.9977 11.4874 10.8611 11.7786 10.5939 11.9767C10.4022 12.1203 10.1968 12.2441 9.99126 12.368C9.87669 12.437 9.76209 12.5061 9.64979 12.5786C9.09591 12.9389 8.74767 13.4267 8.70414 14.1052C8.68313 14.4324 8.7837 14.6351 9.15295 14.6321C9.75591 14.6283 10.3578 14.6298 10.9596 14.6312C11.0799 14.6315 11.2002 14.6318 11.3204 14.6321C11.6011 14.6321 11.8038 14.5615 11.8143 14.2208C11.8263 13.8605 11.6522 13.7329 11.3174 13.7374C11.0222 13.7415 10.7263 13.7408 10.3644 13.7398Z" fill="white"/>
<path d="M14.5251 12.4345C14.393 12.9584 14.5461 13.7525 13.7536 13.7419C13.0316 13.7314 13.0676 12.9869 13.0646 12.4631C13.0616 11.9122 13.0106 11.1317 13.7596 11.1121C14.5416 11.0926 14.396 11.9017 14.5251 12.4345Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0">
<rect x="1.25" width="21.4813" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.8 KiB

3
images/icons-extended/sony-alpha.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.2695 18.6972C20.3578 18.9052 19.7078 17.4753 19.1359 15.8115C18.7219 14.6073 18.2521 13.0906 18.0406 12.3597C19.3788 10.305 20.9298 7.83789 23.2391 4.19071H18.9181C18.1498 5.39535 17.391 6.61506 16.64 7.80821C16.4255 7.20773 16.1302 6.56107 15.7868 6.01147C14.7924 4.47079 13.2284 3.41012 10.8976 3.55282C7.81646 3.74157 5.48898 5.21811 3.61028 7.09674C1.88767 8.81934 0.207375 11.3351 0.016334 14.1847C-0.23947 17.9993 2.5473 20.1843 5.70657 20.4238C8.20322 20.6134 10.0728 19.9497 11.6464 19.1261C12.7146 18.5672 14.9874 16.6734 15.6676 15.8291C16.1724 18.1698 17.4751 20.413 20.4097 20.413C22.2285 20.413 23.3806 19.4146 24 18.643C23.7776 18.6601 23.5359 18.6781 23.2695 18.6972ZM9.25056 17.2794C8.57658 17.7677 7.71222 18.2864 6.80469 18.4274C4.54813 18.7777 3.55296 17.0258 3.71002 14.6837C3.83258 12.8552 4.55799 11.1611 5.40713 9.69227C6.27738 8.18683 7.29354 6.85279 8.45198 6.04865C8.86562 5.76131 9.48689 5.41902 10.3487 5.34981C12.4226 5.18327 13.1858 7.42703 13.7134 9.30723C13.9598 10.1897 14.1258 11.0873 14.2058 11.5593C13.6144 12.4274 11.7787 15.4476 9.25056 17.2794Z" fill="#E94E09"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

3
images/icons-extended/wip.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.6 24C22.92 24 24 22.92 24 21.6V2.4C24 1.08 22.92 0 21.6 0H2.4C1.08 0 0 1.08 0 2.4V21.6C0 22.92 1.08 24 2.4 24H21.6ZM6 18L12 6H18L12 18H6Z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 310 B

10
images/icons-extended/xbox.svg Normal file
View file

@ -0,0 +1,10 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1664_3530)">
<path d="M10.8033 23.964C8.95451 23.7869 7.08281 23.123 5.47499 22.0739C4.1277 21.1952 3.82365 20.8334 3.82365 20.1124C3.82365 18.6638 5.41641 16.1263 8.14168 13.2342C9.68897 11.5912 11.8446 9.66655 12.0776 9.71843C12.5311 9.81969 16.1546 13.3542 17.5113 15.0183C19.6564 17.6488 20.6422 19.8033 20.1412 20.7637C19.7605 21.4937 17.3973 22.9208 15.6614 23.4689C14.2304 23.9208 12.3512 24.1121 10.8033 23.964ZM2.00383 18.6064C0.884161 16.8886 0.318466 15.1977 0.0456605 12.7519C-0.0447167 11.9444 -0.0129173 11.4827 0.250125 9.82471C0.577324 7.76053 1.75362 5.37 3.16786 3.89997C3.76982 3.27514 3.82337 3.25841 4.55755 3.50667C5.44738 3.80792 6.39857 4.46511 7.87417 5.79957L8.7361 6.57893L8.26469 7.15635C6.08113 9.83698 3.77651 13.639 2.909 15.9904C2.43759 17.268 2.24791 18.5511 2.45154 19.0853C2.58822 19.4463 2.46269 19.3118 2.00244 18.6072L2.00383 18.6064ZM21.6561 18.8984C21.7669 18.3584 21.6269 17.367 21.2991 16.3667C20.5892 14.2008 18.2157 10.1714 16.0363 7.43166L15.3501 6.56917L16.0926 5.88772C17.0617 4.99789 17.7345 4.46511 18.4609 4.01239C19.0335 3.65534 19.8522 3.3393 20.2043 3.3393C20.421 3.3393 21.185 4.13429 21.8015 4.99901C22.7566 6.33793 23.4589 7.96416 23.8149 9.65455C24.045 10.748 24.0643 13.0855 23.852 14.1762C23.6762 15.071 23.308 16.2309 22.951 17.0178C22.6804 17.6072 22.0138 18.7522 21.7209 19.1249C21.5702 19.3165 21.5702 19.3163 21.6539 18.9029L21.6561 18.8984ZM11.0014 2.93037C9.99553 2.41991 8.44405 1.87179 7.58714 1.72395C7.287 1.67234 6.77458 1.64305 6.44906 1.65979C5.74166 1.69549 5.77318 1.65867 6.90736 1.12283C7.85018 0.677356 8.6368 0.415429 9.70515 0.19116C10.906 -0.0612826 13.164 -0.0640721 14.3459 0.185023C15.6221 0.454202 17.1253 1.01348 17.9722 1.5351L18.2243 1.68964L17.6469 1.66063C16.4988 1.60261 14.8257 2.06649 13.0293 2.94013C12.4876 3.20401 12.0167 3.41434 11.9822 3.40876C11.9478 3.40206 11.5063 3.187 11.0003 2.93037H11.0014Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1664_3530">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
images/littlelink.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

11
images/littlelink.svg Normal file
View file

@ -0,0 +1,11 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="16" fill="url(#paint0_linear_612_446)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.87868 21.3535C8.70711 22.525 8.70711 24.4245 9.87868 25.5961L10.0377 25.7551C11.2092 26.9267 13.1087 26.9267 14.2803 25.7551L24.331 15.7044L28.4498 19.8232C29.6214 20.9947 31.5209 20.9947 32.6924 19.8232L32.8514 19.6642C34.023 18.4926 34.023 16.5931 32.8514 15.4215L26.5302 9.10026C25.98 8.55012 25.2694 8.25831 24.549 8.22483C23.6891 8.14312 22.8006 8.43151 22.1422 9.08998L9.87868 21.3535Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.699 26.4081C39.8705 25.2366 39.8705 23.3371 38.699 22.1655L38.54 22.0065C37.3684 20.8349 35.4689 20.8349 34.2973 22.0065L24.2467 32.0571L20.1281 27.9385C18.9565 26.7669 17.057 26.7669 15.8854 27.9385L15.7264 28.0975C14.5549 29.269 14.5549 31.1685 15.7264 32.3401L22.0477 38.6614C22.598 39.2117 23.309 39.5035 24.0297 39.5369C24.8892 39.6183 25.7772 39.3298 26.4355 38.6716L38.699 26.4081Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_612_446" x1="-24.24" y1="24.48" x2="24.72" y2="72.96" gradientUnits="userSpaceOnUse">
<stop stop-color="#4899F7"/>
<stop offset="1" stop-color="#2457F5"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
images/littlelink@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.6 KiB

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