Merge pull request 'Design Updates' (#10) from design-updates into master

Reviewed-on: #10

app/components/help-modal.hbs

@@ -0,0 +1,19 @@
+<div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="HelpScreen" aria-hidden="true">
+  <div class="modal-dialog modal-xl">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="HelpScreen">How To Use This Site</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+		<div class="desktop-img"></div>
+		<div class="mobile-img"></div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>

app/styles/app.scss

@@ -7,8 +7,6 @@
 
 @import "components/table";
 
-#page_header {
-  margin-bottom: 0;
-/*  background-image: url("/assets/images/banner_bkg.png"); */
-}
+@import "components/help";
 
+@import "components/footer";

app/styles/components/footer.scss

@@ -0,0 +1,3 @@
+footer .col-sm-4 a {
+    color:#f8f9fa;
+  }

app/styles/components/help.scss

@@ -0,0 +1,67 @@
+#help-button-desktop {
+    background-color: lightgray;
+    margin: 10px;
+    width: 1.5em;
+    height: 1.5em;
+    border-radius: 100%;
+    text-align: center;
+    float: right;
+    font-weight: 900;
+	font-size:1.5em;
+	display:block;
+}
+
+#help-button-desktop:hover {
+    background-color: white;
+}
+
+#help-button-mobile:hover {
+	background-color:darkgrey;
+}
+
+@media only screen and (min-width: 991.97px) {
+
+a #help-button-mobile {
+	display:none;
+	visibility: hidden;
+}
+
+.desktop-img {
+    background-image: url(/public/assets/images/desk.jpg);
+	width:100%;
+	height:851px;
+	max-height:100%;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+}
+
+@media only screen and (max-width: 991.98px) {
+
+a #help-button-mobile {
+    background-color: lightgray;
+    margin: 10px;
+    width: 1.5em;
+    height: 1.5em;
+    border-radius: 100%;
+    text-align: center;
+    float: right;
+    font-weight: 900;
+	font-size:1.5em;
+	display:block;
+}
+
+a #help-button-desktop {
+	display:none;
+	visibility: hidden;	
+}
+
+.mobile-img {
+    background-image: url(/public/assets/images/mobile.jpg);
+	width:100%;
+	height:1348px;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+}

app/styles/components/words.scss

@@ -19,5 +19,5 @@ table.word-details td.selected {
 }
 
 .verse-greek-text span.selected {
-  color: lightblue;
+  background-color: lightblue;
 }

app/templates/application.hbs

@@ -1,6 +1,6 @@
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
   <a class="navbar-brand" href="/">
-    <img src="/assets/images/logo-head.svg" width="166" height="50" class="d-inline-block align-top" alt="Wycliffe Associates">
+    <img src="/assets/images/btr-logo-white.svg" width="auto" height="40em" class="d-inline-block align-top" alt="Wycliffe Associates">
   </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
@@ -20,16 +20,20 @@
       <li class="nav-item">
         <LinkTo @route="user-guide" class="nav-link">How to Use the Site</LinkTo>
       </li>
+      <li class="nav-item">
+        <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>
   </div>
 </nav>
 
-<div class="jumbotron jumbotron-fluid p-2 m-0" id="page_header">
-  <img src="/assets/images/sample-logo-r.svg" class="mx-auto d-block" alt="" height="145">
-  <!--<h1 class="text-light">Biblical Resources for Translators</h1>-->
-</div>
-
 <ScriptureNavBar/>
+
+<a href="#" data-toggle="modal" data-target="#helpModal"><div id="help-button-mobile" title="Get Help">?</div></a>
+
+<HelpModal/>
+
 {{outlet}}
 
 <footer class="card-fluid bg-dark mt-5">
@@ -38,8 +42,8 @@
 			<div class="row mt-4">
 				<div class="col-sm-4 mb-4">
 					<h4 class="text-light text-center mb-3">About This Site</h4>
-					<p class="text-light">Developed by Wycliffe Associates and our partners to provide access to tools and resources needed to complete the work of Bible translation.
-					</p>
+					<p class="text-light">Developed by Wycliffe Associates and our partners to provide access to tools and resources needed to complete the work of Bible translation.</p>
+          <p class="text-light"><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.</p>
 				</div>
 				<div class="col-sm-4 mb-3 text-center">
 					<h4 class="text-light mb-3">Find Us</h4>
@@ -63,7 +67,6 @@
 		</div>
 	</div>
 	<div class="card-footer text-muted text-center">
-		© 2021 Bible Translation Resources. All Rights Reserved
 		<div class="mt-3 mb-2"><a href="http://www.wycliffeassociates.org"><img width="266" height="50" src="/assets/images/wycliffe-associates-logo-l.svg"></a></div>
 	</div>
 </footer>