SVG Email obfuscation
This commit is contained in:
parent
75ee13fe94
commit
06d84f6d6e
|
@ -0,0 +1,51 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import * as conf from '$lib/config'
|
||||||
|
</script>
|
||||||
|
<section>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
lang="en-GB"
|
||||||
|
aria-labelledby="title"
|
||||||
|
viewBox="0 0 200 24">
|
||||||
|
|
||||||
|
<title id="title">Zašlete mi mail!</title>
|
||||||
|
|
||||||
|
<defs>
|
||||||
|
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<a href="mailto:{conf.socialLinks[3].title}" aria-label="Zašlete mi mail!">
|
||||||
|
<rect />
|
||||||
|
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">{conf.socialLinks[3].title}</text>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
rect {
|
||||||
|
width: 200px;
|
||||||
|
height: 24px;
|
||||||
|
fill: rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus rect,
|
||||||
|
rect:hover {
|
||||||
|
fill: indigo
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 16px;
|
||||||
|
fill: indigo;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus text,
|
||||||
|
rect:hover + text {
|
||||||
|
fill: rgb(255, 255, 255);
|
||||||
|
font-weight: 900;
|
||||||
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
|
||||||
|
text-decoration: underline 1px solid rgb(255, 255, 255);
|
||||||
|
text-underline-offset: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue