Ch/browser graphic

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import { cat } from '../images'
+
+const BrowserGraphic = () => (
+  <div className="browser-graphic">
+    <header>
+      <p>Quizzfeed</p>
+    </header>
+    <main>
+      <div className="content">
+        <ol className="content__list">
+          <li>Cool</li>
+          <li>Curious</li>
+          <li>Calm</li>
+          <li>Cautious</li>
+        </ol>
+      </div>
+      <div className="graphic">
+        <img src={cat} className="graphic__img" alt="TODO" />
+      </div>
+    </main>
+  </div>
+)
+
+export default BrowserGraphic

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import BrowserGraphic from './browser-graphic'
 
 const Graphic = ({ section, microcosmView }) => (
   <figure
@@ -7,12 +8,15 @@ const Graphic = ({ section, microcosmView }) => (
     data-module="ObserveGraphic"
     data-section={section}
   >
-    <img
-      src={
-        microcosmView ? `/${section}-microcosm.png` : `/${section}-browser.png`
-      }
-      alt="TODO"
-    />
+    {microcosmView || section === 0 || section == 9 ? (
+      <img
+        src={`/${section}-microcosm.png`}
+        className="microcosm-graphic"
+        alt="TODO"
+      />
+    ) : (
+      <BrowserGraphic />
+    )}
   </figure>
 )
 

packages/microcosm-www-next/src/data/index.json

@@ -3,6 +3,7 @@
     "num": "Introduction",
     "heading": "Welcome to Microcosm",
     "microcosmText": "Intro lorem ipsum",
+    "browserText": "Intro lorem ipsum",
     "bookend": true
   },
   "1": {
@@ -57,6 +58,7 @@
     "num": "Conclusion",
     "heading": "Conclusion",
     "microcosmText": "So that's a quick recap of Microcosm's players and how they work together. How Presenters push Actions up the hierarchy, how History watches over the Actions as they move through their status lifecycle, how Repos/Domains respond to keep state up to date, and how Presenters (completing the cycle) consume that state.<br>This is one of the simplest explanations of the functionality available when using Microcosm. Check out the documentation for examples and explanations of some of the more powerful features.<br>Under the hood there are loads of performance optimizations to ensure duplicate calculations are kept to a minimum, helping your application run as quickly as possible, leaving you to worry about the business logic. We have big plans for the future of Microcosm along these lines, aiming to maintain a strong balance between hyper-optimized and easy-to-use.",
+    "browserText": "So that's a quick recap of Microcosm's players and how they work together. How Presenters push Actions up the hierarchy, how History watches over the Actions as they move through their status lifecycle, how Repos/Domains respond to keep state up to date, and how Presenters (completing the cycle) consume that state.<br>This is one of the simplest explanations of the functionality available when using Microcosm. Check out the documentation for examples and explanations of some of the more powerful features.<br>Under the hood there are loads of performance optimizations to ensure duplicate calculations are kept to a minimum, helping your application run as quickly as possible, leaving you to worry about the business logic. We have big plans for the future of Microcosm along these lines, aiming to maintain a strong balance between hyper-optimized and easy-to-use.",
     "bookend": true
   }
 }

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

@@ -1,7 +1,8 @@
 import menu from './menu.png'
+import cat from './cat.png'
 import VigetLogo from './viget-logo.js'
 import microcosmLogo from './microcosm-logo.png'
 import BrowserIcon from './browser-icon.js'
 import PlanetIcon from './planet-icon.js'
 
-export { menu, VigetLogo, microcosmLogo, BrowserIcon, PlanetIcon }
+export { menu, cat, VigetLogo, microcosmLogo, BrowserIcon, PlanetIcon }

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

@@ -129,7 +129,11 @@ export default class IndexPage extends React.Component {
 
           <div className="section__graphic">
             {this.state.numSections.map(num => (
-              <Graphic key={num} section={num} microcosmView={microcosmView} />
+              <Graphic
+                key={num}
+                section={parseInt(num)}
+                microcosmView={microcosmView}
+              />
             ))}
           </div>
         </section>

packages/microcosm-www-next/src/stylesheets/app.scss

@@ -24,5 +24,6 @@
 @import 'structure/footer';
 
 // components (page level blocks and components)
+@import 'components/browser-graphic';
 @import 'components/side-nav';
-@import 'components/toggle-container';
+@import 'components/toggle-container';

packages/microcosm-www-next/src/stylesheets/components/_browser-graphic.scss

@@ -0,0 +1,99 @@
+$header-height-sm: 60px;
+$header-height-lg: 100px;
+$left-padding-sm: rem(20);
+$left-padding-lg: rem(40);
+
+.browser-graphic {
+  @include font-family-medium;
+  background: #fff;
+  border-color: #e4e4e4;
+  border-radius: 10px;
+  border-style: solid;
+  border-width: 40px 20px 20px;
+  height: 76vw;
+  max-height: inherit;
+  text-transform: uppercase;
+
+  &::before {
+    color: #bebebe;
+    content: "\2022\2022\2022";
+    font-size: rem(33);
+    position: absolute;
+    top: -2px;
+  }
+
+  header {
+    align-items: center;
+    border-bottom: 5px solid #e4e4e4;
+    color: #ff0000;
+    display: flex;
+    font-size: rem(20);
+    height: $header-height-sm;
+    padding-left: $left-padding-sm;
+
+    @include breakpoint(small-tablet-up) {
+      font-size: rem(27);
+      height: $header-height-lg;
+      padding-left: $left-padding-lg;
+    }
+  }
+
+  main {
+    display: flex;
+    height: calc(100% - #{$header-height-sm});
+
+    @include breakpoint(small-tablet-up) {
+      height: calc(100% - #{$header-height-lg});
+    }
+  }
+
+  .content,
+  .graphic {
+    flex-basis: 50%;
+  }
+
+  .graphic {
+    background: linear-gradient(#5385e1 70%, #3a69c0 70%);
+  }
+
+  .graphic__img {
+    margin: 0 auto;
+    max-width: 90%;
+    position: relative;
+    top: 43%;
+  }
+
+  .content {
+    align-items: center;
+    display: flex;
+  }
+
+  .content__list {
+    list-style-type: upper-alpha;
+    padding-left: $left-padding-sm * 2;
+
+    @include breakpoint(small-tablet-up) {
+      padding-left: $left-padding-lg * 2;
+    }
+
+    li {
+      color: #646464;
+      margin: rem(10) 0;
+
+      @media screen and (min-width: 472px) {
+        font-size: rem(23);
+        margin: rem(20) 0;
+      }
+
+      @include breakpoint(small-tablet-up) {
+        font-size: rem(30);
+        margin: rem(30) 0;
+      }
+
+      @include breakpoint(large-tablet-up) {
+        font-size: rem(34);
+        padding-left: rem(20);
+      }
+    }
+  }
+}

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

@@ -182,7 +182,7 @@ $section-top-padding-desktop: $nav-height + 110px;
     }
   }
 
-  img {
+  .microcosm-graphic {
     height: 100%;
     width: 100%;
   }