Friends and Family Sabbath Updates (closes #86)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bolingbrook-church",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "license": "MIT",
   "angular-cli": {},
   "scripts": {

src/app/components/pages/friends-and-family.html

@@ -3,6 +3,20 @@
   <section class="white">
     <div class="content">
       <h1>Worshiping with Family on the Sabbath</h1>
+
+      <a class="host-card" href="./assets/host-card.jpg">
+        <img src="./assets/host-card.jpg" />
+      </a>
+
+      <div class="video">
+        <iframe id="video"
+                src="https://www.youtube.com/embed/vddSwV54QrU?enablejsapi=1"
+                frameborder="0"
+                webkitallowfullscreen=""
+                mozallowfullscreen=""
+                allowfullscreen="">
+        </iframe>
+      </div>
 
       <h3>Focus on Rest and Restoration</h3>
       <ul>

src/app/components/pages/friends-and-family.scss

@@ -0,0 +1,29 @@
+@import '../atoms/breaks';
+
+@mixin sized($width) {
+  width: $width;
+  height: $width * 3 / 4;
+}
+
+div.video {
+  padding: 45px 0;
+  text-align: center;
+
+  iframe {
+    @include sized(640px);
+
+    @include break(tiny)  { @include sized(360px); }
+    @include break(micro) { @include sized(300px); }
+  }
+}
+
+a.host-card {
+  flex: 100%;
+  display: block;
+
+  img {
+    display: block;
+    max-width: 100%;
+    margin: auto;
+  }
+}

src/app/components/pages/friends-and-family.ts

@@ -1,7 +1,8 @@
 import { Component }    from '@angular/core';
 
 @Component({
-  templateUrl: './friends-and-family.html'
+  templateUrl: './friends-and-family.html',
+  styleUrls: [ './friends-and-family.scss' ]
 })
 export class FriendsAndFamilyComponent {
 }