Skip to content

Conversation

@caugner
Copy link
Contributor

@caugner caugner commented Oct 27, 2025

Description

Styles <kbd> elements in content.

Like yari, but:

  • Regular font size, not smaller.
  • Thinner border, for consistency.

Motivation

Parity with yari.

Additional details

Yari

image

Fred (before)

image

Fred (after)

image

Related issues and pull requests

Fixes #947.

Like yari, but:
- Regular font size, not smaller.
- Thinner border, for consistency.
@github-actions
Copy link
Contributor

github-actions bot commented Oct 27, 2025

11cd5a7 was deployed to: https://fred-pr1003.review.mdn.allizom.net/

@caugner
Copy link
Contributor Author

caugner commented Oct 27, 2025

@mdn/content-team I reduced the border width, to avoid adjacent <kbd>s to touch. Does that look right?

Note:

  • In Yari, list items (<li>) had additional 0.5rem top/bottom margin (see here).
  • In Fred, list items do not have additional margin.)

@caugner caugner changed the title fix(content-section): add kbd style fix(content-section): add <kbd> style Oct 27, 2025
@caugner caugner marked this pull request as draft October 27, 2025 17:16
@caugner caugner marked this pull request as ready for review October 28, 2025 16:03
@caugner caugner requested a review from argl October 28, 2025 16:04
Copy link
Member

@pepelsbey pepelsbey left a comment

Choose a reason for hiding this comment

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

Perfect! Thank you :)

@caugner caugner merged commit d6495dc into main Oct 30, 2025
14 checks passed
@caugner caugner deleted the 947-kbd-style branch October 30, 2025 09:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

(design) Keyboard keys are not represented with CSS

3 participants