Added video section

public/nav/navbar/Navbar.jsx

@@ -42,8 +42,8 @@ class Navbar extends React.Component {
 
   render() {
     return (
-      <section className="o-navbar__section is-stuck">
+      <section className="o-navbar is-stuck">
-        <nav className="o-navbar">
+        <nav className="o-navbar__nav">
 
           <a href="/" className="o-navbar__logo-container">
             <img

public/page/home/Homepage.jsx

@@ -33,7 +33,7 @@ class Homepage extends React.Component {
   render() {
     return (
       <Page style="home-page">
-        <VideoSection full>
+        <VideoSection full mp4={ require('./../../videos/about/programming/programming.mp4') }>
           Test
         </VideoSection>
       </Page>

public/section/Section.jsx

@@ -30,7 +30,11 @@ class Section extends React.Component {
 
   render() {
     return (
-      <section className={"c-section" + (this.props.full?" c-section--full":"") }>
+      <section className={
+          "c-section" +
+          (this.props.full?" c-section--full":"") +
+          (this.props.className ? " "+this.props.className : "")
+      }>
         { this.props.children }
       </section>
     );

public/section/video/VideoSection.jsx

@@ -23,6 +23,7 @@
 
 import React from 'react';
 import Section from './../Section';
+import Video from './../../video/Video';
 
 class VideoSection extends React.Component {
   constructor(props) {
@@ -31,10 +32,11 @@ class VideoSection extends React.Component {
 
   render() {
     return (
-      <Section full={this.props.full}>
+      <Section full={this.props.full} className="c-video-section">
-        <video className="c-video-section">
+        <Video
-
+          className="c-video-section__video"
-        </video>
+          sources={ this.props.sources ? this.props.sources : this.props }
+        />
 
         { this.props.children }
       </Section>

public/styles/components/_video-section.scss

@@ -8,4 +8,15 @@
  *    1.0.0 - 2018/05/03
  */
 .c-video-section {
+  position: relative;
+
+  &__video {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
 }

public/styles/index.scss

@@ -28,6 +28,7 @@
 @import './settings/colors.scss';
 @import './settings/responsive.scss';
 @import './settings/typography.scss';
+@import './settings/z.scss';
 
 //Tools
 @import './tools/flex.scss';

public/styles/objects/_navbar.scss

@@ -5,6 +5,7 @@
  *  Dependencies:
  *    styles/settings/colors.scss
  *    styles/settings/typography.scss
+ *    styles/settings/z.scss
  *    styles/tools/flex.scss
  *    styles/tool/list.scss
  *
@@ -14,21 +15,21 @@
 $o-navbar--link-thickness: 5px;
 
 .o-navbar {
-  @extend %t-flexbox;
+  z-index: $s-z--navbar;
-  @include t-align-items(stretch);
+
-  background: $s-color--navbar;
+  &.is-stuck {
-  color: white;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+  }
 
 
-  &__section {
+  &__nav {
-    border: 1px solid blue;
+    @extend %t-flexbox;
-
+    @include t-align-items(stretch);
-    &.is-stuck {
+    background: $s-color--navbar;
-      position: fixed;
+    color: white;
-      width: 100%;
-      top: 0;
-      left: 0;
-    }
   }
 
   //Logo
@@ -80,14 +81,12 @@ $o-navbar--link-thickness: 5px;
 
 
   @include t-media-query($s-xsmall-up) {
+    padding: 1em;
+
     &__logo-container {
       text-align: left;
     }
 
-    &__section {
-      padding: 1em;
-    }
-
     &__logo {
       width: 10em;
     }
@@ -98,9 +97,7 @@ $o-navbar--link-thickness: 5px;
   }
 
   @include t-media-query($s-small-up) {
-    &__section {
+    padding: 3em;
-      padding: 3em;
-    }
 
     &__logo {
       width: 12em;

public/styles/settings/z.scss

@@ -0,0 +1,9 @@
+/*
+ *  Z
+ *    Provides Z-Index tracking, for use throughout the theme.
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/07
+ */
+
+$s-z--navbar: 10;   //Navbar

public/video/Video.jsx

@@ -0,0 +1,59 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+
+const VALID_SOURCES = [
+  "mp4",
+  "webm",
+  "ogg"
+]
+
+class Video extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    //TODO: Add image fallback support.
+    let sources = [];
+    let sourceProps = this.props.sources ? this.props.sources : this.props;
+
+    for(let i = 0; i < VALID_SOURCES.length; i++) {
+      let s = VALID_SOURCES[i];
+      if(!sourceProps[s]) continue;
+      sources.push(<source type={"video/"+s} src={sourceProps[s]} key={s} />);
+    }
+
+    let clazz = "o-video";
+    if(this.props.className) clazz += " " + this.props.className;
+
+    return (
+      <video className={clazz}>
+        { sources }
+      </video>
+    );
+  }
+}
+
+export default Video;