Add themes

docs/index.mdx

@@ -1,6 +1,5 @@
-export { future as theme } from '../themes'
+export { rye as theme } from '../themes'
 import { Image, Notes, Appear } from '../dist'
-import Layout from './Layout'
 import { Invert, Split, SplitRight } from '../layouts'
 
 # mdx-deck
@@ -97,7 +96,7 @@ Prop | Type | Description
 `bg` | string | sets background color
 
 ---
-export default Layout
+export default Invert
 
 # Get started :sunglasses:
 [GitHub](https://github.com/jxnblk/mdx-deck)

package.json

@@ -20,7 +20,7 @@
   "author": "Brent Jackson",
   "license": "MIT",
   "dependencies": {
-    "@compositor/webfont": "^1.0.38",
+    "@compositor/webfont": "^1.0.39",
     "@mdx-js/mdx": "^0.15.0-1",
     "@mdx-js/tag": "^0.14.1",
     "chalk": "^2.4.1",

src/index.js

@@ -246,6 +246,7 @@ export class SlideDeck extends React.Component {
                         key={i}
                         id={'slide-' + i}
                         index={i}
+                        className='Slide'
                       >
                         <Component />
                       </Slide>

src/layouts/Invert.js

@@ -7,6 +7,9 @@ const Invert = styled.div([], {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
+  '& a': {
+    color: 'inherit'
+  }
 }, color)
 
 Invert.defaultProps = {

src/themes/book.js

@@ -0,0 +1,26 @@
+import base from './base'
+
+const white = '#fffceb'
+const black = '#11111f'
+const blue = '#2d5dd7'
+
+export default {
+  ...base,
+  font: '"Crimson Text", cursive',
+  colors: {
+    text: black,
+    background: white,
+    link: blue
+  },
+  css: {
+    textAlign: 'left',
+    fontSize: '16px',
+    '@media screen and (min-width:64em)': {
+      fontSize: '32px',
+    },
+    '& .Slide > div': {
+      minWidth: '80vw',
+      minHeight: '60vh'
+    }
+  }
+}

src/themes/code.js

@@ -0,0 +1,18 @@
+import base from './base'
+
+const blue = '#00cdf1'
+const black = '#003d48'
+const link = '#0800e3'
+
+export default {
+  ...base,
+  font: '"Source Code Pro", monospace',
+  monospace: '"Source Code Pro", monospace',
+  colors: {
+    text: black,
+    background: blue,
+    link: link,
+    pre: blue,
+    preBackground: black,
+  }
+}

src/themes/hack.js

@@ -0,0 +1,29 @@
+import base from './base'
+
+const green = '#42ff71'
+
+export default {
+  ...base,
+  font: '"IBM Plex Mono", monospace',
+  monospace: '"IBM Plex Mono", monospace',
+  colors: {
+    text: green,
+    background: '#000',
+    link: green,
+    pre: '#000',
+    preBackground: green,
+    code: '#000',
+    codeBackground: green,
+  },
+  css: {
+    textAlign: 'left',
+    fontSize: '16px',
+    '@media screen and (min-width:64em)': {
+      fontSize: '32px',
+    },
+    '& .Slide > div': {
+      minWidth: '80vw',
+      minHeight: '60vh'
+    }
+  }
+}

src/themes/index.js

@@ -3,6 +3,21 @@ export { default as dark } from './dark'
 export { default as future } from './future'
 export { default as condensed } from './condensed'
 export { default as yellow } from './yellow'
+export { default as swiss } from './swiss'
+
+// serif
+export { default as book } from './book'
+
+// script
 export { default as script } from './script'
 export { default as comic } from './comic'
 export { default as notes } from './notes'
+export { default as code } from './code'
+export { default as lobster } from './lobster'
+
+// experimental
+export { default as hack } from './hack'
+export { default as rye } from './rye'
+// super
+// horror
+// big

src/themes/lobster.js

@@ -0,0 +1,16 @@
+import base from './base'
+
+// const text = '#360800'
+// '#4a0025'
+const text = '#220011'
+
+export default {
+  ...base,
+  font: 'Lobster, cursive',
+  monospace: '"Roboto Mono", monospace',
+  colors: {
+    text: text,
+    background: 'tomato',
+    link: text,
+  }
+}

src/themes/rye.js

@@ -0,0 +1,17 @@
+import base from './base'
+
+const white = '#ffeec1'
+
+export default {
+  ...base,
+  font: '"Rye", cursive',
+  monospace: '"Roboto Mono", monospace',
+  colors: {
+    text: white,
+    background: 'black',
+    link: white,
+  },
+  h1: {
+    textTransform: 'uppercase',
+  }
+}

src/themes/swiss.js

@@ -0,0 +1,27 @@
+import base from './base'
+
+const white = '#fff'
+const black = '#000'
+const blue = '#2d5dd7'
+const red = '#f00'
+
+export default {
+  ...base,
+  font: '"Helvetica Neue", Helvetica, Arial, sans-serif',
+  colors: {
+    text: black,
+    background: white,
+    link: red
+  },
+  css: {
+    textAlign: 'left',
+    fontSize: '16px',
+    '@media screen and (min-width:64em)': {
+      fontSize: '32px',
+    },
+    '& .Slide > div': {
+      minWidth: '80vw',
+      minHeight: '60vh'
+    }
+  }
+}