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.

Sign up for GitHub

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

💄 Make :target elements stand out #504

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

💄 Make :target elements stand out #504

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions website/public/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,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)*/
}
Comment on lines +342 to +344
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should add a background to the h4 instead. Maybe rgba(0,0,0,0.1) for light mode and rgba(255,255,255,0.1) for dark mode.

h4:target {
transition-property: box-shadow, transform;
transition-duration: 333ms;
transition-timing-function: ease;
Comment on lines +346 to +348
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor: If we have an animation, we should respect prefers-reduced-motion.

box-shadow: 0 0.8rem 1.0rem 0.1rem rgba(0, 0, 0, 0.2);
transform: translateY(-0.4rem);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm very confused about the styling here. It feels very out of place.

  • Why a box shadow? It looks uncanny having a shadow surrounding text and extending to the right (in the middle of nowhere).
  • Why does the text move location? (I could understand the pointer moving (sliding into view).)

}

/* 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
Loading