Skip to content

Conversation

cderv
Copy link
Collaborator

@cderv cderv commented Sep 3, 2024

Closes #6012

  • It adds some styling for kbd element for revealjs. By design, I am choosing the same style than in Bootstrap based document. So it is grey

    • HTML
      image
    • Revealjs
      image
  • It will change based on dark / light theme where the gray background is made darker.

    • While trying, I found it was broken for Bootstrap as the color did not adapt while text color was changing. It looks like this now:
    • HTML with darkly
      image
    • Revealjs with dark
      image
  • Some style can be different between HTML and reveal (like border), but this is because it is depend on the theme used, and both format don't have same themes.

    • This is why kbd can be controlled in revealjs with same variable than in bootstrap
      • // KBD variables
        $kbd-padding-y: 0.4rem !default;
        $kbd-padding-x: 0.4rem !default;
        $kbd-font-size: $presentation-font-size-root !default;
        $kbd-color: $body-color !default;
        $kbd-bg: $gray-100 !default; // like in bootstrap style

Do like callouts and shift color to a darker version for kbd

Keep the default chosen for kbd light theme with is gray and then use a darker grey, so that lighter font on dark them shows up in kbd box
@cscheid
Copy link
Collaborator

cscheid commented Sep 5, 2024

This looks good to me!

@cderv cderv merged commit 7a0131d into main Sep 5, 2024
47 checks passed
@cderv cderv deleted the revealjs/kbd-style branch September 5, 2024 18:26
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.

Add styling to kbd shortcode keyboard shortcuts in Revealjs presentations

2 participants