Setup server to handle article page (untested)

public/pages/blog/BlogPage.jsx

@@ -39,9 +39,10 @@ import Styles from './BlogPage.scss';
 
 export default withBlogTemplate(withLanguage(props => {
   let { lang, articles, page, pages, pending, error } = props;
+  let l = lang.pages.blog;
 
   let children;
-  if(error) error = <ErrorSection title={lang.blog.error.title} body={lang.blog.error.body} error={error} />;
+  if(error) error = <ErrorSection title={l.error.title} body={l.error.body} error={error} />;
   if(pending) pending = <Loader />;
 
   if(articles && articles.length) {
@@ -49,21 +50,23 @@ export default withBlogTemplate(withLanguage(props => {
       <React.Fragment>
         <FeaturedArticleSection article={ articles.shift() } />
         <ArticleGridSection articles={ articles } />
-        <Pagination page={ page } pages={ pages } to="/blog/$page" />
+        <Pagination
+          className="p-blog-page__pagination" page={ page } pages={ pages }
+          to="/blog/$page"
+        />
       </React.Fragment>
     );
   }
 
   return (
     <Page
-      style="blog-page" className="p-blog-page" title={ lang.pages.blog.title }
+      style="blog-page" className="p-blog-page" title={ error ? l.error.title : l.title }
       background={require('@assets/images/banners/sunset.svg')}
     >
       <ClearSection />
       { error }
       { pending }
       { children }
-      <ClearSection />
     </Page>
   );
 }));

public/pages/blog/BlogPage.scss

@@ -6,4 +6,7 @@
  *    1.0.0 - 2018/10/30
  */
 .p-blog-page {
+  &__pagination {
+    padding: 6em 0;
+  }
 }

public/pages/blog/article/ArticlePage.jsx

@@ -22,3 +22,75 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+
+import { withLanguage } from '@public/language/Language';
+import { withArticleTemplate } from '@public/blog/Blog';
+
+import Page, { PageBoundary } from '@components/page/Page';
+
+import ErrorSection from '@sections/error/ErrorSection';
+import ClearSection from '@sections/layout/ClearSection';
+
+import Loader from '@objects/loading/Loader';
+import ContentBox from '@objects/content/box/ContentBox';
+import { Title, Paragraph } from '@objects/typography/typography';
+import Image from '@objects/image/Image';
+
+import Styles from './ArticlePage.scss';
+
+export default withArticleTemplate(withLanguage(props => {
+  let { error, pending, article, lang } = props;
+  let l = lang.pages.article;
+
+
+  let children;
+  if(error) error = <ErrorSection title={l.error.title} body={l.error.body} error={error} />;
+  if(pending) pending = <Loader />;
+
+  if(article) {
+    children = (
+      <PageBoundary>
+        <article
+          role="article" itemScope itemType="http://schema.org/Article"
+          className="p-article-page__article"
+        >
+          {/* Title */}
+          <ContentBox box itemProp="name" className="p-article-page__header">
+            <Title children={ article.title } />
+          </ContentBox>
+
+          {/* Image */}
+          <div className="p-article-page__picture">
+            <ContentBox box>
+              <Image
+                src={ article.image } maxWidth="800" loadable
+                className="p-article-page__picture-image"
+              />
+            </ContentBox>
+          </div>
+
+          {/* Description */}
+          <ContentBox box itemProp="description" className="p-article-page__description">
+            <Paragraph>
+              { article.description || article.shortDescription }
+            </Paragraph>
+          </ContentBox>
+        </article>
+      </PageBoundary>
+    );
+  }
+
+  return (
+    <Page
+      style="article-page" className="p-article-page"
+      title={error ? l.error.title : l.title}
+      background={require('@assets/images/banners/sunset.svg')}
+    >
+      <ClearSection />
+      { error }
+      { pending }
+      { children }
+      <ClearSection />
+    </Page>
+  );
+}));

public/pages/blog/article/ArticlePage.scss

@@ -0,0 +1,43 @@
+@import '~@styles/global';
+
+$p-article-page--spacing: 1.5em;
+
+.p-article-page {
+  &__article {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: stretch;
+  }
+
+  &__header,
+  &__picture,
+  &__description
+  {
+    width: 100%;
+  }
+
+  &__picture {
+    position: relative;
+
+    &-image {width: 100%;}
+    &-box {
+      position: sticky;
+      top:0;
+    }
+  }
+
+  @include t-media-query($s-small-up) {
+    position: relative;
+    &__header {
+      margin-bottom: $p-article-page--spacing;
+    }
+    &__picture {
+      width: 40%;
+      padding-right: $p-article-page--spacing;
+    }
+    &__description {
+      width: 60%;
+      padding-left: $p-article-page--spacing;
+    }
+  }
+}

public/pages/contact/ContactPage.jsx

@@ -111,7 +111,7 @@ class ContactPage extends React.Component {
         style="contact-page"
         className="p-contact-page"
         title={ lang.pages.contact.title }
-        background={ require('@assets/images/banners/sunset.svg') }
+        background={ require('@assets/images/banners/hills-night.svg') }
       >
         <ClearSection />
         <PageBoundary small children={inners} />