From 2235fe39833ed70402819aed0f5a6dcd5c3a73c8 Mon Sep 17 00:00:00 2001 From: Dominic Masters Date: Tue, 14 Aug 2018 21:09:17 +1000 Subject: [PATCH] Switched background image SVGs into regular images, made logo go over the top of the menu on mobile. --- public/page/home/sections/BannerSection.jsx | 3 +- .../home/sections/ExistingWorkSection.jsx | 11 +++++-- .../page/home/sections/PlatformsSection.jsx | 13 ++++++--- .../page/home/sections/ProgrammingSection.jsx | 11 +++++-- public/section/image/ImageSection.jsx | 11 ++++++- public/styles/components/_image-section.scss | 29 +++++++++++++++++-- public/styles/components/_navbar.scss | 5 +++- public/styles/objects/_loadable-image.scss | 3 +- public/styles/pages/_home-page.scss | 23 ++++----------- public/styles/settings/z.scss | 1 + 10 files changed, 76 insertions(+), 34 deletions(-) diff --git a/public/page/home/sections/BannerSection.jsx b/public/page/home/sections/BannerSection.jsx index 874a2cb..d1d7b48 100644 --- a/public/page/home/sections/BannerSection.jsx +++ b/public/page/home/sections/BannerSection.jsx @@ -33,13 +33,12 @@ import ElementScrollFader from './../../../animation/fade/ElementScrollFader'; export default (props) => { return ( diff --git a/public/page/home/sections/ExistingWorkSection.jsx b/public/page/home/sections/ExistingWorkSection.jsx index d466090..d6f5d2e 100644 --- a/public/page/home/sections/ExistingWorkSection.jsx +++ b/public/page/home/sections/ExistingWorkSection.jsx @@ -24,7 +24,7 @@ import React from 'react'; import Language from './../../../language/Language'; import { PageBoundary } from './../../Page'; -import Section, { SplitSection, Split, ClearSection } from './../../../section/Section'; +import { ImageSection, SplitSection, Split, ClearSection } from './../../../section/Section'; import ContentBox from './../../../content/ContentBox'; import { Title, Subtitle, Paragraph, Heading1, Heading2 } from './../../../typography/Typography'; import { Button } from './../../../input/Input'; @@ -111,7 +111,12 @@ const ExistingWorkFrame = (props) => { export default (props) => { return ( -
+ {/* Title */} @@ -176,6 +181,6 @@ export default (props) => { {/* Space a bit */} -
+ ); } diff --git a/public/page/home/sections/PlatformsSection.jsx b/public/page/home/sections/PlatformsSection.jsx index 8d9e9da..6841949 100644 --- a/public/page/home/sections/PlatformsSection.jsx +++ b/public/page/home/sections/PlatformsSection.jsx @@ -24,7 +24,7 @@ import React from 'react'; import Language from './../../../language/Language'; import { PageBoundary } from './../../Page'; -import Section, { ImageSection, VideoSection, SplitSection, Split } from './../../../section/Section'; +import { ImageSection, SplitSection, Split } from './../../../section/Section'; import FloatingContentBox from './../../../content/FloatingContentBox'; import ContentBox from './../../../content/ContentBox'; import Image from './../../../image/Image'; @@ -34,7 +34,7 @@ import ElementScrollFader from './../../../animation/fade/ElementScrollFader'; const Platform = (props) => { let children; - let image = ; + let image = ; if(props.to) { children = ( @@ -55,7 +55,12 @@ const Platform = (props) => { export default (props) => { return ( -
+ @@ -184,6 +189,6 @@ export default (props) => { </Subtitle> </ElementScrollFader> </PageBoundary> - </Section> + </ImageSection> ); } diff --git a/public/page/home/sections/ProgrammingSection.jsx b/public/page/home/sections/ProgrammingSection.jsx index 2eef24c..9ea939f 100644 --- a/public/page/home/sections/ProgrammingSection.jsx +++ b/public/page/home/sections/ProgrammingSection.jsx @@ -25,14 +25,19 @@ import React from 'react'; import { connect } from 'react-redux'; import Language from './../../../language/Language'; import { PageBoundary } from './../../Page'; -import Section from './../../../section/Section'; +import { ImageSection } from './../../../section/Section'; import ContentBox from './../../../content/ContentBox'; import { Title, Paragraph, Heading1 } from './../../../typography/Typography'; import ElementScrollFader from './../../../animation/fade/ElementScrollFader'; export default (props) => { return ( - <Section className="p-home-page__promo p-home-page__promo-programming"> + <ImageSection + className="p-home-page__promo p-home-page__promo-programming" + src={ require('./../../../images/patterns/rhythm-heaven.svg') } + loadable + background + > <PageBoundary small> <ElementScrollFader from="bottom"> <ContentBox box> @@ -43,6 +48,6 @@ export default (props) => { </ContentBox> </ElementScrollFader> </PageBoundary> - </Section> + </ImageSection> ); } diff --git a/public/section/image/ImageSection.jsx b/public/section/image/ImageSection.jsx index 81fa739..4dfc723 100644 --- a/public/section/image/ImageSection.jsx +++ b/public/section/image/ImageSection.jsx @@ -27,6 +27,8 @@ import Image from './../../image/Image'; export default function(props) { let image; + let clazz = "c-image-section"; + if(props.image) { image = props.image; } else { @@ -37,10 +39,17 @@ export default function(props) { />; } + if(props.className) clazz += " " + props.className; + + if(props.background) { + //Background Image Effect + clazz += " is-background"; + } + return ( <Section full={props.full} - className={"c-image-section" + (props.className ? " " + props.className : "" ) } + className={ clazz } > { image } <div className="c-image-section__content"> diff --git a/public/styles/components/_image-section.scss b/public/styles/components/_image-section.scss index 2f38a24..5cb2e7a 100644 --- a/public/styles/components/_image-section.scss +++ b/public/styles/components/_image-section.scss @@ -5,10 +5,9 @@ * Dependencies: * * Version: - * 1.0.0 - 2018/05/11 + * 1.1.0 - 2018/08/14 */ .c-image-section { - position: relative; &__image { display: block; @@ -16,6 +15,8 @@ } &.is-full { + position: relative; + .c-image-section__image { @include t-absolute-fill(); object-fit: cover; @@ -32,4 +33,28 @@ width: 100%; } } + + //Background Image + &.is-background { + position: relative; + + .c-image-section { + &__image { + @include t-absolute-fill(); + object-fit: cover; + object-position: bottom center; + } + + &__content { + position: relative; + + &-inner { + position: relative; + height: 100%; + width: 100%; + } + } + } + } + } diff --git a/public/styles/components/_navbar.scss b/public/styles/components/_navbar.scss index 5b02ada..a2898c6 100644 --- a/public/styles/components/_navbar.scss +++ b/public/styles/components/_navbar.scss @@ -10,7 +10,7 @@ * styles/tool/list.scss * * Version: - * 1.0.0 - 2018/05/03 + * 1.1.0 - 2018/08/14 */ $c-navbar--link-thickness: 5px; @@ -40,6 +40,9 @@ $c-navbar--link-thickness: 5px; } &__logo { + //To Allow the logo to go over the top of the menu!~ + position: relative; + z-index: $s-z--logo; width: 7em; } diff --git a/public/styles/objects/_loadable-image.scss b/public/styles/objects/_loadable-image.scss index 1ffcc0e..6db34ab 100644 --- a/public/styles/objects/_loadable-image.scss +++ b/public/styles/objects/_loadable-image.scss @@ -22,7 +22,6 @@ } .o-loadable-image { - position: relative; &__image-container { opacity: 1; @@ -31,6 +30,8 @@ } &.is-loading { + position: relative; + @include t-animation-name(o-loadable-image--load-flash); @include t-animation-timing-function(linear); @include t-animation-duration(2s); diff --git a/public/styles/pages/_home-page.scss b/public/styles/pages/_home-page.scss index b609b42..9bccd88 100644 --- a/public/styles/pages/_home-page.scss +++ b/public/styles/pages/_home-page.scss @@ -8,9 +8,14 @@ * styles/tools/_responsive.scss * * Version: - * 1.0.0 - 2018/06/06 + * 1.1.0 - 2018/08/14 */ .p-home-page { + &__banner, + &__promo { + position: relative; + //@extend %t-dp--shadow-3d; + } &__promo { padding: 6em 0; @@ -18,22 +23,6 @@ &-video { background-image: url('./../images/patterns/florida.svg'); - @extend %t-dp--shadow-3d; - } - - &-programming { - background-image: url('./../images/patterns/rhythm-heaven.svg'); - @extend %t-dp--shadow-3d; - } - - &-platforms { - background-image: url('./../images/patterns/game-show.svg'); - @extend %t-dp--shadow-3d; - } - - &-work { - background-image: url('./../images/patterns/arcade.svg'); - @extend %t-dp--shadow-3d; } } diff --git a/public/styles/settings/z.scss b/public/styles/settings/z.scss index 4fdd445..a8d807f 100644 --- a/public/styles/settings/z.scss +++ b/public/styles/settings/z.scss @@ -10,5 +10,6 @@ $s-z--background: -1; //Background Element $s-z--navbar: 10; //Navbar $s-z--menu: 15; //Hamburger Menu $s-z--menu-button: 16; //Button to toggle menu. +$s-z--logo: 16; //Logo (Goes over top of menu) $s-z--modal: 100; //Modals $s-z--transition: 1; //The Z-Index of an element in transition