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