Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lowmess/lameass.recipes. A recipe site, but without the ads and 3,000 word essays lameass.recipes
nextjs sanity-io theme-ui typescript
Something went wrong. Try again.
969 B · 47 lines
TypeScript
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748import { Theme } from '@theme-ui/css'import { NestedThemeUICSSObject } from './'
const cards: NestedThemeUICSSObject = { primary: { position: 'relative', border: 1, borderColor: 'border', borderRadius: 2, backgroundColor: 'background', transition: '0.25s ease transform',
'&::before': { content: '""', display: 'block', position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, width: '100%', height: '100%', boxShadow: (theme: Theme): string => `0 2rem 4rem -0.5rem ${theme.colors['card-shadow']}`, opacity: 0, transition: '0.2s ease opacity',
'@media (prefers-reduced-motion: reduce), (any-hover: none)': { content: 'none', }, },
'&:hover': { transform: (theme: Theme): string => `translateY(-${theme.space[3]})`,
'@media (prefers-reduced-motion: reduce), (any-hover: none)': { transform: 'none', }, },
'&:hover::before': { opacity: 1, }, },}
export default cards