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

3 files changed, 19 insertions, 2 deletions

diff --git a/src/theme/css/general.css b/src/theme/css/general.css
index 0e4f07a5..344b53eb 100644
--- a/src/theme/css/general.css
+++ b/src/theme/css/general.css
@@ -22,8 +22,8 @@ body {
 }
 
 code {
-    font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace !important;
-    font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
+    font-family: var(--mono-font) !important;
+    font-size: var(--code-font-size);
 }
 
 /* make long words/inline code not x overflow */
@@ -148,6 +148,18 @@ blockquote {
     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,
 .footnote-definition + :not(.footnote-definition) {
diff --git a/src/theme/css/variables.css b/src/theme/css/variables.css
index 56b634bc..21bf8e55 100644
--- a/src/theme/css/variables.css
+++ b/src/theme/css/variables.css
@@ -6,6 +6,8 @@
     --page-padding: 15px;
     --content-max-width: 750px;
     --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 */
diff --git a/test_book/src/individual/mixed.md b/test_book/src/individual/mixed.md
index d7c502b1..e9d101b2 100644
--- a/test_book/src/individual/mixed.md
+++ b/test_book/src/individual/mixed.md
@@ -27,6 +27,8 @@ fn main(){
 }
 ```
 
+<kbd>Ctrl</kbd> + <kbd>S</kbd> saves a file.
+
 A random image sprinkled in between
 
 ![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
   3. `put`
   4. here?
+  5. **<kbd>Ctrl</kbd> + <kbd>S</kbd> saves a file.**
 
 | col1 | col2 | col 3 | col 4 | col 5 | col 6 |
 | ---- | ---- | ----- | ----- | ----- | ----- |