169 lines
3.2 KiB
TypeScript
169 lines
3.2 KiB
TypeScript
import { globalStyle, style } from '@vanilla-extract/css'
|
|
import { radialGradient, rgba, transparentize } from 'polished'
|
|
import { sprinkles } from '$lib/styles/sprinkles.css'
|
|
import {
|
|
breakpoints,
|
|
colors,
|
|
mediaAt,
|
|
menuBackground,
|
|
transparent,
|
|
vars,
|
|
} from '$lib/styles/vars.css'
|
|
|
|
export const siteFooterClass = style([
|
|
sprinkles({
|
|
fontSize: { mobile: 'base', desktop: 'sm' },
|
|
paddingX: '2x',
|
|
paddingTop: '1x',
|
|
color: 'menuLink',
|
|
}),
|
|
|
|
radialGradient({
|
|
colorStops: [
|
|
`${menuBackground} 56%`,
|
|
`${transparentize(0.4, menuBackground)} 100%`,
|
|
],
|
|
extent: '160% 100% at 100% 100%',
|
|
fallback: transparent,
|
|
}),
|
|
{
|
|
'@media': {
|
|
[mediaAt(breakpoints.m)]: radialGradient({
|
|
colorStops: [
|
|
`${menuBackground} 48%`,
|
|
`${transparentize(1, menuBackground)} 100%`,
|
|
],
|
|
extent: '140% 100% at 100% 100%',
|
|
fallback: transparent,
|
|
}),
|
|
},
|
|
},
|
|
])
|
|
|
|
export const headerClass = sprinkles({
|
|
fontWeight: 'bold',
|
|
fontSize: 'base',
|
|
color: 'menuLink',
|
|
margin: 'none',
|
|
lineHeight: '3x',
|
|
marginBottom: '1x',
|
|
})
|
|
|
|
export const sectionListsClass = style([
|
|
sprinkles({
|
|
display: 'grid',
|
|
justifyItems: { mobile: 'center', desktop: 'start' },
|
|
textAlign: { mobile: 'center', desktop: 'start' },
|
|
maxWidth: 'max',
|
|
columnGap: '3x',
|
|
margin: 'auto',
|
|
}),
|
|
{
|
|
'@media': {
|
|
[mediaAt(breakpoints.l)]: {
|
|
gridTemplateColumns: 'auto auto auto',
|
|
},
|
|
},
|
|
},
|
|
])
|
|
|
|
export const sectionListSectionClass = sprinkles({
|
|
marginY: '3x',
|
|
})
|
|
|
|
export const noWrapClass = sprinkles({
|
|
whiteSpace: 'nowrap',
|
|
})
|
|
|
|
export const listUlClass = sprinkles({
|
|
listStyle: 'none',
|
|
padding: 'none',
|
|
margin: 'none',
|
|
})
|
|
|
|
export const listLiClass = sprinkles({
|
|
marginLeft: '1x',
|
|
})
|
|
|
|
export const nestedListLiClass = style([
|
|
listLiClass,
|
|
sprinkles({
|
|
fontSize: 'sm',
|
|
}),
|
|
])
|
|
|
|
export const socialLinkLabelClass = sprinkles({
|
|
paddingX: '1x',
|
|
})
|
|
|
|
export const svgClass = style({
|
|
fill: vars.color.menuLink,
|
|
height: '1em',
|
|
width: '1em',
|
|
})
|
|
|
|
export const strokeSvgClass = style([
|
|
svgClass,
|
|
{
|
|
stroke: vars.color.menuLink,
|
|
strokeWidth: '2px',
|
|
},
|
|
])
|
|
|
|
export const socialLinkClass = sprinkles({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: {
|
|
mobile: 'center',
|
|
desktop: 'start',
|
|
},
|
|
})
|
|
|
|
export const bottomLineClass = sprinkles({
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
marginX: 'auto',
|
|
paddingBottom: '1x',
|
|
marginTop: '2x',
|
|
maxWidth: 'max',
|
|
})
|
|
|
|
export const dateClass = sprinkles({
|
|
fontSize: 'xs',
|
|
whiteSpace: 'nowrap',
|
|
})
|
|
|
|
export const boldClass = sprinkles({
|
|
fontWeight: 'bold',
|
|
})
|
|
|
|
export const hrClass = style([
|
|
sprinkles({
|
|
marginY: '2x',
|
|
marginX: '1x',
|
|
}),
|
|
{
|
|
color: rgba(colors.midnightBlue, 0.14),
|
|
borderWidth: '1px 0 0',
|
|
},
|
|
])
|
|
|
|
export const latestPostsClass = style({})
|
|
|
|
globalStyle(`${siteFooterClass} a`, {
|
|
color: vars.color.menuLink,
|
|
})
|
|
|
|
globalStyle(`${headerClass} a:link, ${headerClass} a:visited`, {
|
|
color: vars.color.menuLink,
|
|
})
|
|
|
|
globalStyle(`${siteFooterClass} a:hover`, {
|
|
color: vars.color.menuLinkHover,
|
|
})
|
|
|
|
globalStyle(`${latestPostsClass} li a:visited:not(:hover)`, {
|
|
color: vars.color.linkVisited,
|
|
})
|
|
|