Merge pull request #6 from component-driven/fixes

Fixes for the theme

Author: okonet

.gitignore

@@ -102,3 +102,5 @@ dist
 
 # TernJS port file
 .tern-port
+
+/public

slides/example.mdx

@@ -59,6 +59,52 @@ This is paragraph with `inline` code
 
 ---
 
+<Grid columns={3} gap={4}>
+<Box>
+
+### OSS
+
+<small>ex. Material UI, Ant Design, Bootstrap</small>
+
+</Box>
+<Box>
+
+### Mix
+
+<small>
+  Re-export or wrap components from OSS (Reakit, Theme-UI, Chakra, etc.)
+</small>
+
+</Box>
+<Box>
+
+### Custom
+
+<small>Build everything from scratch (using styled-system, etc.)</small>
+
+</Box>
+</Grid>
+
+---
+
+<Figure
+	src={'/assets/chakra.png'}
+	alt="Chakra UI Homepage"
+	caption={<a href="https://chakra-ui.com">https://chakra-ui.com</a>}
+/>
+
+---
+
+<Figure
+  src={"/assets/component-driven.svg"}
+  alt="Component-driven Logo"
+  caption={
+    <a href="https://component-driven.io">https://component-driven.io</a>
+  }
+/>
+
+---
+
 <Image src={"/assets/colorsnapper.png"} size="contain" />
 
 ---
@@ -115,12 +161,3 @@ function Code({ children, language, inline = false }) {
 
 <Demo src="https://component-driven.io" />
 
----
-
-<Figure
-  src={"/assets/component-driven.svg"}
-  alt="Component-driven Logo"
-  caption={
-    <a href="https://component-driven.io">https://component-driven.io</a>
-  }
-/>

src/components/Figure.jsx

@@ -1,41 +1,38 @@
 /** @jsx jsx */
 import * as React from "react";
 import PropTypes from "prop-types";
-import { jsx, Text, Flex, Grid, Image } from "theme-ui";
+import {jsx, Flex, Image, Text} from "theme-ui";
 
 function Figure({ src, alt, caption, ...props }) {
-	return (
-		<Flex
-			as="figure"
-			gap={4}
-			{...props}
-			sx={{
-				p: 5,
-				flexDirection: "column",
-				justifyItems: "center",
-				maxHeight: "100%",
-			}}
-		>
-			<Image
-				src={src}
-				alt={alt}
-				sx={{
-					display: "block",
-					flexShrink: 1,
-					maxHeight: "100%",
-				}}
-			/>
-			{caption && (
-				<Text
-					as="figcaption"
-					variant="styles.figcaption"
-					sx={{ flexShrink: 0, my: 4 }}
-				>
-					{caption}
-				</Text>
-			)}
-		</Flex>
-	);
+  return (
+    <Flex
+      as="figure"
+      gap={4}
+      {...props}
+      sx={{
+        flexDirection: "column",
+        justifyItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        height: "100%",
+      }}
+    >
+      <Flex
+        sx={{
+          flexGrow: 1,
+          maxHeight: "90%",
+          justifyContent: "center",
+        }}
+      >
+        <Image src={src} alt={alt} sx={{ objectFit: "scale-down" }} />
+      </Flex>
+      {caption && (
+        <Text as="figcaption" variant="styles.figcaption" sx={{ mt: 4 }}>
+          {caption}
+        </Text>
+      )}
+    </Flex>
+  );
 }
 
 Figure.propTypes = {

src/layouts/AnimatedGradient.jsx

@@ -17,6 +17,9 @@ const animation = keyframes`
 
 export default styled(Invert)(
 	css((theme) => ({
+        position: "absolute",
+        width: "100vw",
+        height: "100vh",
 		background: `linear-gradient(270deg, ${theme.colors.primary}, ${theme.colors.accent})`,
 		backgroundSize: "400% 400%",
 		animation: `${animation} 10s infinite`,

src/layouts/Primary.jsx

@@ -1,9 +1,13 @@
 import React from "react";
-import {Invert} from "mdx-deck";
+import { Box } from "theme-ui";
+import { Invert } from "mdx-deck";
 
 export default ({ children, imgSrc, sx, ...props }) => (
   <Invert
     sx={{
+      position: "absolute",
+      width: "100vw",
+      height: "100vh",
       backgroundColor: "primary",
       backgroundSize: "cover",
       backgroundImage: `url(${imgSrc})`,
@@ -13,6 +17,6 @@ export default ({ children, imgSrc, sx, ...props }) => (
     }}
     {...props}
   >
-    {children}
+    <Box sx={{ m: -5, p: 5 }}>{children}</Box>
   </Invert>
 );

src/layouts/Secondary.jsx

@@ -2,6 +2,9 @@ import React from "react";
 import {Invert} from "mdx-deck";
 
 export default ({children, imgSrc, sx,...props}) => <Invert sx={{
+	position: "absolute",
+	width: "100vw",
+	height: "100vh",
 	backgroundColor: "secondary",
 	backgroundSize: "cover",
 	backgroundImage: `url(${imgSrc})`,

src/theme.js

@@ -1,6 +1,7 @@
 export default {
   aspectRatio: 9 / 16,
   googleFont: "https://www.monolisa.dev/static/fonts.css",
+  space: [0, "0.25rem", "0.5rem", "1rem", "2rem", "4rem"],
   fonts: {
     body: "MonoLisa, sans-serif",
     heading: "MonoLisa, sans-serif",
@@ -53,7 +54,7 @@ export default {
     root: {
       m: 0,
       bg: "background",
-      fontSize: "2.5vmax", // Make the typograpy respond to window size
+      fontSize: "2vmax", // Make the typography respond to window size
       fontFamily: "body",
       fontWeight: "body",
       fontFeatureSettings: `'kern', 'pnum', common-ligatures contextual historical-ligatures`,
@@ -65,6 +66,9 @@ export default {
         fontFamily: "monospace",
       },
     },
+    Slide: {
+      p: 5,
+    },
     Split: {
       px: 5,
       width: "100%",