kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: alignment and a11y issues for icons

Browse Source
This commit is contained in:
Stefan Imhoff
2024-03-14 17:25:07 +01:00
parent 6985dcce51
commit 6920007cbc
5 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Backlink.tsx
View File

@@ -19,9 +19,8 @@ export const Backlink: FunctionalComponent<Props> = ({ backLink, class: classNam
return (
<>
{backLink && (
<Link class={classes} href={backLink} {...props}>
<Link aria-label="Back to overview" class={classes} href={backLink} {...props}>
<button
aria-label="Back to overview"
class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center border-none text-[0]"
type="button"
tabIndex={-1}

2
src/components/DownloadLink.tsx
View File

@@ -11,7 +11,7 @@ interface Props extends JSX.HTMLAttributes<HTMLAnchorElement> {
export const DownloadLink: FunctionalComponent<Props> = ({ href, text, ...props }) => (
<TextLink class="group" href={href} {...props}>
{text}
<span class="more-icon relative inline-flex mis-[0.2em] block-start-[0.2em]">
<span class="more-icon relative inline-flex mis-[0.2em] block-start-[0.4em]">
<Download
aria-hidden="true"
class="icon h-icon w-icon transition-transform duration-500 ease-in-out group-hover:translate-y-1 group-focus:translate-y-1"

2
src/components/MoreLink.tsx
View File

@@ -11,7 +11,7 @@ interface Props extends JSX.HTMLAttributes<HTMLAnchorElement> {
export const MoreLink: FunctionalComponent<Props> = ({ href, text, ...props }) => (
<TextLink class="group" href={href} {...props}>
{text}
<span class="more-icon relative inline-flex mis-[0.2em] block-start-[0.2em]">
<span class="more-icon relative inline-flex mis-[0.2em] block-start-[0.4em]">
<ArrowRight
aria-hidden="true"
class="icon h-icon w-icon transition-transform duration-500 ease-in-out group-hover:translate-x-1 group-focus:translate-x-1"

5
src/components/SearchLink.astro
View File

@@ -5,12 +5,13 @@ import { Link } from '.';
---
<Link
class="col-span-2 col-start-1 h-clickarea w-clickarea scale-75 items-center justify-center self-center justify-self-center transition-transform duration-500 ease-in-out hover:scale-90 focus:scale-90 print:hidden md:col-span-1"
aria-label="Search the website (/)"
class="col-span-2 col-start-1 h-clickarea w-clickarea scale-75 items-center justify-center self-center justify-self-center transition-transform duration-500 ease-in-out hover:scale-90 focus:scale-90 md:col-span-1 print:hidden"
href="#search"
id="search-link"
title="Search the website (/)"
>
<button
aria-label="Search the website (/)"
class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center border-none text-[0]"
tabindex={-1}
type="button"

8
src/components/UpLink.tsx
View File

@@ -6,14 +6,12 @@ import { ArrowUp } from './icons';
export const UpLink: FunctionalComponent = ({ ...props }) => (
<div class="flex flex-1 justify-end" {...props}>
<Link
id="up-link"
aria-label="Back to top"
class="transition-transform duration-500 ease-in-out hover:-translate-y-1 focus:-translate-y-1"
href="#top"
id="up-link"
>
<button
aria-label="Back to top"
class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center"
>
<button class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center">
<ArrowUp class="icon h-icon w-icon" />
</button>
</Link>