Skip to content

Commit

Permalink
fix(core): fix dimensions of links in footer
Browse files Browse the repository at this point in the history
Set the display property of the links in the site footer to
inline-block.

The links are visualised by icons which contain images or <span> tags
for Material Symbols.
If a link does not cover the same area as its content, users may end up
hovering/clicking/... in the wrong place. When tabbing, the border on
the focused element may look off.
The inline-block makes the links fit the icons' dimensions, which
prevents links that are smaller in size than their visual content.
  • Loading branch information
koeaw authored and b1rger committed Nov 13, 2024
1 parent e14c806 commit c2c5594
Showing 1 changed file with 5 additions and 0 deletions.
5 changes: 5 additions & 0 deletions apis_core/core/static/css/core.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@ a #logo:hover {
opacity: 0.5;
}

footer a:has(> img),
footer a:has(> span[class*="material-symbols"]) {
display: inline-block;
}

footer a:has(> img):hover,
footer a:has(> span[class*="material-symbols"]):hover {
text-decoration: none;
Expand Down

0 comments on commit c2c5594

Please sign in to comment.