jxnblk/mdx-deck
1
1
Fork 0
mirror of https://github.com/jxnblk/mdx-deck.git synced 2024-11-26 00:35:02 +03:00
Code Issues Projects Releases Wiki Activity

Spike out aspect ratio slide

Browse Source
This commit is contained in:
Brent Jackson 2019-04-20 21:56:46 -04:00
parent c689ff76ca
commit fa35e64695
4 changed files with 70 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/demo.mdx
View File

@ -2,7 +2,13 @@ import { Head, Image, Notes, Appear } from '@mdx-deck/components'
import { Invert, Split, SplitRight, FullScreenCode, Horizontal} from '@mdx-deck/layouts'
import Counter from './Counter'
export { default as theme } from '@mdx-deck/themes/future'
import future from '@mdx-deck/themes/future'
import aspect from '@mdx-deck/themes/aspect'
export const themes = [
future,
aspect,
]
<Head>
<title>mdx-deck</title>

4
packages/components/src/FluidFontSize.js
View File

@ -2,7 +2,7 @@
import React, { useLayoutEffect, useRef, useState } from 'react'
import ResizeObserver from 'resize-observer-polyfill'
export const FluidFontSize = ({ base = 16, children }) => {
export const FluidFontSize = ({ base = 16, children, className }) => {
const div = useRef(null)
const [fontSize, setFontSize] = useState(base)
@ -22,7 +22,7 @@ export const FluidFontSize = ({ base = 16, children }) => {
}, [base])
return (
<div ref={div} style={{ fontSize }}>
<div ref={div} className={className} style={{ fontSize }}>
{children}
</div>
)

52
packages/components/src/Slide.js
View File

@ -1,6 +1,7 @@
import React from 'react'
import styled from '@emotion/styled'
import { Context } from './context'
import FluidFontSize from './FluidFontSize'
const themed = (...tags) => props =>
tags.map(tag => props.theme[tag] && { ['& ' + tag]: props.theme[tag] })
@ -28,19 +29,58 @@ const themedCode = props => ({
},
})
export const Root = styled.div(
const getPadding = ratio =>
ratio > 1 ? (1 - ratio) * 100 + '%' : ratio * 100 + '%'
const Root = styled.div({
width: '100vw',
height: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
})
const ratio = props =>
props.theme.aspectRatio
? {
width: '100%',
height: 0,
margin: 'auto',
position: 'relative',
outline: '2px solid red',
backgroundColor: 'tomato',
paddingBottom: getPadding(props.theme.aspectRatio),
}
: {
width: '100vw',
height: '100vw',
}
const Outer = styled('div')(ratio)
const innerRatio = props =>
props.theme.aspectRatio
? {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
}
: null
const Inner = styled(FluidFontSize)(
props => ({
fontFamily: props.theme.font,
color: props.theme.colors.text,
backgroundColor: props.theme.colors.background,
width: '100vw',
height: '100vh',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
}),
innerRatio,
props => props.theme.css,
props => props.theme.Slide,
themedLinks,
@ -74,7 +114,11 @@ export const Slide = ({ index, context, ...props }) => (
...context,
}}
>
<Root {...props} />
<Root>
<Outer {...props}>
<Inner {...props} />
</Outer>
</Root>
</Context.Provider>
)

13
packages/themes/aspect.js
View File

@ -1,3 +1,16 @@
export default {
aspectRatio: 9 / 16,
css: {
fontSize: '1em',
textAlign: 'center',
'@media screen and (min-width:56em)': {
fontSize: 'inherit',
},
'@media screen and (min-width:64em)': {
fontSize: 'inherit',
},
'@media print': {
fontSize: 'inherit',
},
},
}