steffo/steffoweb
steffo/steffoweb
1
Fork 0
mirror of https://github.com/Steffo99/steffoweb.git synced 2024-11-22 08:04:31 +00:00
Code Activity

Improve links accessibility

Browse source
This commit is contained in:
Steffo 2023-02-28 13:01:43 +01:00
parent b5df20d445
commit 746d92b7ad
Signed by: steffo
GPG key ID: 2A24051445686895
2 changed files with 21 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
components/LinkPanel.module.css
View file

@ -1,6 +1,9 @@
.linkPanel { .linkPanel {
text-decoration: none;
white-space: nowrap; white-space: nowrap;
flex-direction: row;
gap: 8px;
align-items: center;
} }
.linkPanel:hover, .linkPanel:focus { .linkPanel:hover, .linkPanel:focus {
@ -10,3 +13,14 @@
.linkPanel:active { .linkPanel:active {
--bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 40%); --bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 40%);
} }
.linkPanelIcon {
justify-self: center;
width: 20px;
flex-shrink: 0;
}
.linkPanelText {
flex-grow: 1;
justify-self: flex-start;
}

7
components/LinkPanel.tsx
View file

@ -17,9 +17,12 @@ export type LinkPanelProps = {
export const LinkPanel = ({href, icon, text, me, fade}: LinkPanelProps) => { export const LinkPanel = ({href, icon, text, me, fade}: LinkPanelProps) => {
const panel = ( const panel = (
<span> <>
<FontAwesomeIcon icon={icon}/>&nbsp;{text} <FontAwesomeIcon className={style.linkPanelIcon} icon={icon}/>
<span className={style.linkPanelText}>
{text}
</span> </span>
</>
) )
if(href) { if(href) {