diff --git a/components/nav.js b/components/nav.js index 156f4f49..ce127266 100644 --- a/components/nav.js +++ b/components/nav.js @@ -134,7 +134,7 @@ const NavBar = styled(Box)` padding: ${theme.space[3]}px; text-decoration: none; @media (min-width: 56em) { - color: ${props => theme.colors[props.color] || color}; + color: ${props => theme.colors[props.color] || props.color}; } } ` diff --git a/components/slide-down.js b/components/slide-down.js new file mode 100644 index 00000000..c0309053 --- /dev/null +++ b/components/slide-down.js @@ -0,0 +1,29 @@ +import React from 'react' +import { Box } from 'theme-ui' +import styled from '@emotion/styled' +import { keyframes } from '@emotion/core' + +const slideDown = keyframes({ + from: { transform: 'translateY(-100%)', opacity: 0 }, + to: { transform: 'translateY(0)', opacity: 1 } +}) + +const Wrapper = styled(Box)` + @media (prefers-reduced-motion: no-preference) { + animation-name: ${slideDown}; + animation-fill-mode: backwards; + } +` + +const SlideDown = ({ duration = 500, delay = 0, ...props }) => ( + +) + +export default SlideDown diff --git a/components/slide-up.js b/components/slide-up.js index 7cd51c0d..377402c0 100644 --- a/components/slide-up.js +++ b/components/slide-up.js @@ -15,7 +15,7 @@ const Wrapper = styled(Box)` } ` -const SlideUp = ({ duration = 300, delay = 0, ...props }) => ( +const SlideUp = ({ duration = 500, delay = 0, ...props }) => ( ( + <> + +