Generally trying to improve performance.

public/components/App.jsx

@@ -39,6 +39,7 @@ const AppRoutes = (props) => {
       <RouteWrapper exact path="/" page={ () => import('@pages/home/HomePage') } />
       <RouteWrapper exact path="/contact" page={ () => import ('@pages/contact/ContactPage') } />
       <RouteWrapper exact path="/legal/privacy" page={ () => import('@pages/legal/privacy/PrivacyPolicyPage') } />
+      <RouteWrapper exact path="/blog" page={ () => import('@pages/blog/BlogPage') } />
     </Routes>
   );
 };

public/components/App.scss

@@ -2,11 +2,8 @@
  *  App
  *    App styles for the app container.
  *
- *  Dependencies:
- *    styles/tools/flex.scss
- *
  *  Version:
- *    1.0.0 - 2018/05/03
+ *    1.1.0 - 2018/10/30
  */
 @import '~@styles/global';
 

public/components/footer/Footer.scss

@@ -5,11 +5,10 @@
  *  Dependencies:
  *    styles/settings/colors.scss
  *    styles/settings/typography.scss
- *    styles/tools/flex.scss
  *    styles/tools/_box-shadow.scss
  *
  *  Version:
- *    1.0.0 - 2018/05/16
+ *    1.1.0 - 2018/10/30
  */
 @import '~@styles/global';
 

public/components/nav/navbar/Navbar.jsx

@@ -66,6 +66,7 @@ const Navbar = props => {
 
           {/* Desktop / Tablet Screen Links */}
           <NavbarLink to="/" title={lang.navbar.home} exact />
+          <NavbarLink to="/blog" title={lang.navbar.blog} exact />
           <NavbarLink to="/contact" title={lang.navbar.contact} exact />
 
           {/* Hamburger Menu for smaller screens */}

public/components/nav/navbar/Navbar.scss

@@ -6,7 +6,6 @@
  *    styles/settings/colors.scss
  *    styles/settings/typography.scss
  *    styles/settings/z.scss
- *    styles/tools/flex.scss
  *    styles/tool/list.scss
  *
  *  Version:

public/components/section/blog/article/FeaturedArticleSection.jsx

@@ -0,0 +1,53 @@
+// 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';
+
+
+import Section from '@components/section/Section';
+
+import Image from '@objects/image/Image';
+import ContentBox from '@objects/content/box/ContentBox';
+import { Title, Paragraph } from '@objects/typography/Typography';
+
+import Styles from './FeaturedArticleSection.scss';
+
+export default props => {
+  let { article } = props;
+
+  return (
+    <Section className="c-featured-article">
+      <Image
+        src={ require('@assets/images/photo.jpg') }
+        className="c-featured-article__image"
+      />
+      <Title className="c-featured-article__title">
+        { article.title }
+      </Title>
+
+      <Paragraph className="c-featured-article__description">
+        { article.shortDescription }
+      </Paragraph>
+    </Section>
+  );
+};

public/components/section/blog/article/FeaturedArticleSection.scss

@@ -0,0 +1,43 @@
+/*
+ *  Featured Blog Section
+ *    Section for featuring a large blog item.
+ *
+ *  Version:
+ *    1.0.0 - 2018/10/30
+ */
+@import '~@styles/global';
+
+$c-featured-article--background: rgba(0,0,0,0.5);
+$c-featured-article--color: white;
+$c-featured-article--padding: 15px;
+
+.c-featured-article {
+  position: relative;
+
+  &__image {
+    display: block;
+    width: 100%;
+    min-height: 75vh;
+    object-fit: cover;
+  }
+
+  &__title,
+  &__description {
+    position: absolute;
+    margin: 0;
+    padding: 0.25em;
+    color: $c-featured-article--color;
+    background: $c-featured-article--background;
+  }
+
+  &__title {
+    top: 2.5em;
+    left: 0.25em;
+  }
+
+  &__description {
+    bottom: 0.5em;
+    right: 0.5em;
+    max-width: 250px;
+  }
+}

public/components/section/image/ImageSection.jsx

@@ -32,13 +32,14 @@ export default props => {
   let sectionProps = {...props};
   let imageProps = {...props};
 
-  let { image, background, children, className } = props;
+  let { image, background, children, className, imageClassName } = props;
 
-  ["children", "background", "loadable"].forEach(e => delete sectionProps[e]);
-  ["image", "full", "children", "background"].forEach(e => delete imageProps[e]);
+  ["children", "background", "loadable", "imageClassName"].forEach(e => delete sectionProps[e]);
+  ["image", "full", "children", "background", "imageClassName"].forEach(e => delete imageProps[e]);
 
   let clazz = "c-image-section";
-  image = image || <Image {...imageProps} className="c-image-section__image" />;
+  let imageClazz = `c-image-section__image ${imageClassName||""}`;
+  image = image || <Image {...imageProps} className={imageClazz} />;
 
   if(className) clazz += ` ${className}`;
   if(background) clazz += " is-background";

public/components/section/layout/SplitSection.scss

@@ -2,9 +2,6 @@
  *  Split section
  *    Simple Section that is split into multiple columns
  *
- *  Dependencies:
- *    styles/tools/_flex.scss
- *
  *  Version:
  *    1.0.0 - 2018/05/28
  */