Merge pull request #96 from ThinkDeepTech/hm/nav-styles

packages/deep-navbar/deep-navbar.js

@@ -18,10 +18,13 @@ export class DeepNavbar extends LitElement {
   static get styles() {
     return [
       css`
+        :host {
+          height: 150px;
+        }
         nav {
           display: grid;
           grid-gap: 0.6rem;
-          grid-template-columns: repeat(12, 1fr);
+          grid-template-columns: repeat(14, 1fr);
           align-items: center;
 
           height: inherit;
@@ -98,11 +101,9 @@ export class DeepNavbar extends LitElement {
    */
   _menuItem(route, index) {
     return route
-      ? html` <!-- NOTE: The 12 in this comes from the fact that the nav grid is defined having 12 fractional units.
-        Changing that will impact this positioning. -->
-          <div style="grid-column-start: ${12 - index};">
-            <a href="${route.path}"> ${route.name} </a>
-          </div>`
+      ? html` <div style="grid-column-start: ${14 - index};">
+          <a href="${route.path}"> ${route.name} </a>
+        </div>`
       : html``;
   }
 }

packages/deep-template-consultancy/deep-consultancy-page-home.js

@@ -1,11 +1,38 @@
 import { html, css, LitElement } from 'lit-element';
 
 export class DeepConsultancyPageHome extends LitElement {
+  static get properties() {
+    return {
+      slogan: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.slogan = '';
+  }
+
   static get styles() {
-    return css``;
+    return css`
+    .banner {
+      background: url('img/nordwood-themes-unsplash.jpg') no-repeat center center fixed;
+      background-size: cover;
+      height: 600px;
+      width: 100%;
+    }
+    .slogan {
+      position: absolute;
+      top: 50vw;
+      left 50vw;
+    }
+    `;
   }
   render() {
-    return html``;
+    return html`
+      <div class="banner"></div>
+      ${this.slogan.length > 0 ? html`<h3 class="slogan">${this.slogan}</h3>` : html``}
+    `;
   }
 }