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

fix(a11y): use img instead of span for icons

Browse Source
This commit is contained in:
Guz
2024-12-17 11:26:32 -03:00
parent 8763530a9a
commit 2ef641b69e
1 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
handlers/pages/home.templ
View File

@@ -80,20 +80,20 @@ templ (p *Home) page() {
rel="external nofollow noopener noreferrer"
target="_blank"
>
<span
<img
class="hidden i-pixelarticons:camera h-3rem md:inline-block"
aria-hidden="true"
></span>
/>
Instagram
<span
<img
class="inline-block i-pixelarticons:camera h-3rem md:hidden"
aria-hidden="true"
></span>
<span
/>
<img
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" }
aria-label="(Opens in new tab)"
></span>
alt="(Opens in new tab)"
/>
</a>
</li>
<li class="flex justify-end mb-4 md:m-0">
@@ -104,20 +104,20 @@ templ (p *Home) page() {
rel="external nofollow noopener noreferrer"
target="_blank"
>
<span
<img
class="hidden i-pixelarticons:file-alt h-3rem md:inline-block"
aria-hidden="true"
></span>
/>
Tumblr
<span
<img
class="inline-block i-pixelarticons:file-alt h-3rem md:hidden"
aria-hidden="true"
></span>
<span
/>
<img
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" }
aria-label="(Opens in new tab)"
></span>
alt="(Opens in new tab)"
/>
</a>
</li>
<li
@@ -130,20 +130,20 @@ templ (p *Home) page() {
rel="external nofollow noopener noreferrer"
target="_blank"
>
<span
<img
class="hidden i-pixelarticons:bug h-3rem md:inline-block"
aria-hidden="true"
></span>
/>
BlueSky
<span
<img
class="inline-block i-pixelarticons:bug h-3rem md:hidden"
aria-hidden="true"
></span>
<span
/>
<img
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" }
aria-label="(Opens in new tab)"
></span>
alt="(Opens in new tab)"
/>
</a>
</li>
</ul>
@@ -185,11 +185,11 @@ templ (p *Home) page() {
target="_blank"
>
Lost Under The Night Sky
<span
<img
class={ "absolute inline-block i-pixelarticons:external-link w-1rem h-1rem top-0 right-0 translate-x-70% opacity-50",
"md:translate-x-100% md:opacity-100" }
aria-label="(Opens in new tab)"
></span>
alt="(Opens in new tab)"
/>
</a>
</h3>
</div>
@@ -238,12 +238,12 @@ templ (p *Home) page() {
target="_blank"
>
Gustavo "Guz" L Mello
<span
<img
class={ "absolute inline-block i-pixelarticons:external-link",
"w-0.5rem h-0.5rem top-0 right-0 translate-x-100% opacity-50",
"md:translate-x-100% md:opacity-100" }
aria-label="(Opens in new tab)"
></span>
alt="(Opens in new tab)"
/>
</a>
<span class="inline-block md:hidden pl-3">(Work In Progress)</span>
<span class="hidden md:inline-block pl-3">(WIP)</span>