diff --git a/README.md b/README.md index 15e381e..0f18ec8 100644 --- a/README.md +++ b/README.md @@ -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 `` section. Find the CSS segment `` and underneath it, add ``. It should look something like this: diff --git a/css/brands-extended.css b/css/brands-extended.css index a8a597c..5edd9ae 100644 --- a/css/brands-extended.css +++ b/css/brands-extended.css @@ -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; + background-color: #ffffff; border: 1px solid #000000; - background-color: #ffffff; } .button.button-writeas:hover, .button.button-writeas:focus { @@ -342,10 +416,31 @@ button:hover, /* writefreely */ .button.button-writefreely { color: #000000; + background-color: #f4f4f4; border: 1px solid #000000; - background-color: #f4f4f4; } .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%); +} \ No newline at end of file diff --git a/images/avatar.png b/images/avatar.png deleted file mode 100644 index 694dfc1..0000000 Binary files a/images/avatar.png and /dev/null differ diff --git a/images/avatar.svg b/images/avatar.svg deleted file mode 100644 index 2456224..0000000 --- a/images/avatar.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/images/avatar@2x.png b/images/avatar@2x.png deleted file mode 100644 index 0ca79e0..0000000 Binary files a/images/avatar@2x.png and /dev/null differ diff --git a/images/icons-extended/alphauniverse.png b/images/icons-extended/alphauniverse.png deleted file mode 100644 index 0ffc4fc..0000000 Binary files a/images/icons-extended/alphauniverse.png and /dev/null differ diff --git a/images/icons-extended/filmweb.svg b/images/icons-extended/filmweb.svg new file mode 100644 index 0000000..df00f14 --- /dev/null +++ b/images/icons-extended/filmweb.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/images/icons-extended/gog.svg b/images/icons-extended/gog.svg new file mode 100644 index 0000000..7c93359 --- /dev/null +++ b/images/icons-extended/gog.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/icons-extended/listenbrainz.svg b/images/icons-extended/listenbrainz.svg new file mode 100644 index 0000000..e4286b9 --- /dev/null +++ b/images/icons-extended/listenbrainz.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/icons-extended/mixcloud.svg b/images/icons-extended/mixcloud.svg new file mode 100644 index 0000000..f1a11fd --- /dev/null +++ b/images/icons-extended/mixcloud.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/icons-extended/playstation.svg b/images/icons-extended/playstation.svg new file mode 100644 index 0000000..c5b412d --- /dev/null +++ b/images/icons-extended/playstation.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/icons-extended/roll20.svg b/images/icons-extended/roll20.svg new file mode 100644 index 0000000..6de9079 --- /dev/null +++ b/images/icons-extended/roll20.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/images/icons-extended/sony-alpha.svg b/images/icons-extended/sony-alpha.svg new file mode 100644 index 0000000..208f5b0 --- /dev/null +++ b/images/icons-extended/sony-alpha.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icons-extended/wip.svg b/images/icons-extended/wip.svg new file mode 100644 index 0000000..612e5c3 --- /dev/null +++ b/images/icons-extended/wip.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icons-extended/xbox.svg b/images/icons-extended/xbox.svg new file mode 100644 index 0000000..0021941 --- /dev/null +++ b/images/icons-extended/xbox.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/littlelink.png b/images/littlelink.png new file mode 100644 index 0000000..e1b3314 Binary files /dev/null and b/images/littlelink.png differ diff --git a/images/littlelink.svg b/images/littlelink.svg new file mode 100644 index 0000000..d6a9f27 --- /dev/null +++ b/images/littlelink.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/littlelink@2x.png b/images/littlelink@2x.png new file mode 100644 index 0000000..e61ba11 Binary files /dev/null and b/images/littlelink@2x.png differ diff --git a/preview.html b/preview.html index 26ba301..49c89b8 100644 --- a/preview.html +++ b/preview.html @@ -35,7 +35,7 @@ - + @@ -63,7 +63,7 @@ --> - LittleLink Logo + LittleLink Logo

LittleLink Extended

@@ -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 attributes: @@ -98,143 +98,145 @@ --> - - 500px Logo500px + 500px Logo500px
- - Alpha Universe LogoUniverse + + Alpha Universe LogoUniverse
- - Anilist LogoAnilist -
- - - - Behance LogoBehance + Anilist LogoAnilist
- - Codepen LogoCodepen + Codepen LogoCodepen
- - Deezer LogoListen on Deezer + Deezer LogoListen on Deezer
- - Deezer Alt LogoListen on Deezer + Deezer Alt LogoListen on Deezer
- - Devpost LogoDevpost + Devpost LogoDevpost
- - Distiller LogoDistiller + Distiller LogoDistiller +
+ + + Filmweb LogoFilmweb +
+ + + Gog.com LogoGog
- - HackerRank LogoHackerEarth + HackerEarth LogoHackerEarth
- - HackerRank LogoHackerRank + HackerRank LogoHackerRank
- - itchio Logoitch.io + itchio Logoitch.io
- - Lemmy LogoLemmy + Lemmy LogoLemmy
- - - Qobuz LogoListen on Qobuz + + ListenBrainz LogoListenBrainz
- - Matrix LogoMatrix + Matrix LogoMatrix
- - MicroBlog LogoMicroBlog + MicroBlog LogoMicroBlog +
+ + + Mixcloud LogoMixcloud
- - MyAnimeList LogoMyAnimeList + MyAnimeList LogoMyAnimeList
- - OP.GG LogoOP.GG + OP.GG LogoOP.GG
- - ORCID ID LogoORCID ID + ORCID ID LogoORCID ID
- - osu! Logoosu! + osu! Logoosu!
- - Pixelfed LogoPixelfed + Pixelfed LogoPixelfed +
+ + + PlayStation LogoPlayStation +
+ + + Qobuz LogoListen on Qobuz
- - ResearchGate LogoResearchGate + ResearchGate LogoResearchGate +
+ + + Roll20 LogoRoll20
- - SpaceHey LogoSpaceHey + SpaceHey LogoSpaceHey
- - Tidal LogoListen on Tidal + Tidal LogoListen on Tidal
- - Vero LogoVero -
+ Vero LogoVero +
+ + + WIP LogoWIP +
- - Write.as LogoWrite.as + Write.as LogoWrite.as
- - WriteFreely LogoWriteFreely + WriteFreely LogoWriteFreely +
+ + + Xbox LogoXbox

-

Build your own by forking LittleLink.

+

Build your own by forking LittleLink.