Ch/layout (#457)

* starting styling layout and structure of mobile

* added styling for desktop layout

* tweaked heading margin

* ran yarn format

* ran yarn format

* removed prettier dev dependency

* Ch/qa scrolling (#458)

packages/microcosm-www-next/package.json

@@ -8,7 +8,7 @@
     "gatsby-link": "^1.6.22",
     "gatsby-plugin-react-helmet": "^1.0.8",
     "gatsby-plugin-sass": "^1.0.12",
-    "react-intersection-observer": "^2.0.3"
+    "intersection-observer": "^0.5.0"
   },
   "keywords": [
     "gatsby"

packages/microcosm-www-next/src/components/graphic.js

@@ -1,14 +1,12 @@
 import React from 'react'
 
 const Graphic = ({ section, graphicUrl }) => (
-  <figure>
-    <img
-      src={graphicUrl}
-      alt="TODO"
-      className="section__graphic__figure"
-      data-module="ObserveGraphic"
-      data-section={section}
-    />
+  <figure
+    className="section__graphic__figure"
+    data-module="ObserveGraphic"
+    data-section={section}
+  >
+    <img src={graphicUrl} alt="TODO" />
   </figure>
 )
 

packages/microcosm-www-next/src/layouts/index.js

@@ -4,6 +4,7 @@ import Link from 'gatsby-link'
 import Helmet from 'react-helmet'
 import VigetLogo from '../components/viget-logo'
 
+import 'intersection-observer'
 import '../stylesheets/app.scss'
 
 const Navigation = () => (

packages/microcosm-www-next/src/pages/index.js

@@ -12,6 +12,10 @@ export default class IndexPage extends React.Component {
     }
   }
 
+  componentWillMount() {
+    this.sections = this.createSectionsArray()
+  }
+
   componentDidMount() {
     this.setVars()
     this.beginObserve()
@@ -27,6 +31,16 @@ export default class IndexPage extends React.Component {
     }
   }
 
+  createSectionsArray() {
+    let arr = []
+
+    for (let i = 0; i < this.state.numSections; i++) {
+      arr.push(i + 1)
+    }
+
+    return arr
+  }
+
   beginObserve() {
     //create new Observer instance
     let observer = new IntersectionObserver(
@@ -35,7 +49,9 @@ export default class IndexPage extends React.Component {
     )
 
     //start observing each graphic
-    this.graphics.forEach(graphic => observer.observe(graphic))
+    for (let i = 0; i < this.graphics.length; i++) {
+      observer.observe(this.graphics[i])
+    }
   }
 
   onIntersection = observed => {
@@ -72,36 +88,41 @@ export default class IndexPage extends React.Component {
       <div className="wrapper">
         <section className="section">
           <div className="section__content">
-            <h2
-              className="section__content__heading"
-              dangerouslySetInnerHTML={{ __html: sectionData.heading }}
-            />
-
-            <h3 className={'section__content__subheading -top' + browserClass}>
-              In
-            </h3>
-            <p
-              className="section__content__text"
-              dangerouslySetInnerHTML={{ __html: text }}
-            />
-
-            <h3
-              className={'section__content__subheading -bottom' + browserClass}
-            >
-              Meanwhile, in
-            </h3>
-            <button
-              onClick={this.switchView}
-              className={'section__browser-btn' + browserClass}
-            />
+            <div className="text-container">
+              <h2
+                className="section__content__heading"
+                dangerouslySetInnerHTML={{ __html: sectionData.heading }}
+              />
+              <h3
+                className={'section__content__subheading -top' + browserClass}
+              >
+                In
+              </h3>
+              <p
+                className="section__content__text"
+                dangerouslySetInnerHTML={{ __html: text }}
+              />
+            </div>
+
+            <div className="toggle-container">
+              <h3
+                className={
+                  'section__content__subheading -bottom' + browserClass
+                }
+              >
+                Meanwhile, in
+              </h3>
+              <button
+                onClick={this.switchView}
+                className={'section__toggle-btn' + browserClass}
+              />
+            </div>
           </div>
 
           <div className="section__graphic">
-            {Array(this.state.numSections)
-              .fill()
-              .map((el, i) => (
-                <Graphic key={i} section={i + 1} graphicUrl={graphicUrl} />
-              ))}
+            {this.sections.map(num => (
+              <Graphic key={num} section={num} graphicUrl={graphicUrl} />
+            ))}
           </div>
         </section>
       </div>

packages/microcosm-www-next/src/stylesheets/base/_elements.scss

@@ -30,6 +30,13 @@ svg {
   max-width: 100%;
 }
 
+a {
+  color: white;
+}
+
+button {
+  cursor: pointer;
+}
 
 // box-sizing -- http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 

packages/microcosm-www-next/src/stylesheets/setup/_breakpoints.scss

@@ -23,6 +23,7 @@ $breakpoints : (
   small-desktop-up   : 'min-width: 840px',
   small-desktop-down : 'max-width: 959px',
   medium-desktop-up  : 'min-width: 960px',
+  medium-desktop-down: 'max-width: 1279px',
   large-desktop-up   : 'min-width: 1280px',
 );
 

packages/microcosm-www-next/src/stylesheets/setup/_colors.scss

@@ -3,16 +3,16 @@
 $colors: (
   bg-1-top: #293256,
   bg-1-bottom: #5572a4,
-  bg-1-nav: #1d243c,
-  bg-1-footer: #3b4f72,
+  bg-1-nav: #1d233c,
+  bg-1-footer: #293256,
   bg-2-top: #ffa991,
   bg-2-bottom: #dd5757,
   bg-2-nav: #b27665,
-  bg-2-footer: #9a3c3d,
+  bg-2-footer: #c34040,
   bg-3-top: #3e9e94,
   bg-3-bottom: #19594d,
   bg-3-nav: #2c6e67,
-  bg-3-footer: #123d36,
+  bg-3-footer: #10453b,
 
   // elements
   text : #fff,

packages/microcosm-www-next/src/stylesheets/setup/_dimensions.scss

@@ -2,6 +2,6 @@
 
 $page-gutter: 20px;
 $nav-height: 76px;
-$footer-height: 167px;
+$footer-height: 145px;
 
 $section-count: 3;

packages/microcosm-www-next/src/stylesheets/structure/_body.scss

@@ -1,16 +1,24 @@
+$split-bg-height-mobile: 471px;
+$split-bg-height-desktop: 291px;
+
 body {
   background-color: color(bg-1-bottom);
+  position: relative;
   transition: transition(background-color);
 
   &::before {  //top of half split bg
     background-color: color(bg-1-top);
     content: '';
-    height: 281px;
+    height: $split-bg-height-mobile;
     position: fixed;
     top: 0;
     transition: transition(background-color);
     width: 100%;
     z-index: -1;
+
+    @include breakpoint(large-desktop-up) {
+      height: $split-bg-height-desktop;
+    }
   }
 
   @for $i from 1 through $section-count {

packages/microcosm-www-next/src/stylesheets/structure/_footer.scss

@@ -2,13 +2,10 @@ $cta-border-height: 3px;
 $cta-bottom-padding: 6px;
 
 .footer {
-  align-items: center;
   background-color: color(bg-1-footer);
   bottom: 0;
-  display: flex;
   height: $footer-height;
-  justify-content: center;
-  position: fixed;
+  position: relative;
   transition: transition(background-color);
   width: 100%;
   z-index: 2;
@@ -19,23 +16,43 @@ $cta-bottom-padding: 6px;
     }
   }
 
+  @include breakpoint(large-desktop-up) {
+    position: fixed;
+
+    @media (max-height: 900px) { // if browser is shorter than 900px, don't fix footer to bottom
+      position: absolute;
+    }
+  }
+
   .wrapper {
-    padding-bottom: $cta-border-height + $cta-bottom-padding + 3px;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+
+    @include breakpoint(large-desktop-up) {
+      flex-direction: row;
+    }
   }
 
   .viget-logo {
-    display: block;
-    margin-bottom: 5px;
+    margin-bottom: rem(10);
+
+    @include breakpoint(large-desktop-up) {
+      margin-bottom: 0;
+      margin-right: rem(30);
+    }
 
     svg {
-      fill: rgba(#fff, 0.55);
+      fill: rgba(#fff, 0.5);
     }
   }
 }
 
 .footer__cta {
   border-bottom: $cta-border-height solid;
-  color: rgba(#fff, 0.55);
+  color: rgba(#fff, 0.5);
   font-size: rem(14);
   padding-bottom: $cta-bottom-padding;
   text-decoration: none;