guz013/keikos.work
1
0
Fork 0
Code Issues Pull Requests Activity

feat: better a11y on external links

Browse Source
This commit is contained in:
Guz
2024-12-16 21:58:16 -03:00
parent d37c2c99af
commit ab940991b2
2 changed files with 27 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
handlers/pages/home.templ
View File

@@ -44,8 +44,8 @@ templ (p *Home) page() {
<section class="relative bg-black w-full h-screen md:flex justify-center items-center">
<div class="relative w-full h-full flex flex-col justify-between md:w-fit md:h-fit">
<h2
class={ "relative z-4 m-0 pt-4 text-9xl vertical-lr md:horizontal-tb text-stroke-1px text-stroke-white text-transparent",
"md:text-center" }
class={ "relative z-4 m-0 pt-4 text-9xl vertical-lr text-stroke-1px text-stroke-white text-transparent",
"md:horizontal-tb md:text-center" }
>
Socials
</h2>
@@ -58,9 +58,15 @@ templ (p *Home) page() {
rel="external me nofollow noopener noreferrer"
target="_blank"
>
<span class="hidden i-pixelarticons:camera h-3rem md:inline-block" aria-hidden="true"></span>
<span
class="hidden i-pixelarticons:camera h-3rem md:inline-block"
aria-hidden="true"
></span>
Instagram
<span class="inline-block i-pixelarticons:camera h-3rem md:hidden" aria-hidden="true"></span>
<span
class="inline-block i-pixelarticons:camera h-3rem md:hidden"
aria-hidden="true"
></span>
<span
class={ "absolute inline-block i-pixelarticons:external-link w-1rem h-1rem top-0 right-0 translate-x-50% opacity-50",
"md:translate-x-100% md:opacity-100" }
@@ -76,9 +82,15 @@ templ (p *Home) page() {
rel="external me nofollow noopener noreferrer"
target="_blank"
>
<span class="hidden i-pixelarticons:file-alt h-3rem md:inline-block" aria-hidden="true"></span>
<span
class="hidden i-pixelarticons:file-alt h-3rem md:inline-block"
aria-hidden="true"
></span>
Tumblr
<span class="inline-block i-pixelarticons:file-alt h-3rem md:hidden" aria-hidden="true"></span>
<span
class="inline-block i-pixelarticons:file-alt h-3rem md:hidden"
aria-hidden="true"
></span>
<span
class={ "absolute inline-block i-pixelarticons:external-link w-1rem h-1rem top-0 right-0 translate-x-50% opacity-50",
"md:translate-x-100% md:opacity-100" }
@@ -96,9 +108,15 @@ templ (p *Home) page() {
rel="external me nofollow noopener noreferrer"
target="_blank"
>
<span class="hidden i-pixelarticons:bug h-3rem md:inline-block" aria-hidden="true"></span>
<span
class="hidden i-pixelarticons:bug h-3rem md:inline-block"
aria-hidden="true"
></span>
BlueSky
<span class="inline-block i-pixelarticons:bug h-3rem md:hidden" aria-hidden="true"></span>
<span
class="inline-block i-pixelarticons:bug h-3rem md:hidden"
aria-hidden="true"
></span>
<span
class={ "absolute inline-block i-pixelarticons:external-link w-1rem h-1rem top-0 right-0 translate-x-50% opacity-50",
"md:translate-x-100% md:opacity-100" }