Merge pull request 'Formatting for the user guide.' (#16) from feature/user-guide into master

Reviewed-on: #16

app/styles/app.scss

@@ -9,4 +9,6 @@
 
 @import "components/help";
 
-@import "components/footer";
+@import "components/footer";
+
+@import "components/user-guide"

app/styles/components/user-guide.scss

@@ -0,0 +1,11 @@
+.help-video
+{
+  max-width: 90%;
+  height: auto;
+  max-height: 75%;
+  text-align:center;
+}
+
+.help-img {
+    border: 2px solid grey;
+}

app/templates/application.hbs

@@ -24,15 +24,13 @@
         <a class="nav-link" href="/contact-us">Contact Us</a>
       </li>
     </ul>
-    <a href="#" data-toggle="modal" data-target="#helpModal"><div id="help-button-desktop" title="Get Help">?</div></a>
+    <LinkTo @route="user-guide"><div id="help-button-desktop" title="Get Help">?</div></LinkTo>
   </div>
 </nav>
 
 <ScriptureNavBar/>
 
-<a href="#" data-toggle="modal" data-target="#helpModal"><div id="help-button-mobile" title="Get Help">?</div></a>
-
-<HelpModal/>
+<LinkTo @route="user-guide"><div id="help-button-mobile" title="Get Help">?</div></LinkTo>
 
 {{outlet}}
 

app/templates/user-guide.hbs

@@ -0,0 +1,17 @@
+<div class="container-sm mt-3">
+    <div class="alert alert-info" role="alert">
+    This site is still under construction, so don't be surprised if things look a little different from the examples below. 
+    </div>
+  <h2 class="mt-4">How to Use This Site</h2>
+  <p class="mt-4">Here are a few visual aids to help you learn the basics of using this site.</p>
+  <h3>Screenshots</h3>
+  <p>(Click the image to open large in a new tab.)</p>
+  <a href="/assets/images/desk.jpg" target="_blank"><img src="/assets/images/desk.jpg" class="help-img img-fluid"></a>
+
+  <h3 class="mt-4">Video tutorial</h3>
+    <video controls="controls" src="//btr.mrgreekgeek.com/btr_getting_started.mp4" class="help-video" poster="/assets/images/vid-thumb.jpg">
+    Your browser does not support the HTML5 Video element.
+    </video>
+
+
+</div>