1
0
Fork 0

add icons to links

This commit is contained in:
Rhiannon Morris 2021-05-24 20:55:13 +02:00
parent ba6f115b8e
commit ab97e4c701
7 changed files with 46 additions and 15 deletions

View File

@ -2,12 +2,11 @@ FONTS = $(shell find fonts -type f)
CSS = style.css where.css
PAGES = index.html where.html pubkey.txt
MEDIA = $(patsubst %,media/%, \
mlem.gif mlem_static.png icon.svg \
niss_uwu_bg_dim.png niss_uwu_bg.png \
info.svg star.svg sparkles.svg 18_plus.svg \
cybre.png donphan.png types.png dragncool.svg \
mlem.gif mlem_static.png niss_uwu_bg_dim.png niss_uwu_bg.png \
cybre.png donphan.png types.png \
niss-nisse.mp3 niss-nisse.ogg \
)
) \
$(wildcard media/*.svg)
BUILDDIR ?= _build
TMPDIR ?= _tmp

View File

@ -34,10 +34,29 @@
<nav id=links>
<ul>
<li><a href=https://gallery.niss.website>gallery</a>
<li><a href=https://git.rhiannon.website/rhi>code</a>
<li><a href=https://lang.niss.website>conlangs</a>
<li><a href=where.html>contact</a>
<li>
<a href=//gallery.niss.website>
<img class=icon src=media/art.svg>
art
</a>
<li>
<a href=//git.rhiannon.website/rhi>
<img class=icon src=media/code.svg>
code
</a>
<li>
<a href=//lang.niss.website>
<img class=icon src=media/speech.svg>
conlangs
</a>
<li>
<a href=where.html>
<img class=icon src=media/contact.svg>
contact
</a>
</ul>
</nav>
@ -77,7 +96,7 @@ window.addEventListener('DOMContentLoaded', () => {
</script>
<!--
- mutant standard emoji by dzuk: 👉 https://mutant.tech 👈
- mutant standard emoji by @Dzuque: 👉 https://mutant.tech 👈
(licensed cc-by-nc-sa 4.0)
- miku recorded by @derFisch
-->

1
media/art.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.1 KiB

1
media/code.svg Normal file
View File

@ -0,0 +1 @@
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.41421" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path clip-rule="evenodd" d="m0 0h32v32h-32z"/></clipPath><metadata/><path d="m0 0h32v32h-32z" fill="none"/><g clip-path="url(#a)"><path d="m0 0h32v32h-32z"/><path d="m30 2h-28v22l1 .5-1 .5v5h28v-5l-1-.5 1-.5z" fill="#4d4d4d"/><path d="m2 24h28v1h-28z" fill="#333"/><g fill="#808080"><path d="m4 26h2v1h-2z"/><path d="m4 28h2v1h-2z"/><path d="m7 26h2v1h-2z"/><path d="m7 28h2v1h-2z"/><path d="m10 26h2v1h-2z"/><path d="m10 28h2v1h-2z"/></g><path d="m25 26h3v3h-3z" fill="#219555"/><circle cx="14.5" cy="27.5" fill="#333" r="1.5"/><circle cx="18.5" cy="27.5" fill="#333" r="1.5"/><circle cx="22.5" cy="27.5" fill="#333" r="1.5"/><path d="m24 4 1 .501 1-.501h.002c1.103 0 1.998.895 1.998 1.998v2.002l-.157.23.037 8.55.12.205v3.015c0 1.105-.895 2-2 2-2.37 0-6 0-6 0l-1-.239-1 .239h-6l-1-.211-1 .211h-4l-1.664-2 .014-6.683-.35-.317v-7c0-.53.211-1.039.586-1.414.124-.125.264-.231.414-.318l1 .304 1-.572h5l1 .376 1-.376h2l1 .535 1-.535z"/><path d="m6 4h1v4h-2v-3.732c.301-.174.646-.268 1-.268z" fill="#060"/><path d="m8 7h2v7h-2z" fill="#060"/><path d="m8 13h2v3h-2z" fill="#0f0"/><path d="m10 14h2v7h-2z" fill="#060"/><path d="m10 20h2v2h-2z" fill="#0f0"/><path d="m12 4h2v5h-2z" fill="#060"/><path d="m12 8h2v3h-2z" fill="#0f0"/><path d="m18 15h2v7h-2z" fill="#060"/><path d="m18 21h2v1h-2z" fill="#0f0"/><path d="m16 4h2v2h-2z" fill="#060"/><path d="m16 5h2v3h-2z" fill="#0f0"/><path d="m22 12h2v7h-2z" fill="#060"/><path d="m22 18h2v3h-2z" fill="#0f0"/><path d="m5 7h2v3h-2z" fill="#0f0"/><path d="m24 4h2v5h-2z" fill="#060"/><path d="m24 8h2v3h-2z" fill="#0f0"/><path d="m15 11h2v7h-2z" fill="#060"/><path d="m15 17h2v3h-2z" fill="#0f0"/><path d="m27 8h1v7h-1z" fill="#060"/><path d="m27 14h1v3h-1z" fill="#0f0"/><path d="m4 13h2v7h-2z" fill="#060"/><path d="m6 19h-2v1c0 1.105.895 2 2 2z" fill="#0f0"/><path d="m20 5h2v7h-2z" fill="#060"/><path d="m20 11h2v3h-2z" fill="#0f0"/></g></svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

1
media/contact.svg Normal file
View File

@ -0,0 +1 @@
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path clip-rule="evenodd" d="m0 0h32v32h-32z"/></clipPath><clipPath id="b"><path clip-rule="evenodd" d="m28 15.995c0-.531-.211-1.039-.586-1.414s-.884-.586-1.414-.586c-4.52 0-15.48 0-20 0-.53 0-1.039.211-1.414.586s-.586.883-.586 1.414v12.005c0 .53.211 1.039.586 1.414s.884.586 1.414.586h20c.53 0 1.039-.211 1.414-.586s.586-.884.586-1.414c0-3.075 0-8.93 0-12.005z"/></clipPath><metadata/><path d="m0 0h32v32h-32z" fill="none"/><g clip-path="url(#a)"><path d="m11.369 13.995-2.495-2.495v-2.5l2.121-2.121 3.5 3.5v-8.379h3v8.379l3.5-3.5 2.121 2.121v2.5l-2.495 2.495h5.379c.53 0 1.039.211 1.414.586s.586.883.586 1.414v12.005c0 .53-.211 1.039-.586 1.414s-.884.586-1.414.586c-4.52 0-15.48 0-20 0-.53 0-1.039-.211-1.414-.586s-.586-.884-.586-1.414c0-3.075 0-8.93 0-12.005 0-.531.211-1.039.586-1.414s.884-.586 1.414-.586z" fill="none" stroke="#000" stroke-width="4"/><path d="m28 15.995c0-.531-.211-1.039-.586-1.414s-.884-.586-1.414-.586c-4.52 0-15.48 0-20 0-.53 0-1.039.211-1.414.586s-.586.883-.586 1.414v12.005c0 .53.211 1.039.586 1.414s.884.586 1.414.586h20c.53 0 1.039-.211 1.414-.586s.586-.884.586-1.414c0-3.075 0-8.93 0-12.005z" fill="#fff"/><g clip-path="url(#b)" stroke-width="2"><path d="m4 30 12-11.559 12 11.559" fill="none" stroke="#ccc"/><path d="m4 13.995s6.595 5.864 10.007 8.897c1.136 1.011 2.85 1.011 3.986 0 3.412-3.033 10.007-8.897 10.007-8.897" fill="#fff" stroke="#999"/></g><g fill-rule="nonzero"><path d="m14.495 12.379h3l3.5-3.5 2.121.121v2.5l-7.121 7.121-7.121-7.121v-2.5l2.121-.121z" fill="#9f146a"/><path d="m17.495 10.379 3.5-3.5 2.121 2.121-7.121 7.121-7.121-7.121 2.121-2.121 3.5 3.5v-8.379h3z" fill="#ec2fa4"/></g></g></svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

1
media/speech.svg Normal file
View File

@ -0,0 +1 @@
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.41421" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><metadata/><path d="m0 0v32h32v-32z" fill="none"/><path d="m25 22h2c1.657 0 3-1.343 3-3 0-3.329 0-8.671 0-12 0-1.657-1.343-3-3-3-5.382 0-16.618 0-22 0-1.657 0-3 1.343-3 3v12c0 1.657 1.343 3 3 3h13l7 7z" fill="none" stroke="#000" stroke-width="4"/><path d="m25 22h2c1.657 0 3-1.343 3-3 0-1.5 0-3 0-3h-28v3c0 1.657 1.343 3 3 3h13l7 7z" fill="#747474" fill-rule="nonzero"/><path d="m25 20h2c1.657 0 3-1.343 3-3 0-2.859 0-7.141 0-10 0-1.657-1.343-3-3-3-5.382 0-16.618 0-22 0-1.657 0-3 1.343-3 3v10c0 1.657 1.343 3 3 3h14l6 6z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 694 B

View File

@ -172,6 +172,15 @@ h1, h2 { --around-image: url(media/sparkles.svg); }
}
#links .icon {
display: block;
margin: auto;
height: 1.5em;
width: 1.5em;
filter: drop-shadow(0 0 10px var(--glow-col));
}
.ipa {
font-family: NotoSans;
font-weight: 900;
@ -180,14 +189,14 @@ h1, h2 { --around-image: url(media/sparkles.svg); }
#links ul {
display: flex;
justify-content: center;
align-items: center;
grid-column-gap: 2em;
display: grid;
grid-column-gap: 1em;
grid-template-columns: repeat(auto-fit, minmax(3em, 1fr));
max-width: 85%;
margin: auto;
padding: 0;
font-size: 150%;
font-size: 125%;
}
#links li { list-style: none; }