Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve link UX/usability for header links #56

Closed
xf- opened this issue Apr 17, 2024 · 1 comment
Closed

Improve link UX/usability for header links #56

xf- opened this issue Apr 17, 2024 · 1 comment
Assignees
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@xf-
Copy link

xf- commented Apr 17, 2024

Current state
I'm unfamiliar with landing page (Home) and every Block/Col is the same style and only some titles are linked. Only a device with a cursor has any indicator at all.

Possible solutions

  • Change Link color or add an underline/ border or something distinct for links (works also great on mobile)
    • text-decoration: underline var(--color-brand-primary); or
    • border-bottom: 2px solid var(--color-brand-primary);
  • Add a stretched link, so a block/col/tile is clickable and triggers the hover effect easily.
    • Add position: relative to column
    • Add a class like stretched-link and an after element
.stretched-link::after {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 1;
 content: "";
}

Based on Bootstrap stretched-link

Screenshot

@soc
Copy link
Collaborator

soc commented Apr 17, 2024

Thank you, we will look into this! :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants