From f3918321bd0dbb0125e74c30e5b035f74fa93068 Mon Sep 17 00:00:00 2001 From: Julien Oculi Date: Thu, 11 Apr 2024 16:47:14 +0200 Subject: [PATCH] refactor(templates): extract global css defs --- templates/Welcome.tsx | 80 +++++++++++++++++++++++++++++---------- templates/styles/base.tsx | 38 +++++++++++++++++++ 2 files changed, 97 insertions(+), 21 deletions(-) create mode 100644 templates/styles/base.tsx diff --git a/templates/Welcome.tsx b/templates/Welcome.tsx index dae8b07..9560b24 100644 --- a/templates/Welcome.tsx +++ b/templates/Welcome.tsx @@ -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 ( - + + Bienvenue au FabLab Coh@bit - - + +
- Bienvenue à Coh@bit - - Bravo ! Vous avez rejoint le FabLab Coh@bit en tant que - {firstname} {lastname} (id :{' '} - {login}). Laissez parler votre créativité, vous êtes - prêt à collaborer avec toute une communauté ouverte et - accueillante. + + Bienvenue auFabLab Cohabit + + + Bravo ! Vous avez rejoint le FabLab Coh@bit en tant que{' '} + {firstname} {lastname}. - - Comment débuter : + + Votre identifiant est {login}. + + + Laissez parler votre créativité, vous êtes prêt à collaborer avec + toute une communauté ouverte et accueillante. + + + Par où commencer ? -
    +
    • Accéder au site de Coh@bit{' '} et découvrir le FabLab. @@ -72,9 +85,13 @@ function Welcome(
    - + + +
@@ -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[0]> = { diff --git a/templates/styles/base.tsx b/templates/styles/base.tsx new file mode 100644 index 0000000..01e9302 --- /dev/null +++ b/templates/styles/base.tsx @@ -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 +}