Skip to content

Commit

Permalink
πŸ’„ Make :target elements stand out
Browse files Browse the repository at this point in the history
On a tall monitor (where you can fit the content of the whole screen
without scrolling), it can be difficult seeing where a particular in-page
link takes you.  This commit makes these elements stand out more
  • Loading branch information
vegerot committed Jan 26, 2023
1 parent ebaf584 commit 5917504
Showing 1 changed file with 12 additions and 0 deletions.
12 changes: 12 additions & 0 deletions website/public/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,18 @@ nav.breadcrumbs ol > li:not(:first-child)::before {
content: "➀ ";
}

/* make "#" selected sections stand out */
h4:target::before {
content: "πŸ‘‰"; /*TODO(😎): localize for different layout directions (e.g. rtl)*/
}
h4:target {
transition-property: box-shadow, transform;
transition-duration: 333ms;
transition-timing-function: ease;
box-shadow: 0 0.8rem 1.0rem 0.1rem rgba(0, 0, 0, 0.2);
transform: translateY(-0.4rem);
}

/* HACK(strager): The '>' symbol pushes some breadcrumbs down for some reason.
This causes vertical misalignment between breadcrumbs. Fix this by tweaking
line-height. I don't know why this works. */
Expand Down

0 comments on commit 5917504

Please sign in to comment.