From 8ca3ce15177bb69ef58a1bcd52ed865501245114 Mon Sep 17 00:00:00 2001
From: Brent Jackson <jxnblk@gmail.com>
Date: Sun, 21 Apr 2019 17:44:52 -0400
Subject: [PATCH] Edit aspect ratio themes

---
 docs/themes.md                              | 30 +++++++++++++++++++++
 packages/components/src/AspectRatioSlide.js |  2 +-
 packages/themes/aspect-4-3.js               |  2 +-
 packages/themes/aspect.js                   |  2 +-
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/docs/themes.md b/docs/themes.md
index f0f75b1..b54a4bb 100644
--- a/docs/themes.md
+++ b/docs/themes.md
@@ -5,6 +5,7 @@ Default
 
 ```mdx
 export { default as theme } from 'mdx-deck/themes
+
 '
 ```
 
@@ -15,6 +16,7 @@ Big
 
 ```mdx
 export { big as theme } from 'mdx-deck/themes
+
 '
 ```
 
@@ -25,6 +27,7 @@ Book
 
 ```mdx
 export { book as theme } from 'mdx-deck/themes
+
 '
 ```
 
@@ -35,6 +38,7 @@ Code
 
 ```mdx
 export { code as theme } from 'mdx-deck/themes
+
 '
 ```
 
@@ -45,6 +49,7 @@ Comic
 
 ```mdx
 export { comic as theme } from 'mdx-deck/themes
+
 '
 ```
 
@@ -55,6 +60,7 @@ Condensed
 
 ```mdx
 export { condensed as theme } from 'mdx-deck/themes
+
 '
 ```
 
@@ -65,6 +71,7 @@ Dark
 
 ```mdx
 export { dark as theme } from 'mdx-deck/themes
+
 '
 ```
 
@@ -75,6 +82,7 @@ Future
 
 ```mdx
 export { future as theme } from 'mdx-deck/themes
+
 '
 ```
 
@@ -85,6 +93,7 @@ Hack
 
 ```mdx
 export { hack as theme } from 'mdx-deck/themes
+
 '
 ```
 
@@ -100,6 +109,7 @@ Notes
 
 ```mdx
 export { notes as theme } from 'mdx-deck/themes
+
 '
 ```
 
@@ -115,6 +125,7 @@ Script
 
 ```mdx
 export { script as theme } from 'mdx-deck/themes
+
 '
 ```
 
@@ -125,6 +136,7 @@ Swiss
 
 ```mdx
 export { swiss as theme } from 'mdx-deck/themes
+
 '
 ```
 
@@ -135,6 +147,7 @@ Yellow
 
 ```mdx
 export { yellow as theme } from 'mdx-deck/themes
+
 '
 ```
 
@@ -144,6 +157,7 @@ Poppins
 
 ```mdx
 export { poppins as theme } from 'mdx-deck/themes
+
 '
 ```
 
@@ -153,6 +167,7 @@ Syntax Highlighter
 
 ```mdx
 export { syntaxHighlighter as theme } from 'mdx-deck/themes
+
 '
 ```
 
@@ -162,5 +177,20 @@ Syntax Highlighter Prism
 
 ```mdx
 export { syntaxHighlighterPrism as theme } from 'mdx-deck/themes
+
+'
+```
+
+Aspect 16:9
+
+```mdx
+export { aspect as theme } from '@mdx-deck/themes
+'
+```
+
+Aspect 4:3
+
+```mdx
+export { aspect43 as theme } from '@mdx-deck/themes
 '
 ```
diff --git a/packages/components/src/AspectRatioSlide.js b/packages/components/src/AspectRatioSlide.js
index b0f8d50..eabc6b7 100644
--- a/packages/components/src/AspectRatioSlide.js
+++ b/packages/components/src/AspectRatioSlide.js
@@ -4,7 +4,7 @@ import styled from '@emotion/styled'
 import FluidFontSize from './FluidFontSize'
 
 const getPadding = ratio =>
-  ratio > 1 ? (1 - ratio) * 100 + '%' : ratio * 100 + '%'
+  ratio > 1 ? (1 / ratio) * 100 + '%' : ratio * 100 + '%'
 
 const paddingBottom = props => ({
   paddingBottom: getPadding(props.theme.aspectRatio),
diff --git a/packages/themes/aspect-4-3.js b/packages/themes/aspect-4-3.js
index 840c417..1a1a0c7 100644
--- a/packages/themes/aspect-4-3.js
+++ b/packages/themes/aspect-4-3.js
@@ -3,5 +3,5 @@ import aspect from './aspect'
 
 export default theme =>
   merge(theme, aspect(theme), {
-    aspectRatio: 9 / 16,
+    aspectRatio: 4 / 3,
   })
diff --git a/packages/themes/aspect.js b/packages/themes/aspect.js
index 55f2441..e30f8e3 100644
--- a/packages/themes/aspect.js
+++ b/packages/themes/aspect.js
@@ -8,7 +8,7 @@ export default theme => {
   }
 
   return merge(theme, {
-    aspectRatio: 9 / 16,
+    aspectRatio: 16 / 9,
     css: {
       fontSize: '1em',
     },