Integrate hero console code styles

johndjameson · johndjameson · commit 47b7d0cd11cf · 2015-05-13T10:02:29.000-04:00
diff --git a/client/stylesheets/application.sass b/client/stylesheets/application.sass
@@ -46,6 +46,7 @@
 @import 'structures/heading'
 @import 'structures/hero'
 @import 'structures/icon'
+@import 'structures/inlineCode'
 @import 'structures/inlineConsole'
 @import 'structures/label'
 @import 'structures/layout'
diff --git a/client/stylesheets/foundation/_base.sass b/client/stylesheets/foundation/_base.sass
@@ -97,5 +97,5 @@ strong, b
 em, i
   font-style: italic
 
-code
+code, kbd
   font-family: $b-fontFamily-mono
diff --git a/client/stylesheets/structures/_inlineCode.sass b/client/stylesheets/structures/_inlineCode.sass
@@ -0,0 +1,19 @@
+// *************************************
+//
+//   Inline Code
+//   -> Decorated snippet
+//
+// -------------------------------------
+//   Template (Haml)
+// -------------------------------------
+//
+// %code.inlineCode
+//
+// *************************************
+
+.inlineCode
+  border-radius: 4px
+  border: 1px solid $c-highlight
+  display: inline-block
+  padding-left: 0.5ch
+  padding-right: 0.5ch
diff --git a/views/partials/_hero_console.jade b/views/partials/_hero_console.jade
@@ -1,10 +1,14 @@
 .card.inlineConsole-card.pal--m
   h3.h.h--2.h--light Ready to try JavaScript?
 
-  p.tfh.tss.
-    Begin learning here by typing in your first name surrounded by
-    quotation marks, and ending with a semicolon. For example, I'd
-    type my name "Gregg"; and then hit enter.
+  p.tfh.tss
+    | Begin learning here by typing in your first name surrounded by 
+    | quotation marks, and ending with a semicolon. For example, I’d 
+    | type my name 
+    code.inlineCode "Gregg";
+    |  and then hit 
+    kbd.inlineCode enter
+    | .
 
   form.inlineConsole.js-console(action='')
     span.inlineConsole-icon.inlineConsole-icon--caret
