From 2ca45b154c5f203ae45f137e5bb7715d6126159d Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Tue, 30 Oct 2018 22:17:45 +1100
Subject: [PATCH] Working more with the article feature layout..

---
 .../blog/article/FeaturedArticleSection.jsx   | 25 +++++--
 .../blog/article/FeaturedArticleSection.scss  | 73 ++++++++++++++-----
 public/pages/blog/BlogPage.jsx                |  4 +-
 3 files changed, 74 insertions(+), 28 deletions(-)

diff --git a/public/components/section/blog/article/FeaturedArticleSection.jsx b/public/components/section/blog/article/FeaturedArticleSection.jsx
index debd8e3..6f36f8b 100644
--- a/public/components/section/blog/article/FeaturedArticleSection.jsx
+++ b/public/components/section/blog/article/FeaturedArticleSection.jsx
@@ -25,8 +25,10 @@ import React from 'react';
 
 
 import BannerImageSection from '@sections/image/banner/BannerImageSection';
+import { PageBoundary } from '@components/page/Page';
 
 import Image from '@objects/image/Image';
+import Button from '@objects/input/button/Button';
 import ContentBox from '@objects/content/box/ContentBox';
 import { Title, Paragraph } from '@objects/typography/Typography';
 
@@ -38,16 +40,23 @@ export default props => {
   return (
     <BannerImageSection
       className="c-featured-article"
-      src={ require('@assets/images/photo.jpg') } alt={ article.title }
-      loadable
+      src={ article.image } alt={ article.title } loadable
     >
-      <Title className="c-featured-article__title">
-        { article.title }
-      </Title>
+      <PageBoundary className="c-featured-article__content" full>
 
-      <Paragraph className="c-featured-article__description">
-        { article.shortDescription }
-      </Paragraph>
+        <ContentBox box className="c-featured-article__header">
+          <Title className="c-featured-article__title">
+            { article.title }
+          </Title>
+        </ContentBox>
+
+        <ContentBox box className="c-featured-article__body">
+          <Paragraph className="c-featured-article__description">
+            { article.shortDescription }
+          </Paragraph>
+        </ContentBox>
+
+      </PageBoundary>
     </BannerImageSection>
   );
 };
diff --git a/public/components/section/blog/article/FeaturedArticleSection.scss b/public/components/section/blog/article/FeaturedArticleSection.scss
index 676a1c3..5ba9470 100644
--- a/public/components/section/blog/article/FeaturedArticleSection.scss
+++ b/public/components/section/blog/article/FeaturedArticleSection.scss
@@ -7,37 +7,72 @@
  */
 @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--overlay: rgba(black, 0.3);
 
 .c-featured-article {
   position: relative;
 
-  &__image {
-    display: block;
-    width: 100%;
-    min-height: 75vh;
-    object-fit: cover;
+  &__header,
+  &__body {
+    position: absolute;
+    z-index: 2;
+    right: 1.5em;
+    bottom: 0.5em;
   }
 
+  &__body { display: none; }
+
   &__title,
   &__description {
-    position: absolute;
+    display: inline-block;
     margin: 0;
-    padding: 0.25em;
-    color: $c-featured-article--color;
-    background: $c-featured-article--background;
   }
 
-  &__title {
-    top: 2.5em;
-    left: 0.25em;
+  &:after {
+    //content: "";
+    @include t-absolute-fill();
+    background: $c-featured-article--overlay;
+    transition: all 1s $s-animation--ease-out;
+    z-index: 1;
   }
 
-  &__description {
-    bottom: 0.5em;
-    right: 0.5em;
-    max-width: 250px;
+  @include t-media-query($s-xsmall-up) {
+    &__header {
+      right: 5em;
+      bottom: 3em;
+    }
+  }
+
+  @include t-media-query($s-small-up) {
+    &__header {
+      left: 2em;
+      top: 7em;
+      bottom: auto;
+      right: auto;
+    }
+  }
+
+  @include t-media-query($s-medium-up) {
+    &__header {
+      left: 4em;
+      top: 8em;
+    }
+
+    &__body {
+      display: block;
+      bottom: 1.5em;
+      right: 2.5em;
+    }
+  }
+
+  @include t-media-query($s-large-up) {
+    &__header {
+      top: 11em;
+    }
+
+    &__body {
+      bottom: 5em;
+      right: 0em;
+    }
   }
 }
diff --git a/public/pages/blog/BlogPage.jsx b/public/pages/blog/BlogPage.jsx
index 12d1a4a..907ef47 100644
--- a/public/pages/blog/BlogPage.jsx
+++ b/public/pages/blog/BlogPage.jsx
@@ -31,7 +31,9 @@ import FeaturedArticleSection from '@sections/blog/article/FeaturedArticleSectio
 const TestBlogData = {
   handle: "test-blog",
   title: "Test Blog Article",
-  shortDescription: "Read how the latest lorem ipsum is dolor sit amet for business owners."
+  url: '/',
+  image: require('@assets/images/photo.jpg'),
+  shortDescription: "Read how the latest lorem ipsum is dolor sit amet for business owners..."
 };
 
 export default withLanguage(props => {