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

littlelink-extended: Add OpenStreetMap link

Browse source 
Signed-off-by: Sergio Fdez <sergio@bbjprojek.org>
This commit is contained in:
Sergio Fdez 2023-05-18 11:50:59 +02:00
parent fd2f597182
commit fc130d82b7
No known key found for this signature in database
GPG key ID: 40823FEB00ADEC7F
3 changed files with 25 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

13
css/brands-extended.css
View file

@ -190,6 +190,17 @@ button:hover,
.button.button-myanimelist:focus {
filter: brightness(90%) }
/* OpenStreetMap */
.button.button-osm {
color: #ffffff;
background-color: #434f37;
}
.button.button-osm:hover,
.button.button-osm:focus {
filter: brightness(90%);
}
/* osu! */
.button.button-osu {
color: #ffffff;
@ -216,4 +227,4 @@ button:hover,
background-color: #000000 }
.button.button-vero:hover,
.button.button-vero:focus {
filter: brightness(90%) }
filter: brightness(90%) }

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

@ -0,0 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.65592 25.9696C4.30392 25.8806 4.12192 25.7356 3.18492 24.8016C2.06892 23.6886 1.99792 23.5796 2.00192 22.9996C2.00192 22.3546 1.80592 22.5856 5.36992 19.0136C8.96992 15.4056 8.78492 15.5626 9.43392 15.5646C9.73592 15.5646 9.81192 15.5806 10.0539 15.7046L10.3309 15.8446L12.0749 14.1006L11.8569 13.7576C11.4319 13.0956 11.0319 12.1286 10.8509 11.3286C10.601 10.2128 10.6041 9.05527 10.86 7.94086C11.1159 6.82646 11.6182 5.78352 12.3299 4.88861C14.8199 1.76861 19.2889 1.07661 22.5899 3.30061C24.4019 4.51861 25.5799 6.39961 25.9179 8.61461C25.9879 9.08161 25.9879 10.1936 25.9179 10.6886C25.6951 12.361 24.9189 13.9107 23.7129 15.0906C23.1545 15.6703 22.4964 16.1449 21.7699 16.4916C20.8109 16.9746 19.9949 17.2016 18.8889 17.2946C17.3159 17.4256 15.5689 16.9896 14.2329 16.1316L13.8899 15.9136L12.1459 17.6576L12.2859 17.9376C12.4109 18.1786 12.4259 18.2536 12.4259 18.5546C12.4289 19.2056 12.5819 19.0216 8.99992 22.6036C6.23892 25.3596 5.81392 25.7676 5.60192 25.8646C5.33092 25.9896 4.91192 26.0356 4.65692 25.9706L4.65592 25.9696ZM19.4689 15.9506C20.4573 15.7665 21.3886 15.353 22.1881 14.7434C22.9876 14.1337 23.6328 13.345 24.0719 12.4406C25.4629 9.54161 24.5269 6.13461 21.8449 4.33261C21.2069 3.90261 20.3159 3.53861 19.4779 3.37061C18.8969 3.25361 17.6689 3.26661 17.0639 3.39561C16.1825 3.57914 15.348 3.94125 14.6119 4.45961C14.1679 4.77461 13.4349 5.50761 13.1249 5.94661C12.2894 7.11514 11.8725 8.53129 11.9414 9.96612C12.0104 11.401 12.5612 12.7706 13.5049 13.8536C14.5084 15.0086 15.8922 15.7663 17.4059 15.9896C17.9149 16.0676 18.9479 16.0476 19.4709 15.9526L19.4689 15.9506ZM15.7309 23.3266C14.9959 23.12 14.2638 22.903 13.5349 22.6756C13.5099 22.6476 14.7419 18.2796 14.7919 18.2266C14.8149 18.2006 19.0339 19.3786 19.2059 19.4626C19.2679 19.4886 19.2029 19.7506 18.6809 21.5646C18.4671 22.3093 18.2554 23.0547 18.0459 23.8006C18.0209 23.8876 17.9769 23.9566 17.9489 23.9566C17.9209 23.9536 16.9209 23.6696 15.7299 23.3256L15.7309 23.3266ZM18.6429 23.8506C18.6429 23.7976 19.8699 19.5176 19.8889 19.5036C19.9359 19.4696 24.2129 18.2736 24.2299 18.2926C24.2489 18.3116 23.0309 22.6296 22.9999 22.6526C22.9799 22.6716 18.8739 23.8436 18.7409 23.8706C18.6869 23.8816 18.6429 23.8696 18.6429 23.8506ZM11.5379 21.9396C12.3839 21.0876 13.1369 20.3126 13.2119 20.2116C13.3829 19.9936 13.6169 19.4796 13.6839 19.1966C13.7099 19.0786 13.7369 18.8446 13.7419 18.6746L13.7529 18.3676L13.9349 18.3166C14.0379 18.2886 14.1279 18.2726 14.1369 18.2826C14.1599 18.3076 12.9299 22.6036 12.8909 22.6426C12.8709 22.6586 12.2139 22.8556 11.4269 23.0786L10.0019 23.4836L11.5389 21.9416L11.5379 21.9396ZM19.8269 18.8796C19.8028 18.8188 19.7831 18.7563 19.7679 18.6926L19.7239 18.5366L19.8799 18.5086C21.2189 18.2816 22.6559 17.6526 23.7879 16.7956C23.9479 16.6706 24.0399 16.6246 24.0529 16.6616C24.1069 16.8266 24.3249 17.6116 24.3179 17.6206C24.2839 17.6546 19.8379 18.9026 19.8259 18.8816L19.8269 18.8796ZM4.74392 17.5796C4.69392 17.5406 3.56492 13.7136 3.47992 13.2896C3.46392 13.2056 3.62592 13.2456 5.65392 13.8256C7.77492 14.4296 7.84592 14.4546 7.87592 14.5656C7.90392 14.6636 7.88692 14.6946 7.75092 14.7886C7.66692 14.8476 6.98192 15.5126 6.22792 16.2676C5.77157 16.7303 5.30818 17.186 4.83792 17.6346C4.82192 17.6346 4.78192 17.6096 4.74492 17.5806L4.74392 17.5796ZM5.56492 13.2016C4.37692 12.8586 3.40092 12.5786 3.39792 12.5756C3.38192 12.5636 4.65892 8.14261 4.68292 8.11561C4.70492 8.09361 9.10492 9.32661 9.15192 9.36761C9.16092 9.37661 8.88292 10.3846 8.53392 11.6066C7.95792 13.6266 7.89092 13.8306 7.81092 13.8266C7.76092 13.8236 6.75192 13.5416 5.56392 13.2006L5.56492 13.2016ZM8.52392 13.7396C8.53592 13.7086 8.73592 13.0166 8.96792 12.2056L9.38792 10.7296L9.44392 11.0506C9.53692 11.6066 9.70892 12.2386 9.90792 12.7916C10.0139 13.0876 10.0949 13.3306 10.0889 13.3366C10.0809 13.3426 9.75692 13.4376 9.36992 13.5486C8.98092 13.6576 8.62892 13.7586 8.58392 13.7726C8.52592 13.7886 8.50892 13.7786 8.52492 13.7386L8.52392 13.7396ZM6.88892 8.11261C5.70192 7.77361 4.72192 7.47761 4.70892 7.45861C4.66892 7.39661 3.46292 3.13761 3.47892 3.12061C3.50492 3.09561 7.78892 4.32461 7.82992 4.36661C7.87692 4.41761 9.10992 8.74561 9.07592 8.74261L6.89392 8.11361L6.88892 8.11261ZM9.03692 6.39961L8.51792 4.59361L8.43992 4.31361L10.1329 3.83061C11.0669 3.56561 11.8569 3.33561 11.8929 3.32261C11.9269 3.30661 11.8099 3.46261 11.6329 3.65861C10.7073 4.6781 10.036 5.9021 9.67392 7.23061C9.61757 7.41449 9.57347 7.6019 9.54192 7.79161C9.54192 8.08461 9.42692 7.76661 9.03692 6.40161V6.39961Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.5 KiB

15
preview.html
View file

@ -47,7 +47,7 @@
<div class="row">
<div class="column" style="margin-top: 10%">
<!--
<!--
THIS REPO DOES NOT INCLUDE THE CORE BRANDS FROM THE LITTLELINK REPO.
@ -55,7 +55,7 @@
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.
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.
@ -74,7 +74,7 @@
<!--
## 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.
@ -87,13 +87,13 @@
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.
3.) alt="Example Logo" | This alt attribute helps provides alternate text for an image, this can assist users who use screen readers.
-->
<!-- 500px -->
@ -156,6 +156,11 @@
<img class="icon" src="images/icons-extended/osu.svg" alt="osu! Logo">osu!</a>
<br>
<!-- OSM -->
<a class="button button-osm" href="#" target="_blank" rel="noopener">
<img class="icon" src="images/icons/osm.svg" alt="OpenStreetMap Logo">OpenStreetMap</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>