Merge pull request #1906 from brettchalupa/kbd-styles-1813

Add styles for <kbd> elements

Author: ehuss

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) {

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 */

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 |
 | ---- | ---- | ----- | ----- | ----- | ----- |