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