Allow linking to a specific card

[merwok]

fixes #136

[merwok]

two things missing:

• adapt css so that there is a top padding so we can see the full card
• add links somewhere: the language name maybe? (I would prefer this and not # or ⛓️ emoji so that all links have a different text (accessibility rule))

[StanFromIreland]

Unfortunately the CI will fail because it only properly works on branches of this repo, I will open a PR to fix it.

[StanFromIreland]

adapt css so that there is a top padding so we can see the full card

I with manual testing I find a scroll-margin-top: 4.5rem; looks pretty good.

[merwok]

Will that work if applied on the card div, not on the row?

[StanFromIreland]

When I tested, I added it to the card class, and it worked fine.

FYI, update the branch and the CI will go green.

[merwok]

Looks nice on browser and (emulated) mobile.

Let me know if the last commit should be a separate PR (I assume you’ll squash merge this)

[StanFromIreland]

My screenshots

Some thoughts, as for the last commit, I suggest removing that from this PR, I think it would also be better to have the full name rather than the language code. Yes, I will squash.

As for the linking, I can confirm it works fine on FireFox on Linux and on iOS with Safari. However, I think the bold blue text is now too "loud" for what it does, although this is quite difficult accessibility-wise I must admit. How about an icon that appears on hover/focus next to the heading, for example, something like like so?

[merwok]

I tried this:

.card-title a:focus::after, .card-title a:hover::after {
  content: " 🔗";
}

but didn’t like it.

Another accessiblity rule: people decide to click on something before they move their mouse or finger, so essential information should not be available only on hover/focus.
Here I think we could add a line on top of the page like «To link directly to a card, click on or activate its title, then copy the link.»

The effect in your video is nice, but not discoverable enough. What about always having # in the title and adding the background colour effect on hover/focus?

[StanFromIreland]

I propose suggestions in https://github.com/merwok-forks/py-docs-translations-dashboard/pull/1.

[merwok]

Replaced by #156