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', },