93 lines
1.8 KiB
TypeScript
93 lines
1.8 KiB
TypeScript
import { sprinkles } from '$lib/styles/sprinkles.css'
|
|
import {
|
|
transparent,
|
|
twitchEmbedBackground,
|
|
mediaAt,
|
|
breakpoints,
|
|
} from '$lib/styles/vars.css'
|
|
import { style } from '@vanilla-extract/css'
|
|
import { radialGradient, transparentize } from 'polished'
|
|
|
|
export const profilePicClass = sprinkles({
|
|
textAlign: 'center',
|
|
marginX: 'auto',
|
|
marginY: 'none',
|
|
})
|
|
|
|
export const profilePicImgClass = style({
|
|
aspectRatio: "auto 800 / 709",
|
|
maxHeight: '66vh'
|
|
})
|
|
|
|
export const mottoClass = sprinkles({
|
|
textAlign: 'center',
|
|
marginX: 'auto',
|
|
marginY: '2x',
|
|
fontSize: '2x',
|
|
})
|
|
|
|
export const welcomeNoteClass = sprinkles({
|
|
textAlign: 'center',
|
|
marginX: 'auto',
|
|
})
|
|
|
|
export const citeOwnerClass = sprinkles({
|
|
whiteSpace: 'nowrap',
|
|
})
|
|
|
|
export const twitchStreamPromoClass = style([
|
|
radialGradient({
|
|
colorStops: [
|
|
`${twitchEmbedBackground} 0%`,
|
|
`${transparentize(1, twitchEmbedBackground)} 60%`,
|
|
],
|
|
extent: '90% 40% at 50% 70%',
|
|
fallback: transparent,
|
|
}),
|
|
{
|
|
'@media': {
|
|
[mediaAt(breakpoints.l)]: radialGradient({
|
|
colorStops: [
|
|
`${twitchEmbedBackground} 0%`,
|
|
`${transparentize(1, twitchEmbedBackground)} 100%`,
|
|
],
|
|
extent: '180% 50% at 100% 50%',
|
|
fallback: transparent,
|
|
}),
|
|
},
|
|
},
|
|
])
|
|
|
|
export const twitchIframeClass = sprinkles({
|
|
flexGrow: 1,
|
|
maxWidth: 'image',
|
|
aspectRatio: 'monitor',
|
|
width: {
|
|
mobile: 'parent',
|
|
desktop: 'auto',
|
|
},
|
|
})
|
|
|
|
export const twitchEmbedClass = sprinkles({
|
|
display: 'flex',
|
|
padding: '3x',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
flexDirection: {
|
|
mobile: 'column',
|
|
desktop: 'row',
|
|
},
|
|
gap: '4x',
|
|
width: {
|
|
mobile: 'parent',
|
|
desktop: 'auto',
|
|
},
|
|
})
|
|
|
|
export const twitchAsideClass = sprinkles({
|
|
width: {
|
|
mobile: 'parent',
|
|
desktop: 's',
|
|
},
|
|
})
|