Initial implementation of tutorial pages

src/scss/classes.scss

@@ -5,6 +5,16 @@ Copyright (C) 2015 by Redwood Labs
 All rights reserved.
 */
 
+.byline {
+    margin: 0.25em 0 2em 0;
+
+    p {
+        font-family: $font-family-normal;
+        font-size: $font-size-normal;
+        font-style: italic;
+    }
+}
+
 .centered {
     text-align: center;
 }
@@ -22,6 +32,20 @@ All rights reserved.
 
 .error-new { background: $color-error-new !important; }
 
+.hidden {
+    max-height: 0;
+    opacity: 0;
+}
+
+.mainBody {
+    position: relative; width: 81.25%;
+
+    display: inline-block;
+    padding: 1em;
+    padding-top: 2em;
+    vertical-align: top;
+}
+
 .sidebar {
     position: relative; width: 18.75%;
 
@@ -53,15 +77,6 @@ All rights reserved.
     }
 }
 
-.mainBody {
-    position: relative; width: 81.25%;
-
-    display: inline-block;
-    padding: 1em;
-    padding-top: 2em;
-    vertical-align: top;
-}
-
 .section {
     margin-top: 3em;
 
@@ -86,4 +101,4 @@ All rights reserved.
         background: white;
         padding: 1em;
     }
-}
+}

src/scss/tags.scss

@@ -48,6 +48,12 @@ h1 {
         font-family: $font-family-header;
         font-size: $font-size-xx-large;
     }
+
+    &.name {
+        font-family: $font-family-header;
+        font-size: $font-size-x-large;
+        margin: 0;
+    }
 }
 
 h2 {

src/scss/templates/index.scss

@@ -23,4 +23,5 @@ All rights reserved.
 @import 'mod_page';
 @import 'mod_selector';
 @import 'stack';
+@import 'tutorial';
 @import 'video';

src/scss/templates/item_page.scss

@@ -24,22 +24,6 @@ All rights reserved.
     }
 
     .mainBody {
-        h1.name {
-            font-family: $font-family-header;
-            font-size: $font-size-x-large;
-            margin: 0;
-        }
-
-        .byline {
-            display: none;
-            margin: 0.25em 0 2em 0;
-
-            p {
-                font-family: $font-family-normal;
-                font-size: $font-size-normal;
-                font-style: italic;
-            }
-        }
 
         .recipes {
             display: none;

src/scss/templates/mod_page.scss

@@ -23,22 +23,6 @@ All rights reserved.
 
     .mainBody {
 
-        .name {
-            font-family: $font-family-header;
-            font-size: $font-size-x-large;
-            margin: 0;
-        }
-
-        .byline {
-            margin: 0.25em 0 2em 0;
-
-            p {
-                font-family: $font-family-normal;
-                font-size: $font-size-normal;
-                font-style: italic;
-            }
-        }
-
         .description {
             margin-bottom: 4em;
 

src/scss/templates/tutorial.scss

@@ -0,0 +1,28 @@
+/*
+Crafting Guide - tutorial.scss
+
+Copyright (C) 2015 by Redwood Labs
+All rights reserved.
+*/
+
+.view__tutorial {
+    position: relative;
+    display: inline-block;
+    margin-left: 1em;
+    vertical-align: top;
+
+    &:first-child {
+        margin-left: 0;
+    }
+
+    .caption {
+        position: relative; width: 100%;
+        display: block;
+
+        p {
+            margin-top: 0.5em;
+            font-weight: bold;
+            text-align: center;
+        }
+    }
+}