Surface glossary terms and related links in expandable cards

[parlough]

Introduces a new card-based design for entries on the glossary page. The short description is shown by default and the long description and resource links are shown once expanded. When navigating to the page, the card that corresponds to the current fragment (such as #variance in dart.dev/resources/glossary#variance) is expanded.

Additionally you can specify the type of a resource to add an icon in front of the resource button. Currently the supported types are:

• term (for other glossary entries or word definitions)
• article or doc (general for doc pages)
• tutorial (for tutorials, codelabs, etc.)
• api (for API links)
• video (for videos, such as links to Youtube videos)
• code or sample (for code samples or repository links)
• diagnostic or lint (for links to specific lints, diagnostic docs, etc.)

To implement this, I've introduced a new set of shared button styles in _buttons.scss and updated the shared set of card styles in _cards.scss. That way cards across the site (currently this and the linter rules page) can benefit from a consistent structure and shared styles.

Staged affected docs:

• Glossary page
• Linter rules index (Should look the same, but the shared styles are used by it)

[dart-github-bot]

Visit the preview URL for this PR (updated for commit 23f632c):

https://dart-dev--pr6305-misc-glossary-cards-eefxhuts.web.app

[MaryaBelanger]

This is so cool 🥹 The resource icons are so thoughtful.

I dont see how the lint pages are affected, is there no visible change?

Either way, looks amazing, thank you so much.

[parlough]

I don't see how the lint pages are affected, is there no visible change?

Then that's good. They shouldn't be visually affected, but they use the new shared styles.