Added pictures with text laying over them in home and tutoring page for style purposes.

3 files changed, 68 insertions, 36 deletions

diff --git a/src/components/mao-home.js b/src/components/mao-home.js
index 279bac4..ac9c04c 100644
--- a/src/components/mao-home.js
+++ b/src/components/mao-home.js
@@ -10,49 +10,39 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 import { html } from '@polymer/lit-element';
 import { PageViewElement } from './page-view-element.js';
-import { connect } from 'pwa-helpers/connect-mixin.js';
-
-// This element is connected to the Redux store.
-import { store } from '../store.js';
-
-//These are the actions needed by this element.
-import { signIn, signOut } from '../actions/firebase.js';
-
-// We are lazy loading its reducer.
-import firebase from '../reducers/firebase.js';
-
-store.addReducers({
-  firebase
-});
 
 // These are the shared styles needed by this element.
 import { SharedStyles } from './shared-styles.js';
 
 // Import paper elements
-import '@polymer/paper-input/paper-input.js';
-import '@polymer/paper-button/paper-button.js';
+import '@polymer/paper-card/paper-card.js';
 
-class MaoHome extends connect(store)(PageViewElement) {
+class MaoHome extends PageViewElement {
   _render(props) {
     return html`
-      ${SharedStyles}
-      
-      <section>
-        <h2>Welcome ${props.authMessage}</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nisi orci. Maecenas sollicitudin diam in diam efficitur cursus. Morbi sollicitudin in justo tincidunt placerat. Integer tincidunt elementum nisi, eu ornare dolor lacinia eget. Fusce pulvinar massa eget odio placerat, commodo molestie ipsum tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse porttitor id purus eu cursus. Suspendisse arcu nulla, mattis vel hendrerit et, malesuada a elit. Nam at diam ornare, aliquet est sed, malesuada metus. Cras nec enim vel nibh tincidunt euismod ut et enim. Etiam pharetra eros in sodales iaculis. Duis sagittis urna et cursus mollis. Cras tempor rutrum est. Praesent sollicitudin ligula at laoreet placerat. Praesent tortor dui, semper in sapien non, pharetra luctus turpis.</p>
+    ${SharedStyles}
 
+      <section class="img-section">
+        <div class="container">
+          <img src="http://www.advancedroofingandsheetmetal.com/wp-content/uploads/2016/02/community-school-naples.jpg" alt="Maths">
+          <div class="centered">We &hearts; Math At CSN</div>
+        </div>
       </section>
-    `;
-  }
 
-  static get properties() { return {
-    // This is the data from the store.
-    signedIn:     Boolean,
-    authMessage:  String,
-    hours:        Number
-  }}
+      <section class="img-section">
+        <div class="container">
+          <img src="https://i.imgur.com/BkbHV33.jpg" alt="Maths">
+          <div class="centered">Becuase... Math Is Beautiful</div>
+        </div>
+      </section>
 
-  _stateChanged(state) {
+      <section class="img-section">
+        <div class="container">
+          <img src="https://nerdymamma.com/wp-content/uploads/2017/01/Six-Simple-Phrases-to-Encourage-Girls-to-Love-Science-Math-3.jpg" alt="Maths">
+          <div class="centered">CSN Encourages Math Through MAØ</div>
+        </div>
+      </section>
+    `;
   }
 
 }
diff --git a/src/components/mao-tutoring.js b/src/components/mao-tutoring.js
index 707f0be..a98ee1d 100644
--- a/src/components/mao-tutoring.js
+++ b/src/components/mao-tutoring.js
@@ -96,7 +96,7 @@ class MaoTutoring extends connect(store)(PageViewElement) {
       }
 
       .subjectCard, .hopeCard {
-        --paper-card-background-color: #ffffff;
+        --paper-card-background-color: #87ceeb;
       }
 
       paper-item {
@@ -147,6 +147,13 @@ class MaoTutoring extends connect(store)(PageViewElement) {
 
       </style>
 
+      <section class="img-section">
+        <div class="container">
+          <img src="https://ak0.picdn.net/shutterstock/videos/2342780/thumb/1.jpg" alt="Maths">
+          <div class="centered">Tutoring</div>
+        </div>
+      </section>
+
       <section hidden="${!props.signedIn}">
 
         <paper-card
@@ -227,10 +234,6 @@ class MaoTutoring extends connect(store)(PageViewElement) {
       </section>
 
       <section>
-        <div class="title">
-          <h2 class="underline">Tutoring</h2>
-        </div>
-
         <div class="tutoring-grid">
           <paper-card class="subjectCard">
             <div class="card-actions">
diff --git a/src/components/shared-styles.js b/src/components/shared-styles.js
index 02ea4bf..f75fa9c 100644
--- a/src/components/shared-styles.js
+++ b/src/components/shared-styles.js
@@ -38,6 +38,45 @@ export const SharedStyles = html`
     color: var(--app-dark-text-color);
   }
 
+
+  .img-section {
+    max-width: 100%;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+
+    line-height: 0;
+  }
+
+  .img-section > div {
+    max-width: 100%;
+    width: 100%;
+    margin-bottom: 0;
+  }
+
+  .container > img {
+    width:100%;
+  }
+
+  .container {
+    position: relative;
+    text-align: center;
+    color: white;
+
+    margin-bottom: 0;
+  }
+
+  .centered {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    font-weight: bolder;
+    font-size: 200%;
+    line-height: normal;
+  }
+
   @media (min-width: 460px) {
     h2 {
       font-size: 36px;