Added minheights to the page

public/page/home/Homepage.jsx

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

public/section/video/VideoSection.jsx

@@ -32,7 +32,7 @@ class VideoSection extends React.Component {
   render() {
     return (
       <Section full={this.props.full}>
-        <video class="c-video-section">
+        <video className="c-video-section">
 
         </video>
 

public/styles/components/_page.scss

@@ -8,4 +8,5 @@
  *    1.0.0 - 2018/05/05
  */
 .c-page {
+  min-height: 100vh;
 }

public/styles/components/_section.scss

@@ -1,7 +1,17 @@
+/*
+ *  Section
+ *    Styles for the base section component.
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/07
+ */
 .c-section {
+  //border: 1px solid red;
   width: 100%;
 
   &--full {
-    height: 100%;
+    height: 100vh;
   }
 }

public/styles/components/_video-section.scss

@@ -0,0 +1,11 @@
+/*
+ *  Video Section
+ *    Styles for Video Sections, usually contains videos.
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/03
+ */
+.c-video-section {
+}

public/styles/index.scss

@@ -47,11 +47,15 @@
 @import './elements/_headings.scss';
 
 //Objects
+@import './objects/main.scss';
+
 @import './objects/_app.scss';
 @import './objects/_navbar.scss';
 
 //Components
 @import './components/_page.scss';
+@import './components/_section.scss';
+@import './components/_video-section.scss';
 
 //Vendor
 @import './vendor/_fonts.scss';

public/styles/objects/main.scss

@@ -0,0 +1,9 @@
+/*
+ *  Main
+ *    Styles for the main container
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/07
+ */
+.o-main {
+}