mailer/templates/styles/base.tsx

55 lines
1.1 KiB
TypeScript
Raw Normal View History

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>
}