Add styles for <kbd> elements

Allows for special styles to call them out since they're different than
normal text and different than code. They can make use of styles they
inherit for font style and weight.

Notes on changes:

- Added new CSS variables for reused elements
- The font-* rules are separate for each aspect so that they can inherit
  bold/italic/etc

Closes https://github.com/rust-lang/mdBook/issues/1813
This commit is contained in:
Brett Chalupa 2022-10-06 16:02:29 -04:00
parent a8c37ceace
commit 79c159d123
3 changed files with 19 additions and 2 deletions

View File

@ -22,8 +22,8 @@ body {
} }
code { code {
font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace !important; font-family: var(--mono-font) !important;
font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */ font-size: var(--code-font-size);
} }
/* make long words/inline code not x overflow */ /* make long words/inline code not x overflow */
@ -148,6 +148,18 @@ blockquote {
border-bottom: .1em solid var(--quote-border); border-bottom: .1em solid var(--quote-border);
} }
kbd {
background-color: var(--table-border-color);
border-radius: 4px;
border: solid 1px var(--theme-popup-border);
box-shadow: inset 0 -1px 0 var(--theme-hover);
display: inline-block;
font-size: var(--code-font-size);
font-family: var(--mono-font);
line-height: 10px;
padding: 4px 5px;
vertical-align: middle;
}
:not(.footnote-definition) + .footnote-definition, :not(.footnote-definition) + .footnote-definition,
.footnote-definition + :not(.footnote-definition) { .footnote-definition + :not(.footnote-definition) {

View File

@ -6,6 +6,8 @@
--page-padding: 15px; --page-padding: 15px;
--content-max-width: 750px; --content-max-width: 750px;
--menu-bar-height: 50px; --menu-bar-height: 50px;
--mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
--code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */
} }
/* Themes */ /* Themes */

View File

@ -27,6 +27,8 @@ fn main(){
} }
``` ```
<kbd>Ctrl</kbd> + <kbd>S</kbd> saves a file.
A random image sprinkled in between A random image sprinkled in between
![16x16 rust-lang logo](http://rust-lang.org/logos/rust-logo-16x16.png) ![16x16 rust-lang logo](http://rust-lang.org/logos/rust-logo-16x16.png)
@ -41,6 +43,7 @@ A random image sprinkled in between
2. be 2. be
3. `put` 3. `put`
4. here? 4. here?
5. **<kbd>Ctrl</kbd> + <kbd>S</kbd> saves a file.**
| col1 | col2 | col 3 | col 4 | col 5 | col 6 | | col1 | col2 | col 3 | col 4 | col 5 | col 6 |
| ---- | ---- | ----- | ----- | ----- | ----- | | ---- | ---- | ----- | ----- | ----- | ----- |