From aaa6f1de5aefa2cea4833dfdb7f421291f59fd4b Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Wed, 16 May 2018 18:00:41 +1000
Subject: [PATCH] Added image section internals (And placeholder image)

---
 public/page/home/Homepage.jsx                |  6 ++++--
 public/section/image/ImageSection.jsx        |  6 +++++-
 public/styles/components/_image-section.scss | 12 ++++++++++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/public/page/home/Homepage.jsx b/public/page/home/Homepage.jsx
index c791119..7000dbd 100644
--- a/public/page/home/Homepage.jsx
+++ b/public/page/home/Homepage.jsx
@@ -29,16 +29,18 @@ import Image from './../../image/Image';
 import { Title, Subtitle } from './../../typography/Typography';
 
 export default function() {
+
+
   return (
     <Page style="home-page" className="p-home-page">
-      <Section full>
+      <ImageSection src="//placehold.it/2400x1200" alt="domsPlace">
         <PageBoundary full>
           <FloatingContentBox position="middle right" size="small" className="u-text-center ">
             <Title>Development & Design</Title>
             <Subtitle>I'm not good at either.</Subtitle>
           </FloatingContentBox>
         </PageBoundary>
-      </Section>
+      </ImageSection>
 
       <Section full>
         Lorem
diff --git a/public/section/image/ImageSection.jsx b/public/section/image/ImageSection.jsx
index 77d8186..0477236 100644
--- a/public/section/image/ImageSection.jsx
+++ b/public/section/image/ImageSection.jsx
@@ -44,7 +44,11 @@ export default function(props) {
       className={"c-image-section" + (props.className ? " " + props.className : "" ) }
     >
       { image }
-      {props.children}
+      <div class="c-image-section__content">
+        <div class="c-image-section__content-inner">
+          { props.children }
+        </div>
+      </div>
     </Section>
   );
 }
diff --git a/public/styles/components/_image-section.scss b/public/styles/components/_image-section.scss
index 519b825..036f2d2 100644
--- a/public/styles/components/_image-section.scss
+++ b/public/styles/components/_image-section.scss
@@ -17,6 +17,18 @@
   &.is-full {
     .c-image-section__image {
       @include t-absolute-fill();
+      object-fit: cover;
+      object-position: bottom center;
+    }
+  }
+
+  &__content {
+    @include t-absolute-fill();
+    
+    &-inner {
+      position: relative;
+      height: 100%;
+      width: 100%;
     }
   }
 }