ryan-roemer · ryan-roemer · Sep 11, 2015 · Sep 10, 2015 · Sep 10, 2015 · Sep 11, 2015
diff --git a/index.jsx b/index.jsx
@@ -18,7 +18,7 @@ config.html = require("./themes/formidable/html");
 // Styling
 import "normalize.css";
 import "./themes/formidable/index.css";
-import "highlight.js/styles/monokai_sublime.css";
+import "spectacle/node_modules/highlight.js/styles/monokai_sublime.css";
 
 // Hack the favicon into the build directory.
 // This _places_ it in build output.

diff --git a/package.json b/package.json
@@ -15,25 +15,24 @@
   "author": "",
   "license": "",
   "dependencies": {
-    "alt": "^0.17.1",
+    "alt": "0.16.10",
     "autoprefixer-core": "^5.2.1",
     "babel": "^5.8.21",
     "babel-core": "^5.8.22",
     "babel-loader": "^5.3.2",
     "css-loader": "^0.15.6",
     "file-loader": "^0.8.4",
-    "highlight.js": "^8.7.0",
-    "hjs-webpack": "^2.12.2",
+    "hjs-webpack": "2.8.1",
     "json-loader": "^0.5.2",
     "normalize.css": "^3.0.3",
     "postcss-loader": "^0.5.1",
     "raw-loader": "^0.5.1",
-    "react": "^0.13.3",
+    "react": "0.13.3",
     "react-hot-loader": "^1.2.8",
-    "react-router": "^1.0.0-beta2",
-    "spectacle": "0.0.5",
-    "style-loader": "^0.12.3",
-    "stylus-loader": "^1.2.1",
+    "react-router": "1.0.0-beta2",
+    "spectacle": "0.0.9",
+    "style-loader": "0.12.3",
+    "stylus-loader": "1.2.1",
     "url-loader": "^0.5.6",
     "webpack": "^1.11.0",
     "yeticss": "^7.0.3"

diff --git a/presentation/deck.jsx b/presentation/deck.jsx
@@ -25,10 +25,6 @@ const images = {
 
 preloader([images.city]);
 
-// Themes
-// ------
-import theme from "../themes/formidable/index";
-
 // Components
 // ----------
 // A meaningful "point" in text.
@@ -115,26 +111,26 @@ export default class extends React.Component {
           * Title
           * --------------------------------------------------------------- */}
         <Slide bgImage={images.polygons}>
-          <Text fit bold caps textColor={theme.colors.primary} fontFamily={theme.fonts.primary}>
+          <Text fit bold caps textColor="primary" textFont="primary">
             Wrangling
           </Text>
-          <Text fit bold caps textColor={theme.colors.primary} fontFamily={theme.fonts.primary}>
+          <Text fit bold caps textColor="primary" textFont="primary">
             Large Scale
           </Text>
-          <Text fit bold caps textColor={theme.colors.primary} fontFamily={theme.fonts.primary}>
+          <Text fit bold caps textColor="primary" textFont="primary">
             Frontend Web Applications
           </Text>
           <div style={{display: "inline-block", marginTop: "2.5em"}}>
-            <Text style={{display: "inline-block"}}>
+            <Text style={{display: "inline-block", fontSize: "2.5em"}}>
               <Link href="https://twitter.com/ryan_roemer">
                 @ryan_roemer
               </Link>
             </Text>
             <Text style={{display: "inline-block", margin: "0 0.35em"}}
-                  textColor={theme.colors.darkerGray}>
+                  textColor="darkerGray">
               |
             </Text>
-            <Text style={{display: "inline-block"}}>
+            <Text style={{display: "inline-block", fontSize: "2.5em"}}>
               <Link href="http://surge2015.formidablelabs.com">
                 surge2015.formidablelabs.com
               </Link>
@@ -202,13 +198,13 @@ export default class extends React.Component {
             */}
         </Slide>
         <Slide bgColor="tertiary">
-          <Heading size={4} bold fit caps textColor={theme.colors.lightestGray}>
+          <Heading size={4} bold fit caps textColor="lightestGray">
             Lots of JavaScript
           </Heading>
-          <Heading size={4} bold fit caps textColor={theme.colors.primary}>
+          <Heading size={4} bold fit caps textColor="primary">
             In the browser
           </Heading>
-          <Heading size={4} bold fit caps textColor={theme.colors.lightestGray}>
+          <Heading size={4} bold fit caps textColor="lightestGray">
             Written by large teams
           </Heading>
         </Slide>
@@ -371,7 +367,7 @@ export default class extends React.Component {
           </Link>
         </Slide>
         <Slide bgColor="secondary">
-          <Heading size={1} caps fit textColor={theme.colors.lighterGray}>
+          <Heading size={1} caps fit textColor="lighterGray">
             Wrangling Adventures
           </Heading>
           <List textColor="primary">

diff --git a/themes/formidable/index.css b/themes/formidable/index.css
@@ -1,3 +1,15 @@
+* {
+  box-sizing: inherit;
+}
+
+html, body {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+
 .spectacle-slide {
   border-top: 2px solid #c23b33;
   -webkit-transform-origin: center center;

diff --git a/themes/formidable/index.js b/themes/formidable/index.js
@@ -62,5 +62,6 @@ theme.components.heading.h6.lineHeight = "1.2";
 theme.components.link.color = colors.darkGray;
 theme.components.list.listStylePosition = "outside";
 theme.components.text.color = colors.darkestGray;
+theme.components.text.fontFamily = fonts.secondary;
 
 export default theme;
diff --git a/themes/formidable/print.js b/themes/formidable/print.js
@@ -1 +1,32 @@
-module.exports = require("spectacle/themes/default/print");
+import print from "spectacle/themes/default/print";
+
+const colors = {
+  primary: "#000000",
+  secondary: "#000000",
+  tertiary: "#000000",
+  darkestGray: "#000000",
+  darkerGray: "#000000",
+  darkGray: "#000000",
+  gray: "#000000",
+  lightGray: "#000000",
+  lighterGray: "#000000",
+  lightestGray: "#000000",
+  darkRed: "#c23b33",
+  red: "#ca5144",
+  lightRed: "#000000",
+  lighterRed: "#000000",
+  lightestRed: "#000000"
+};
+
+const fonts = {
+  primary: "'Poppins', 'Futura', 'Century Gothic', 'Trebuchet MS', Helvetica, sans-serif",
+  secondary: "'Open Sans', 'Helvetica Neue', Helvetica, sans-serif",
+  tertiary: "'Anonymous Pro', Inconsolata, monospace"
+};
+
+print.colors = colors;
+print.fonts = fonts;
+print.global.body.fontFamily = fonts.primary;
+print.global.body.color = colors.primary;
+
+export default print;