Flexbox errythang

Author: kenwheeler

README.markdown

@@ -166,7 +166,7 @@ The slide tag represents each slide in the presentation. It supports the followi
 
 |Name|PropType|Description|
 |---|---|---|
-|align| React.PropTypes.string | Accepts a space delimited value for positioning interior content. The first value can be `left`, `center`, or `right`. The second value can be `top`, `middle`, or `bottom`. You would provide this prop like `align="center middle"`, which is it's default.
+|align| React.PropTypes.string | Accepts a space delimited value for positioning interior content. The first value can be `flex-start` (left), `center` (middle), or `flex-end` (bottom). The second value can be `flex-start` (top) , `center` (middle), or `flex-end` (bottom). You would provide this prop like `align="center middle"`, which is it's default.
 |transition|React.PropTypes.array|Accepts `slide`, `zoom`, `fade` or `spin`, and can be combined. Sets the slide transition.|
 |transitionDuration| React.PropTypes.number| Accepts integer value in milliseconds for slide transition duration.
 

src/slide.jsx

@@ -52,16 +52,17 @@ const Slide = React.createClass({
         left: 0,
         width: '100%',
         height: '100%',
-        display: 'table',
-        tableLayout: 'fixed'
+        display: 'flex'
       },
       inner: {
-        display: 'table-cell',
-        textAlign: this.props.align ? this.props.align.split(' ')[0] : 'center',
-        verticalAlign: this.props.align ? this.props.align.split(' ')[1] : 'middle',
+        display: 'flex',
+        flex: 1,
+        alignItems: this.props.align ? this.props.align.split(' ')[1] : 'center',
+        justifyContent: this.props.align ? this.props.align.split(' ')[0] : 'center',
         padding: this.state.zoom > 0.6 ? config.margin : 10
       },
       content: {
+        flex: 1,
         maxWidth: config.width,
         fontSize: 16 * this.state.zoom
       }

themes/default/index.js

@@ -21,7 +21,10 @@ module.exports = {
       fontSize: '2em',
       color: colors.secondary,
       overflow: 'hidden'
-    }
+    },
+    '*': {
+      boxSizing: 'border-box'
+    },
   },
   components: {
     blockquote: {
@@ -46,15 +49,17 @@ module.exports = {
       marginTop: '1em'
     },
     content: {
-      margin: 'auto'
+      margin: 'auto',
+      textAlign: 'center'
     },
     codePane: {
       pre: {
-        maxWidth: 800,
         margin: 'auto',
-        fontSize: '1.5em',
+        fontSize: '1em',
         fontWeight: 'normal',
-        fontFamily: fonts.tertiary
+        fontFamily: fonts.tertiary,
+        minWidth: '100%',
+        maxWidth: 800,
       },
       code: {
         textAlign: 'left',