refactor(templates): move some css styles to avoid duplication

templates/Welcome.tsx

@@ -12,7 +12,14 @@ 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 {
+	bodyCss,
+	buttonCss,
+	headingCss,
+	messageCss,
+	rootCss,
+	textCss,
+} from './styles/base.tsx'
 import { BaseStyle } from './styles/base.tsx'
 
 function Welcome(
@@ -104,14 +111,6 @@ function Welcome(
 	)
 }
 
-const headingCss: JSX.CSSProperties = {
-	fontFamily: 'Garamond, serif',
-	color: rootCss.accentColor,
-	textAlign: 'center',
-	margin: '-1rem 0 3rem',
-	fontSize: '2.5rem',
-}
-
 const preCss: JSX.CSSProperties = {
 	fontFamily: 'monospace',
 	fontSize: '1rem',
@@ -120,14 +119,6 @@ const preCss: JSX.CSSProperties = {
 	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',

templates/styles/base.tsx

@@ -19,10 +19,26 @@ export const messageCss: JSX.CSSProperties = {
 	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};