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.
1.9 kB · 122 lines
TypeScript
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123import { Theme, ThemeUICSSObject } from '@theme-ui/css'import { NestedThemeUICSSObject } from './'
const tag: ThemeUICSSObject = { display: 'inline-block', borderRadius: 2, paddingY: 1, paddingX: 2, backgroundColor: 'muted', fontSize: 0, color: 'muted-text', textDecoration: 'none', transition: '0.2s ease color',
'&:hover': { color: 'text', },
'@media print': { border: 0, padding: 0, fontSize: 'inherit', },}
const links: NestedThemeUICSSObject = { nav: { display: 'inline-flex', alignItems: 'center', position: 'relative', top: (theme: Theme): string => `calc(${theme.space[1]} * 0.5)`, fontWeight: 'semi-bold', color: 'text', transition: '0.2s ease opacity',
'&:hover, &:focus': { color: 'text', opacity: 0.75, },
svg: { marginRight: [0, 2], fontSize: 3, }, },
logo: { color: 'text', textDecoration: 'none',
'&:hover': { color: 'text', }, },
ui: { color: 'text', textDecoration: 'none', transition: '0.2s ease color',
'&:hover': { color: 'accent', }, },
'view-all': { display: 'inline-flex', alignItems: 'center', fontSize: 0, fontWeight: 'bold', textTransform: 'uppercase', color: 'accent', textDecoration: 'none',
svg: { marginLeft: 2, transition: '0.2s ease transform', },
'&:hover': { color: 'accent',
svg: { transform: 'translateX(0.5rem)',
'@media (prefers-reduced-motion: reduce), (any-hover: none)': { transform: 'none', }, }, }, },
category: { fontSize: 0, fontWeight: 'bold', textTransform: 'uppercase', color: 'accent', textDecoration: 'none', transition: '0.2s ease color',
'&:hover': { color: 'accent', }, },
tag,
'tag-info': { ...tag,
border: 1, borderColor: 'muted-text', color: 'text',
'&:hover': { borderColor: 'accent', color: 'accent', }, },}
export default links