Standard ContentBox-es

public/content/ContentBox.jsx

@@ -0,0 +1,37 @@
+// 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';
+
+export default (props) => {
+  let clazz = "o-content-box";
+
+  if(props.box) clazz += " is-box"
+  if(props.className) clazz += " " + props.className;
+
+  return (
+    <div className={clazz}>
+      {props.children}
+    </div>
+  );
+};

public/content/FloatingContentBox.jsx

@@ -22,6 +22,7 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+import ContentBox from './ContentBox';
 
 export default function(props) {
   let clazzes = "o-floating-content-box";
@@ -40,10 +41,10 @@ export default function(props) {
   if(props.className) clazzes += " " + props.className;
 
   return (
-    <div className={ clazzes } >
+    <ContentBox {...props} className={ clazzes }>
       <div className="o-floating-content-box__inner">
         { props.children }
       </div>
-    </div>
+    </ContentBox>
   );
 }

public/page/about/AboutPage.jsx

@@ -27,6 +27,7 @@ import Language from './../../language/Language';
 import Page, { PageBoundary } from './../Page';
 import Section, { ImageSection, VideoSection, SplitSection, Split } from './../../section/Section';
 import FloatingContentBox from './../../content/FloatingContentBox';
+import ContentBox from './../../content/ContentBox';
 import Image from './../../image/Image';
 import Video from './../../video/Video';
 import { Title, Subtitle, Paragraph, Heading1 } from './../../typography/Typography';
@@ -65,12 +66,14 @@ const AboutPage = (props) => {
 
             <Split className="u-text-center" padded>
               <ElementScrollFader from="bottom">
+                <ContentBox box>
                   <Title>
                     { Language.get("pages.about.video.heading") }
                   </Title>
                   <Paragraph>
                     { Language.get("pages.about.video.paragraph") }
                   </Paragraph>
+                </ContentBox>
               </ElementScrollFader>
             </Split>
           </SplitSection>

public/styles/components/_body-section.scss

@@ -3,6 +3,7 @@
  *    Body Section.
  *
  *  Dependencies:
+ *    styles/settings/colors.scss
  *    styles/tools/_shadow.scss
  *
  *  Version:

public/styles/index.scss

@@ -61,6 +61,7 @@
 
 @import './objects/_background.scss';
 @import './objects/_button.scss';
+@import './objects/_content-box.scss';
 @import './objects/_element-scroll-fader.scss';
 @import './objects/_floating-content-box.scss';
 @import './objects/_form.scss';

public/styles/objects/_content-box.scss

@@ -0,0 +1,22 @@
+/*
+ *  Content Box
+ *    Simple box to hold content, comes with great settings!
+ *
+ *  Dependencies:
+ *    styles/settings/colors.scss
+ *    styles/tools/_shadow.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/06/19
+ */
+$o-content-box--padding: 1em;
+
+.o-content-box {
+  position: relative;
+
+  &.is-box {
+    @extend %t-dp--shadow;
+    background: $s-color--background;
+    padding: $o-content-box--padding;
+  }
+}