From 1c3597fac020c8232edc86262bad2956b62dd01b Mon Sep 17 00:00:00 2001
From: Marcin Kulik <m@ku1ik.com>
Date: Sat, 29 Nov 2014 11:39:28 +0000
Subject: [PATCH] Use <kbd> for displaying key sequences

---
 app/assets/stylesheets/base.sass      | 9 +++++++++
 app/views/docs/how-it-works.html.slim | 4 ++--
 app/views/home/show.html.slim         | 2 +-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/base.sass b/app/assets/stylesheets/base.sass
index d93874c..c2c1d77 100644
--- a/app/assets/stylesheets/base.sass
+++ b/app/assets/stylesheets/base.sass
@@ -104,3 +104,12 @@ a
 
 .help-block
   font-size: 12px
+
+kbd
+  font-size: 90%
+  background-color: #FFF
+  color: #333
+  padding: 3px
+  border-radius: 3px
+  border: 1px solid #CCC
+  margin: 0 1px
diff --git a/app/views/docs/how-it-works.html.slim b/app/views/docs/how-it-works.html.slim
index 0d68279..c8e38fa 100644
--- a/app/views/docs/how-it-works.html.slim
+++ b/app/views/docs/how-it-works.html.slim
@@ -11,7 +11,7 @@ markdown:
 
   When you run `asciinema rec` in your terminal the recording starts, capturing
   all output that is being printed to your terminal while you're issuing the
-  shell commands. When the recording finishes (by hitting &lt;ctrl-d&gt; or
+  shell commands. When the recording finishes (by hitting <kbd>Ctrl-D</kbd> or
   typing `exit`) then the captured output is uploaded to asciinema.org website
   and prepared for playback on the web.
 
@@ -39,7 +39,7 @@ markdown:
   middlemen between the user, the display and the shell. It allows for
   transparent capture of user input (keyboard) and terminal output (display).
   `screen` command utilizes it for capturing special keyboard shortcuts like
-  &lt;ctrl-a&gt; and altering the output in order to display window
+  <kbd>Ctrl-A</kbd> and altering the output in order to display window
   numbers/names and other messages.
 
   Asciinema recorder does its job by utilizing pseudo-terminal for capturing
diff --git a/app/views/home/show.html.slim b/app/views/home/show.html.slim
index 4ef77b9..5e16d43 100644
--- a/app/views/home/show.html.slim
+++ b/app/views/home/show.html.slim
@@ -36,7 +36,7 @@
           h1 Simple recording
           p
             ' Record right where you work - in a terminal.
-              To start just run <code>asciinema rec</code>, to finish hit &lt;ctrl-d&gt; or type <code>exit</code>.
+              To start just run <code>asciinema rec</code>, to finish hit <kbd>Ctrl-D</kbd> or type <code>exit</code>.
           p
             a href=docs_path('getting-started') Get started &raquo;