refactor(templates): extract global css defs
This commit is contained in:
parent
0c6da9d10a
commit
f3918321bd
|
|
@ -1,10 +1,10 @@
|
|||
import {
|
||||
Body,
|
||||
Button,
|
||||
Code,
|
||||
Container,
|
||||
Heading,
|
||||
Html,
|
||||
Img,
|
||||
Preview,
|
||||
Section,
|
||||
Text,
|
||||
|
|
@ -12,6 +12,8 @@ import {
|
|||
import { Signature } from './components/Signature.tsx'
|
||||
import type { Template } from '../types.ts'
|
||||
import type { JSX } from 'preact'
|
||||
import { bodyCss, messageCss, rootCss, textCss } from './styles/base.tsx'
|
||||
import { BaseStyle } from './styles/base.tsx'
|
||||
|
||||
function Welcome(
|
||||
{ firstname, lastname, login }: {
|
||||
|
|
@ -21,24 +23,35 @@ function Welcome(
|
|||
},
|
||||
) {
|
||||
return (
|
||||
<Html lang='fr'>
|
||||
<Html lang='fr' style={{ fontSize: '14px' }}>
|
||||
<BaseStyle />
|
||||
<Preview>Bienvenue au FabLab Coh@bit</Preview>
|
||||
<Body>
|
||||
<Container style={{ border: '1px solid darkgrey' }}>
|
||||
<Body style={bodyCss}>
|
||||
<Container style={messageCss}>
|
||||
<Section>
|
||||
<Heading as='h1'>Bienvenue à Coh@bit</Heading>
|
||||
<Text>
|
||||
Bravo ! Vous avez rejoint le FabLab Coh@bit en tant que
|
||||
{firstname} {lastname} (id :{' '}
|
||||
<Code>{login}</Code>). Laissez parler votre créativité, vous êtes
|
||||
prêt à collaborer avec toute une communauté ouverte et
|
||||
accueillante.
|
||||
<Heading as='h1' style={headingCss}>
|
||||
Bienvenue au<Img
|
||||
src='cid:cohabit_logo.svg'
|
||||
alt='FabLab Cohabit'
|
||||
style={imgCss}
|
||||
/>
|
||||
</Heading>
|
||||
<Text style={textCss}>
|
||||
Bravo ! Vous avez rejoint le FabLab Coh@bit en tant que{' '}
|
||||
{firstname} {lastname}.
|
||||
</Text>
|
||||
<Text>
|
||||
Comment débuter :
|
||||
<Text style={textCss}>
|
||||
Votre identifiant est <span style={preCss}>{login}</span>.
|
||||
</Text>
|
||||
<Text style={textCss}>
|
||||
Laissez parler votre créativité, vous êtes prêt à collaborer avec
|
||||
toute une communauté ouverte et accueillante.
|
||||
</Text>
|
||||
<Text style={textCss}>
|
||||
Par où commencer ?
|
||||
</Text>
|
||||
|
||||
<ul>
|
||||
<ul style={{ fontSize: '1rem' }}>
|
||||
<li>
|
||||
Accéder au <a href='https://cohabit.fr'>site de Coh@bit</a>{' '}
|
||||
et découvrir le FabLab.
|
||||
|
|
@ -72,9 +85,13 @@ function Welcome(
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
<Button href='https://cohabit.fr/profile'>
|
||||
Accéder à mon compte
|
||||
</Button>
|
||||
<Container
|
||||
style={{ width: '100%', textAlign: 'center', padding: '1rem' }}
|
||||
>
|
||||
<Button href='https://cohabit.fr/profil' style={buttonCss}>
|
||||
Accéder à mon compte
|
||||
</Button>
|
||||
</Container>
|
||||
</Section>
|
||||
</Container>
|
||||
<Signature />
|
||||
|
|
@ -83,13 +100,34 @@ function Welcome(
|
|||
)
|
||||
}
|
||||
|
||||
const bodyCss: JSX.CSSProperties = {
|
||||
fontSize: 'large',
|
||||
fontFamily: 'sans-serif',
|
||||
const headingCss: JSX.CSSProperties = {
|
||||
fontFamily: 'Garamond, serif',
|
||||
color: rootCss.accentColor,
|
||||
textAlign: 'center',
|
||||
margin: '-1rem 0 3rem',
|
||||
fontSize: '2.5rem',
|
||||
}
|
||||
|
||||
const messageCss: JSX.CSSProperties = {
|
||||
const preCss: JSX.CSSProperties = {
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '1rem',
|
||||
padding: '0.2rem',
|
||||
borderRadius: '0.4rem',
|
||||
backgroundColor: rootCss.backgroundColor,
|
||||
}
|
||||
|
||||
const buttonCss: JSX.CSSProperties = {
|
||||
color: 'white',
|
||||
padding: '1rem',
|
||||
borderRadius: '0.4rem',
|
||||
fontSize: '1.2rem',
|
||||
backgroundColor: rootCss.accentColor,
|
||||
}
|
||||
|
||||
const imgCss: JSX.CSSProperties = {
|
||||
display: 'inline',
|
||||
padding: '1rem',
|
||||
transform: 'translateY(40%)',
|
||||
}
|
||||
|
||||
const template: Template<typeof Welcome, Parameters<typeof Welcome>[0]> = {
|
||||
|
|
|
|||
38
templates/styles/base.tsx
Normal file
38
templates/styles/base.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
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 textCss: JSX.CSSProperties = {
|
||||
fontSize: '1rem',
|
||||
}
|
||||
|
||||
export const rawCss = `
|
||||
a {
|
||||
color: ${rootCss.accentColor};
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: ${rootCss.accentColor};
|
||||
}
|
||||
`
|
||||
|
||||
export function BaseStyle() {
|
||||
return <style dangerouslySetInnerHTML={{ __html: rawCss }}></style>
|
||||
}
|
||||
Loading…
Reference in a new issue