WIP adding icons for guide steps

_layouts/default.html

@@ -7,6 +7,8 @@
       <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
     <script src="/js/prefixfree.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
+    <script src="/js/guides.js"></script>
     <link href="/css/bootstrap.css" rel="stylesheet" />
     <link href="/css/code.css" rel="stylesheet" />
     <link href="/css/style.css" rel="stylesheet" />
@@ -53,4 +55,4 @@
       //]]>
     </script>
   </body>
-</html>
+</html>

_posts/2012-04-18-app.markdown

@@ -10,15 +10,26 @@ permalink: app
 
 **Make sure you have Rails installed.** [**Follow the installation guide**](/install) to get set up.
 
+## Get to know the tools
 
-## Step 0: Get to know the tools
+<div class="indent" markdown="1">
 
-* Text editor: [Sublime Text](http://www.sublimetext.com), [Komodo Edit](http://www.activestate.com/komodo-edit), Vim, Emacs, and Gedit are examples of text editors your can use for writing code and editing files.
-* Terminal (known as Command Prompt on Windows): where you start the Rails server and run commands.
-* Web browser (Firefox, Safari, Chrome): for viewing your application.
+<h3><i class="icon-text-editor">&nbsp;</i></h3>
+### Text Editor
 
+[Sublime Text](http://www.sublimetext.com), [Komodo Edit](http://www.activestate.com/komodo-edit), Vim, Emacs, and Gedit are examples of text editors your can use for writing code and editing files.
 
-## Step 1: Creating the application
+<h3><i class="icon-prompt">&nbsp;</i></h3>
+### Terminal (known as Command Prompt on Windows)
+Where you start the rails server and run commands.
+
+<h3><i class="icon-browser">&nbsp;</i></h3>
+### Web browser
+(Firefox, Safari, Chrome) for viewing your application.
+
+</div>
+
+## *1.*Creating the application
 
 We're going to create a new Rails app called *railsgirls*.
 
@@ -44,8 +55,7 @@ Hit `CTRL-C` in the terminal to quit the server.
 
 **Coach:** Explain what each command does. What was generated? What does the server do?
 
-
-## Step 2: Create Idea scaffold
+## *2.*Create Idea scaffold
 
 We're going to use Rails' scaffold functionality to generate a starting point that allows us to list, add, remove, edit, and view things; in our case ideas.
 
@@ -61,7 +71,7 @@ Open [http://localhost:3000/ideas](http://localhost:3000/ideas) in your browser.
 
 Hit `CTRL-C` to quit the server again when you've clicked around a little.
 
-## Step 3: Design
+## *3.*Design
 
 **Coach:** Talk about the relationship between HTML and Rails. What part of views is HTML and what is Embedded Ruby (ERB)? What is MVC and how does this relate to it? (Models and controllers are responsible for generating the HTML views.)
 

css/style.css

@@ -23,6 +23,14 @@ h2 {
   font-size: 2em;
   margin: 1em 0 0.5em;
 }
+h2 em {
+  display: inline-block;
+  width: 50px;
+  font-style: normal;
+  font-weight: bold;
+  margin-left: -50px;
+  color: #CCC;
+}
 
 h3 {
   font-weight: normal;
@@ -60,6 +68,7 @@ hr {
   margin: 2em 0;
 }
 
+
 header {
   height: 70px;
   color: #fff;
@@ -109,15 +118,16 @@ footer {
   text-align: center;
 }
 
-article.container {
-  padding: 20px 0;
-}
 
 footer a {
   color: #111;
   border-color: #111;
 }
 
+.indent {
+  margin-left: 70px;
+}
+
 .home {
   list-style: none;
   margin: 0;
@@ -192,4 +202,46 @@ footer a {
 .hero {
   padding: 20px 320px 20px 0;
   background: url(../images/guides-hero.png) right 80px no-repeat;
-}
+}
+.highlight {
+  margin-left: 40px;
+}
+/* Icons for the guide */
+i.icon-text-editor, i.icon-prompt, i.icon-browser {
+  background-position: 0 0;
+  display: inline-block;
+  margin-left: -70px;
+  float: left;
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+}
+i.icon-text-editor {
+  background-image: url("/images/icon-text-editor.png");
+}
+
+i.icon-prompt{
+  background-image: url("/images/icon-prompt.png");
+}
+
+i.icon-browser {
+  background-image: url("/images/icon-browser.png");
+}
+i.icon-small-text-editor, i.icon-small-prompt, i.icon-small-browser {
+  background-position: 0 0;
+  display: inline-block;
+  margin-left: 0px;
+  float: left;
+  width: 50px;
+  height: 20px;
+  line-height: 20px;
+}
+i.icon-small-text-editor {
+  background-image: url("/images/icon-small-text-editor.png");
+}
+i.icon-small-prompt{
+  background-image: url("/images/icon-small-prompt.png");
+}
+i.icon-small-browser {
+  background-image: url("/images/icon-small-browser.png");
+}

js/guides.js

@@ -0,0 +1,5 @@
+$(document).ready(function() {
+  $("code.sh, code.bat").closest('.highlight').before('<i class="icon-small-prompt"></i>');
+  $("code.erb, code.html, code.ruby, code.css").closest('.highlight').before('<i class="icon-small-text-editor"></i>');
+  $("code.browser").closest('.highlight').before('<i class="icon-small-browser"></i>');
+});