From 6942efa6289c9f1d99ea9f63972aa314ac06a8b1 Mon Sep 17 00:00:00 2001
From: Jermolene <jeremy@osmosoft.com>
Date: Thu, 14 May 2015 10:16:29 +0100
Subject: [PATCH] Add styling for `<kbd>` elements

---
 .../tw5.com/tiddlers/howtos/KeyboardShortcuts.tid  |  6 +++---
 .../tw5.com/tiddlers/widgets/KeyboardWidget.tid    |  6 +++---
 themes/tiddlywiki/vanilla/base.tid                 | 14 ++++++++++++++
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/editions/tw5.com/tiddlers/howtos/KeyboardShortcuts.tid b/editions/tw5.com/tiddlers/howtos/KeyboardShortcuts.tid
index 9fb0dedbd..e5adee200 100644
--- a/editions/tw5.com/tiddlers/howtos/KeyboardShortcuts.tid
+++ b/editions/tw5.com/tiddlers/howtos/KeyboardShortcuts.tid
@@ -1,5 +1,5 @@
 created: 20140526204527418
-modified: 20140912141318967
+modified: 20150514091409984
 tags: Features [[Working with TiddlyWiki]]
 title: KeyboardShortcuts
 type: text/vnd.tiddlywiki
@@ -9,5 +9,5 @@ Keyboard shortcut support is currently very limited but will be improved in late
 ! Editing Shortcuts
 
 |Key |Shortcut description |
-|`Ctrl-Enter` |Confirm changes to the draft tiddler containing the keyboard focus |
-|`Escape` |Abandon changes to the draft tiddler containing the keyboard focus |
+|<kbd>ctrl-enter</kbd> |Confirm changes to the draft tiddler containing the keyboard focus |
+|<kbd>escape</kbd> |Abandon changes to the draft tiddler containing the keyboard focus |
diff --git a/editions/tw5.com/tiddlers/widgets/KeyboardWidget.tid b/editions/tw5.com/tiddlers/widgets/KeyboardWidget.tid
index 950153eb9..e69b59932 100644
--- a/editions/tw5.com/tiddlers/widgets/KeyboardWidget.tid
+++ b/editions/tw5.com/tiddlers/widgets/KeyboardWidget.tid
@@ -1,9 +1,9 @@
+caption: keyboard
 created: 20140302192136805
-modified: 20140302192935781
+modified: 20150514091459257
 tags: Widgets
 title: KeyboardWidget
 type: text/vnd.tiddlywiki
-caption: keyboard
 
 ! Introduction
 
@@ -21,7 +21,7 @@ The content of the `<$keyboard>` widget is rendered normally. The keyboard short
 
 ! Key Strings
 
-Key strings are made up of zero or more of the modifiers ''alt'', ''shift'' or ''ctrl'' followed by the name of a key, all joined with "+" plus symbols. Key names are either the letter or digit printed on the key (eg "a" or "1"), or one of the special keys ''backspace'', ''tab'', ''enter'' or ''escape''.
+Key strings are made up of zero or more of the modifiers <kbd>alt</kbd>, <kbd>shift</kbd> or <kbd>ctrl</kbd> followed by the name of a key, all joined with "+" plus symbols. Key names are either the letter or digit printed on the key (eg "a" or "1"), or one of the special keys <kbd>backspace</kbd>, <kbd>tab</kbd>, <kbd>enter</kbd> or <kbd>escape</kbd>.
 
 For example:
 
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index 859cfa35f..3188ad915 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -135,6 +135,20 @@ svg.tc-image-button {
 	padding: 0px 1px 1px 0px;
 }
 
+kbd {
+	display: inline-block;
+	padding: 3px 5px;
+	font-size: 0.8em;
+	line-height: 1.2;
+	color: <<colour foreground>>;
+	vertical-align: middle;
+	background-color: <<colour background>>;
+	border: solid 1px <<colour muted-foreground>>;
+	border-bottom-color: <<colour muted-foreground>>;
+	border-radius: 3px;
+	box-shadow: inset 0 -1px 0 <<colour muted-foreground>>;
+}
+
 /*
 Markdown likes putting code elements inside pre elements
 */