final updates

README.md

@@ -1,2 +1,3 @@
 Either run locally with `npm install && npm run dev` or use
-Docker and `bin/run`. Connect to `http://localhost:3500`.
+Docker and `bin/run`. Connect to `http://localhost:3500` or
+`http://$(docker-machine ip default):3500`.

dist/style.css

@@ -22,17 +22,17 @@
   font-weight: 700; }
 
 .styles__small-text___thSOA {
-  font-size: 2em;
+  font-size: 2.75em;
   font-weight: 400; }
 
 .styles__code___1WYoK, .styles__code-large___2KxFW {
   text-align: left; }
 
 .styles__code___1WYoK {
-  font-size: 0.75em; }
+  font-size: 1em; }
 
 .styles__code-large___2KxFW {
-  font-size: 1.35em; }
+  font-size: 1.4em; }
 html, body, #app {
   width: 100%;
   height: 100%; }
@@ -41,6 +41,9 @@ html, body {
   padding: 0;
   margin: 0; }
 
+body {
+  background: linear-gradient(10deg, #e2efff 0%, #fff 100%); }
+
 * {
   user-select: none; }
 

src/global.scss

@@ -8,6 +8,10 @@ html, body {
   margin: 0;
 }
 
+body {
+  background: linear-gradient(10deg, #e2efff 0%, #fff 100%);
+}
+
 * {
   user-select: none;
 }

src/presentation.js

@@ -3,6 +3,7 @@ import WithCSS from 'react-css-modules';
 
 import Slides from './slides';
 import SlideList from './slide_list';
+import PresentationWrapper from './presentation_wrapper';
 
 import styles from './styles.scss';
 
@@ -62,10 +63,9 @@ export default class Presentation extends React.Component {
 
   render () {
     return (
-      <div styleName='presentation'>
-        <Slides slides={SlideList}
-                {...this.state} />
-      </div>
+      <PresentationWrapper>
+        <Slides slides={SlideList} {...this.state} />
+      </PresentationWrapper>
     );
   }
 }

src/presentation_wrapper.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import WithCSS from 'react-css-modules/dist/linkClass';
+
+import styles from './styles.scss';
+
+export default function PresentationWrapper(props) {
+  return WithCSS(
+    <div styleName='presentation'>{props.children}</div>,
+    styles
+  );
+}

src/slide_list.js

@@ -29,6 +29,7 @@ import BasicGuidelines from './slides/basic_guidelines';
 import PushDOMNodesDown from './slides/push_dom_nodes_down';
 import PushStateUp from './slides/push_state_up';
 import Thanks from './slides/thanks';
+import CSSIsGlobals from './slides/css_is_globals';
 
 export default [
   TitleSlide,
@@ -45,6 +46,7 @@ export default [
   React014ContainerBreakout,
   MoveStylesOutOfGlobalCSS,
   GlobalStyles,
+  CSSIsGlobals,
   ReactCSSModules,
   SCSSLocalStyles,
   RenderedLocalStyles,

src/slides/css_is_globals.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Slide from '../slide';
+import LargeText from '../large_text';
+import SmallText from '../small_text';
+
+export default (
+  <Slide title="CSS is Globals">
+    <LargeText>Globals!</LargeText>
+    <SmallText>and globals are usually bad</SmallText>
+  </Slide>
+);

src/slides/es6_warning.js

@@ -6,6 +6,5 @@ import SmallText from '../small_text';
 export default (
   <Slide title="ES6">
     <LargeText>ES6/ES7 decorators ahead!</LargeText>
-    <SmallText>#babelmasterrace</SmallText>
   </Slide>
 );

src/slides/higher_order_components.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Slide from '../slide';
 import LargeText from '../large_text';
-import SmallText from '../large_text';
+import SmallText from '../small_text';
 
 export default (
   <Slide title="Higher Order Components">

src/slides/push_dom_nodes_down.js

@@ -2,11 +2,14 @@ import React from 'react';
 import Slide from '../slide';
 import LargeText from '../large_text';
 import SmallText from '../small_text';
+import Spacer from '../spacer';
 
 export default (
   <Slide title="Push DOM Nodes Down">
     <LargeText>Push DOM Nodes Down</LargeText>
     <SmallText>...by making containers</SmallText>
     <SmallText>...by moving prop renderers deeper </SmallText>
+    <Spacer />
+    <SmallText>(this applies to React Native, too!)</SmallText>
   </Slide>
 );

src/slides/react014_container_breakout.js

@@ -5,7 +5,7 @@ import CodeLarge from '../code_large';
 
 export default (
   <Slide title="Break out the containers in React 0.14">
-    <SmallText>React 0.14</SmallText>
+    <SmallText>React 0.14 Stateless Function Components</SmallText>
     <CodeLarge>{`
 export default function NavbarRight(props) {
   return (

src/slides/react_css_modules.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import Slide from '../slide';
 import CodeLarge from '../code_large';
+import SmallText from '../small_text';
 
 export default (
   <Slide title="react-css-modules">
+    <SmallText><code>react-css-modules</code></SmallText>
     <CodeLarge>{`
 import WithCSS from 'react-css-modules';
 import styles from './navbar_styling.scss';

src/slides/wow.js

@@ -3,6 +3,6 @@ import Slide from '../slide';
 
 export default (
   <Slide title="wow">
-    <img src="http://i.stack.imgur.com/aP2dv.gif" />
+    <img src="http://i.stack.imgur.com/aP2dv.gif" height="40%" />
   </Slide>
 );

src/styles.scss

@@ -32,7 +32,7 @@
 .small-text {
   @extend %font;
 
-  font-size: 2em;
+  font-size: 2.75em;
   font-weight: 400;
 }
 
@@ -43,11 +43,11 @@
 .code {
   @extend %code;
 
-  font-size: 0.75em;
+  font-size: 1em;
 }
 
 .code-large {
   @extend %code;
 
-  font-size: 1.35em;
+  font-size: 1.4em;
 }

webpack.config.js

@@ -14,6 +14,7 @@ module.exports = {
   },
   devtool: 'inline-source-map',
   watchOptions: {
+    poll: true,
     aggregateTimeout: 1000
   },
   module: {