Added syntax highlighting to dialog boxes, improved look of green box code samples

sass/_project-sass/_project-Tutorial.scss

@@ -68,6 +68,24 @@
         left: 250px;
         top: 250px;
       }
+      pre, code {
+        padding: 0;
+        margin: 0;
+        background: none;
+        color: #666;
+        border: none;
+        display: block;
+        font-size: 100%;
+      }
+      pre {
+        padding-top: .1em;
+      }
+    }
+  }
+  .welcome {
+    pre, code {
+      background: #16414c;
+      font-size: 100%;
     }
   }
 }

views/tutorial/html/3.erb

@@ -3,11 +3,11 @@
     Great work! Let's move on to writing your first tag.
     <!-- Check out your site at <a href="">victoria.neocities.org</a>. -->
   </div>
-  <div class="dialogue" style="left: 300px; top: 25px; width: 250px">
+  <div class="dialogue" style="left: 300px; top: 0px; width: 250px">
     Let's make your name a heading by putting the <strong>h1 tag</strong> around it. This helps to visually separate content on your site.
   </div>
-  <div class="dialogue" style="left: 330px; top: 120px; width: 250px">
+  <div class="dialogue" style="left: 330px; top: 100px; width: 250px">
-    Try using an h1 tag by changing the text to something like this:<strong><span id="answer"></span></strong>
+    Try using an h1 tag by changing the text to something like this: <pre><code class="html"><span id="answer"></span></code></pre>
     and click save.
   </div>
 </div>
@@ -20,7 +20,7 @@
 </div>
 
 <script>
-  $('#answer').text('<h1>'+sessionStorage.getItem('name')+'\'s Web Site</h1>')
+  $('#answer').text('<h1>'+sessionStorage.getItem('name')+'\'s Website</h1>')
 
   function checkHomework() {
     var html = editor.getValue()

views/tutorial/html/4.erb

@@ -4,7 +4,7 @@
   </div>
   <div class="dialogue" style="left: 290px; top: -10px; width:190px">
     To make a paragraph, surround your text with the <strong>&lt;p&gt;</strong> tag. So it should look something like
-    <strong>&lt;p&gt;Welcome!&lt;/p&gt;</strong>
+    <pre><code class="html">&lt;p&gt;Welcome!&lt;/p&gt;</code></pre>
   </div>
 </div>
 

views/tutorial/html/5.erb

@@ -2,10 +2,10 @@
   <div class="dialogue" style="left:20px">
     You're writing HTML! You're doing it! Everything you need to know is just another tag!
   </div>
-  <div class="dialogue" style="top: -20px; width: 320px">
+  <div class="dialogue" style="top: -30px; width: 320px">
     <p>For example, a link to another site looks like this:</p>
 
-    <p><strong>&lt;a href="//neocities.org"&gt;Check out Neocities!&lt;/a&gt;</strong></p>
+    <p><pre><code class="html">&lt;a href="//neocities.org"&gt;Check out Neocities!&lt;/a&gt;</code></pre></p>
 
     <p>Add a link to your favorite site to<br> the end of the paragraph, right<br> before the &lt;/p&gt; closing tag!</p>
   </div>
@@ -13,14 +13,11 @@
 
 <div class="welcome">
   <h4>Nesting</h4>
-  <p>
+  <p>Tags always need to be nested properly, like Russian dolls. So this is okay:</p>
-    Tags always need to be nested properly, like Russian dolls. So this is okay:
   <pre><code class="html"><%= erb '<p>Welcome! <a href="//neocities.org">Link!</a></p>', layout: false %></code></pre>
 
-    But this is not correct:
+  <p>But this is not correct:</p>
-
   <pre><code class="html"><%= erb '<p>Welcome! <a href="//neocities.org">Link!</p></a>', layout: false %></code></pre>
-  </p>
 </div>
 
 <script>

views/tutorial/html/6.erb

@@ -7,8 +7,8 @@
   <div class="dialogue" style="top: 20px; left: 360px">
     Your Neocities web directory already includes a portrait of me called <strong>cat.png</strong>.
   </div>
-  <div class="dialogue" style="top: 140px; left: 410px">
+  <div class="dialogue" style="top: 145px; left: 390px; width:200px">
-    Add it to your page like so: <strong>&lt;img src="/cat.png"&gt;</strong>
+    Add it to your page like so: <pre><code class="html">&lt;img src="/cat.png"&gt;</code></pre>
   </div>
   <div class="dialogue" style="top: 230px; left: 420px">
     That's it! No closing tag needed for images.

views/tutorial/html/7.erb

@@ -1,13 +1,12 @@
 <div class="comic" style="height: 550px; background-image: url(/img/tutorial/ch1pg7.png); background-size: 515px;margin-top:7em">
-  <div class="dialogue" style="left: 0;top:-50px;">
+  <div class="dialogue" style="left: 0;top:-70px;">
     Now maybe your website needs a list. Here's how an unordered list looks:
-    <div style="text-align: left; font-weight: bold">
+    <pre style="text-align:left;"><code class="html">&lt;ul&gt;
-    &lt;ul&gt;<br>
+  &lt;li&gt;websites&lt;/li&gt;
-&nbsp;&nbsp;&lt;li&gt;websites&lt;/li&gt;
+  &lt;li&gt;yarn&lt;/li&gt;
-&nbsp;&nbsp;&lt;li&gt;yarn&lt;/li&gt;
+  &lt;li&gt;catnip&lt;/li&gt;
-&nbsp;&nbsp;&lt;li&gt;catnip&lt;/li&gt;<br>
+&lt;/ul&gt;
-    &lt;/ul&gt;
+    </code></pre>
-    </div>
   </div>
   <div class="dialogue" style="left: 300px; top: -10px;">
     First, add a list to your page, but replace my favorite activities with your own!

views/tutorial/html/8.erb

@@ -1,9 +1,11 @@
 <div class="comic" style="height: 530px; background-image: url(/img/tutorial/ch1pg8.png); background-size: 489px; margin-top:1em">
-  <div class="dialogue" style="top: 50px; left: 0; width: 380px">
+  <div class="dialogue" style="top: 25px; left: 0; width: 380px">
     Now add a link to one of your list items. If nested properly, it should look similar to this:
     <br>
     <div class="txt-Left">
-      <strong>&lt;li&gt;<br>&nbsp;&nbsp;&lt;a href="http://yarn.com"&gt;Yarn&lt;/a&gt;<br>&lt;/li&gt;</strong>
+      <pre style="text-align:left;"><code class="html">&lt;li&gt;
+  &lt;a href="http://yarn.com"&gt;Yarn&lt;/a&gt;
+&lt;/li&gt;</code></pre>
     </div>
   </div>
 </div>