dot013/guz.one
1
0
Fork 0
Code Issues Pull Requests Activity

fix: improve a11y

Browse Source
This commit is contained in:
Gustavo "Guz" L. de Mello
2024-06-07 20:00:51 -03:00
parent 149bfe3e25
commit 1fbf81292f
4 changed files with 26 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/nav.templ
View File

@@ -24,15 +24,23 @@ templ Nav(links []Link) {
<section
class="flex flex-row justify-between fixed top-0 font-cal w-90% lg:w-80% xl:w-90% z-110"
>
<p class="text-gray cannot-hover md:block!">Gustavo "Guz" L. de Mello</p>
<p class="text-gray can-hover md:hidden">Guz</p>
<p
class="text-gray contrast-more:text-light-gray cannot-hover md:block!"
>
Gustavo "Guz" L. de Mello
</p>
<p
class="text-gray contrast-more:text-light-gray can-hover md:hidden"
>
Guz
</p>
<nav class="can-hover">
<ul class="flex flex-row gap-3 list-none">
for _, i := range links {
<li class="transform-gpu hover:-translate-y-0.2 transition-transform">
<a
class={ "text-gray hover:text-white no-underline " +
"hover:underline transition-color transition-1s" }
class={ "text-gray contrast-more:text-light-gray hover:text-white " +
"no-underline hover:underline transition-color transition-1s" }
id={ fmt.Sprintf("nav-anchor-%s", i.Link) }
href={ i.Link }
>
@@ -62,13 +70,13 @@ templ Nav(links []Link) {
for _, i := range links {
<li
class={ "hover:text-white transform-gpu hover:-translate-y-0.2 " +
"transition-transform after:content-['@'] " +
"after:pl-4 after:i-solar:posts-carousel-vertical-line-duotone" }
"transition-transform after:content-['@'] " +
"after:pl-4 after:i-solar:posts-carousel-vertical-line-duotone" }
>
<a
class={ "text-gray hover:text-white no-underline " +
"hover:underline transition-color transition-1s" }
id={ fmt.Sprintf("nav-anchor-%s", i.Link) }
"hover:underline transition-color transition-1s" }
id={ fmt.Sprintf("nav-anchor-touch-%s", i.Link) }
href={ i.Link }
>
{ i.Text }

2
components/project_card.templ
View File

@@ -66,7 +66,7 @@ templ ProjectCard(project Project) {
</p>
</hgroup>
<p
class="m-0 text-sm text-gray text-justify line-clamp-2"
class="m-0 text-sm text-gray contrast-more:text-light-gray text-justify line-clamp-2"
>
{ project.Summary }
</p>

9
layouts/page.templ
View File

@@ -4,12 +4,13 @@ templ Page(title string) {
<!DOCTYPE html>
<html lang="en-US" class="scroll-smooth motion-reduce:scroll-auto">
<head>
<!-- TODO: improve a11y for zoomed states -->
<meta
name="viewport"
content={ "width=device-width, " +
"initial-scale=1.0, " +
"maximum-scale=1.0, " +
"user-scalable=no" }
"initial-scale=1.0, " +
"maximum-scale=1.0, " +
"user-scalable=no" }
/>
<link rel="stylesheet" href="/uno.css"/>
<link rel="stylesheet" href="/global.css"/>
@@ -20,7 +21,7 @@ templ Page(title string) {
"w-screen overflow-x-hidden text-white bg-black font-sans m-0" }
style="--anim-slide-from-y: 10px; --anim-delay: 120ms; --anim-duration: 0.6s;"
>
{ children... }
{ children... }
</body>
</html>
}

6
pages/homepage.templ
View File

@@ -68,7 +68,8 @@ templ Homepage() {
{Text: "contact", Link: templ.SafeURL("#contact")},
})
<div
class="w-screen h-screen overflow-x-hidden overflow-y-scroll snap-y scrollbar thumb-gray track-black"
class={ "w-screen h-screen overflow-x-hidden overflow-y-scroll " +
"snap-y scrollbar thumb-gray contrast-more:thumb-light-gray track-black" }
>
<header
class="h-screen w-screen flex justify-center items-center snap-start"
@@ -80,11 +81,12 @@ templ Homepage() {
src="/logo-013.svg"
class="animate slide-from-b fade-in"
style="--anim-stagger: 1; opacity: 0;"
alt="Guz013's logo"
/>
</div>
<h1
class={ "w-full lg:max-w-45rem mb-0 lg:mt-0 prose text-2.9rem lg:text-6xl xl:text-4.3rem " +
"animate slide-from-b fade-in" }
"animate slide-from-b fade-in" }
style="--anim-stagger: 2; opacity: 0;"
>
Someone who's trying to improve