Style the sidebar tutorial

h/static/styles/app.scss

@@ -15,6 +15,7 @@ $base-line-height: 20px;
 @import './publish-annotation-btn';
 @import './search-status-bar';
 @import './share-link';
+@import './sidebar-tutorial';
 @import './signin-control';
 @import './simple-search';
 @import './top-bar';

h/static/styles/sidebar-tutorial.scss

+.sidebar-tutorial__header {
+  color: $color-cardinal;
+  font-weight: $title-font-weight;
+}
+
+/* We want an ordered list in which the numbers are aligned with the text
+   above (not indented or dedented), and wrapped lines in list items are
+   aligned with the first character of the list item (not the number, i.e
+   they're indented):
+
+       This is a list:
+
+       1. This is a list item.
+       2. This is a long list item
+          that wraps.
+       3. This is another list item.
+
+   What's more, we want the numbers to be a different color to the text of the
+   list items, which means we need to use ::before content for them.
+
+   This appears to be much harder than you'd think.
+
+   The code below comes from this Stack Overflow answer:
+   http://stackoverflow.com/questions/10428720/how-to-keep-indent-for-second-line-in-ordered-lists-via-css/17515230#17515230
+*/
+.sidebar-tutorial__list {
+  counter-reset: sidebar-tutorial__list;
+  display: table;
+  padding: 0;
+}
+.sidebar-tutorial__list-item {
+  list-style: none;
+  counter-increment: sidebar-tutorial__list;
+  display: table-row;
+}
+.sidebar-tutorial__list-item::before {
+  content: counter(sidebar-tutorial__list) ".";
+  display: table-cell; /* aha! */
+  text-align: right;
+  padding-right: .3em;
+  color: $gray-light;
+}
+
+.sidebar-tutorial__list-item-content {
+  margin-top: 1em; /* Put vertical space in-between list items, equal to the
+                      space between normal paragraphs.
+                      Note: This also puts the same amount of space above the
+                      first list item (i.e. between the list and whatever's
+                      above it). */
+}

h/templates/client/sidebar_tutorial.html

 <div class="sheet" ng-if="vm.showSidebarTutorial()">
   <i class="close h-icon-close" role="button" title="Close"
      ng-click="vm.dismiss()"></i>
-  <h1>How to get started</h1>
-  <ol>
-    <li>
+  <h1 class="sidebar-tutorial__header">How to get started</h1>
+  <ol class="sidebar-tutorial__list">
+    <li class="sidebar-tutorial__list-item">
+      <p class="sidebar-tutorial__list-item-content">
         To create an annotation, select text and click the
-      <i class="h-icon-insert-comment"></i> button.
+        <i class="h-icon-insert-comment"></i>&nbsp;button.
+      </p>
     </li>
-    <li>
+    <li class="sidebar-tutorial__list-item">
+      <p class="sidebar-tutorial__list-item-content">
         To create a highlight, select text and click the
-      <i class="h-icon-border-color"></i> button.
+        <i class="h-icon-border-color"></i>&nbsp;button.
+      </p>
     </li>
-    <li>
+    <li class="sidebar-tutorial__list-item">
+      <p class="sidebar-tutorial__list-item-content">
         To reply to an annotation, click the
-      <i class="h-icon-reply"></i> <strong>Reply</strong> link.
+        <i class="h-icon-reply"></i>&nbsp;<strong>Reply</strong>&nbsp;link.
+      </p>
     </li>
-    <li>
+    <li class="sidebar-tutorial__list-item">
+      <p class="sidebar-tutorial__list-item-content">
         To share an annotated page, click the
-      <i class="h-icon-share"></i> button at the top.
+        <i class="h-icon-share"></i>&nbsp;button at the top.
+      </p>
     </li>
-    <li>
+    <li class="sidebar-tutorial__list-item">
+      <p class="sidebar-tutorial__list-item-content">
         To create a private group, select <strong>Public</strong>,
-      open the dropdown, click <strong>+ New group</strong>.
+        open the dropdown, click&nbsp;<strong>+&nbsp;New&nbsp;group</strong>.
+      </p>
     </li>
   </ol>
 </div>