117 lines
2.9 KiB
TypeScript
117 lines
2.9 KiB
TypeScript
import { createScope, Styles } from '../../src'
|
|
import { theme } from './themes'
|
|
|
|
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',
|
|
borderBottom: '1px solid var(--theme-colors-border)',
|
|
})
|
|
|
|
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')} ${theme('spacing-lg')}`,
|
|
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 = () => {
|
|
const themeScript = `
|
|
function switchTheme(themeName) {
|
|
document.body.setAttribute('data-theme', themeName)
|
|
localStorage.setItem('theme', themeName)
|
|
}
|
|
|
|
window.switchTheme = switchTheme
|
|
|
|
// Load saved theme or default to dark
|
|
const savedTheme = localStorage.getItem('theme') || 'dark'
|
|
document.body.setAttribute('data-theme', savedTheme)
|
|
`
|
|
|
|
return (
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>forge</title>
|
|
<Styles />
|
|
</head>
|
|
<Page data-theme="dark">
|
|
<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>
|
|
<script dangerouslySetInnerHTML={{ __html: themeScript }}></script>
|
|
</Page>
|
|
</html>
|
|
)
|
|
}
|