55 lines
1.1 KiB
TypeScript
55 lines
1.1 KiB
TypeScript
import type { JSX } from 'preact'
|
|
|
|
export const rootCss = {
|
|
accentColor: '#48D200',
|
|
backgroundColor: '#F2E6DC',
|
|
} satisfies JSX.CSSProperties
|
|
|
|
export const bodyCss: JSX.CSSProperties = {
|
|
fontFamily: 'system-ui, "Trebuchet MS", sans-serif',
|
|
accentColor: rootCss.accentColor,
|
|
backgroundColor: rootCss.backgroundColor,
|
|
padding: '0.5rem 0',
|
|
}
|
|
|
|
export const messageCss: JSX.CSSProperties = {
|
|
padding: '1rem',
|
|
borderRadius: '0.4rem',
|
|
backgroundColor: 'white',
|
|
textWrap: 'balance',
|
|
}
|
|
|
|
export const headingCss: JSX.CSSProperties = {
|
|
fontFamily: 'Garamond, serif',
|
|
color: rootCss.accentColor,
|
|
textAlign: 'center',
|
|
margin: '-1rem 0 3rem',
|
|
fontSize: '2.5rem',
|
|
}
|
|
|
|
export const textCss: JSX.CSSProperties = {
|
|
fontSize: '1rem',
|
|
}
|
|
|
|
export const buttonCss: JSX.CSSProperties = {
|
|
color: 'white',
|
|
padding: '1rem',
|
|
borderRadius: '0.4rem',
|
|
fontSize: '1.2rem',
|
|
backgroundColor: rootCss.accentColor,
|
|
}
|
|
|
|
export const rawCss = `
|
|
a {
|
|
color: ${rootCss.accentColor};
|
|
}
|
|
|
|
h1 {
|
|
color: ${rootCss.accentColor};
|
|
}
|
|
`
|
|
|
|
export function BaseStyle() {
|
|
return <style dangerouslySetInnerHTML={{ __html: rawCss }}></style>
|
|
}
|