diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-05-15 19:08:58 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-05-15 19:08:58 +0200 |
| commit | 056ed0d5f050158cebad689099214b164539899a (patch) | |
| tree | 8e28a82386a785568a7a655bf4d1213096b82589 /src/components/atoms/links/link.module.scss | |
| parent | c95cce04393080a52a54191cff7be8fec68af4b0 (diff) | |
chore: improve accessibility
Diffstat (limited to 'src/components/atoms/links/link.module.scss')
| -rw-r--r-- | src/components/atoms/links/link.module.scss | 23 |
1 files changed, 23 insertions, 0 deletions
diff --git a/src/components/atoms/links/link.module.scss b/src/components/atoms/links/link.module.scss index 1b89727..5c97bd2 100644 --- a/src/components/atoms/links/link.module.scss +++ b/src/components/atoms/links/link.module.scss @@ -2,6 +2,29 @@ @use "@styles/abstracts/variables" as var; .link { + background: linear-gradient(to top, var(--color-primary) 50%, transparent 50%) + 0 0 / 100% 201% no-repeat; + color: var(--color-primary); + text-decoration-thickness: 0.15em; + text-underline-offset: 20%; + transition: all 0.3s linear 0s, text-decoration 0.18s ease-in-out 0s; + + &:hover { + color: var(--color-primary-light); + text-decoration-thickness: 0.25em; + } + + &:focus { + background-position: 0 100%; + color: var(--color-fg-inverted); + } + + &:active { + background-position: 0 0; + color: var(--color-primary-dark); + text-decoration-thickness: 18%; + } + &[hreflang] { &::after { display: inline-block; |