100 lines
2.3 KiB
TypeScript
100 lines
2.3 KiB
TypeScript
import { createScope, Styles } from '../../src'
|
|
import { theme } from './helpers'
|
|
|
|
const { define } = createScope('Landing')
|
|
|
|
const Page = define('Page', {
|
|
base: 'body',
|
|
|
|
margin: 0,
|
|
padding: theme.spacing.xl,
|
|
minHeight: '100vh',
|
|
fontFamily: theme.fonts.mono,
|
|
background: theme.colors.bg,
|
|
color: theme.colors.fg,
|
|
})
|
|
|
|
const Container = define('Container', {
|
|
maxWidth: 800,
|
|
margin: '0 auto',
|
|
})
|
|
|
|
const Pre = define('Pre', {
|
|
base: 'pre',
|
|
|
|
fontSize: 14,
|
|
lineHeight: 1.4,
|
|
marginBottom: theme.spacing.xl,
|
|
color: theme.colors.fg,
|
|
whiteSpace: 'pre',
|
|
})
|
|
|
|
const P = define('P', {
|
|
base: 'p',
|
|
|
|
fontSize: 16,
|
|
lineHeight: 1.6,
|
|
marginBottom: theme.spacing.xl,
|
|
color: theme.colors.fgMuted,
|
|
})
|
|
|
|
const LinkSection = define('LinkSection', {
|
|
marginTop: theme.spacing.xxl,
|
|
paddingTop: theme.spacing.xl,
|
|
borderTop: `1px solid ${theme.colors.border}`,
|
|
})
|
|
|
|
const Link = define('Link', {
|
|
base: 'a',
|
|
|
|
display: 'inline-block',
|
|
marginRight: theme.spacing.xl,
|
|
padding: `${theme.spacing.sm}px ${theme.spacing.lg}px`,
|
|
background: theme.colors.bgElevated,
|
|
border: `1px solid ${theme.colors.border}`,
|
|
color: theme.colors.fg,
|
|
textDecoration: 'none',
|
|
fontSize: 14,
|
|
|
|
states: {
|
|
':hover': {
|
|
background: theme.colors.bgHover,
|
|
borderColor: theme.colors.borderActive,
|
|
}
|
|
}
|
|
})
|
|
|
|
export const LandingPage = () => (
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>forge</title>
|
|
<Styles />
|
|
</head>
|
|
<Page>
|
|
<Container>
|
|
<Pre>{`╔═╝╔═║╔═║╔═╝╔═╝
|
|
╔═╝║ ║╔╔╝║ ║╔═╝
|
|
╝ ══╝╝ ╝══╝══╝`}</Pre>
|
|
|
|
<P>
|
|
Typed, local, variant-driven CSS. No globals, no selector hell, no inline styles.
|
|
Built for TSX. Compiles to real CSS.
|
|
</P>
|
|
|
|
<P>
|
|
CSS is hostile to humans at scale. Forge fixes that by making styles local,
|
|
typed, and composable. Parts replace selectors. Variants replace inline styles.
|
|
Everything deterministic.
|
|
</P>
|
|
|
|
<LinkSection>
|
|
<Link href="/ssr">SSR demos →</Link>
|
|
<Link href="/spa">SPA demos →</Link>
|
|
</LinkSection>
|
|
</Container>
|
|
</Page>
|
|
</html>
|
|
)
|