MVP

src/app/[file]/page.css.ts

@@ -0,0 +1,67 @@
+import { style } from '@vanilla-extract/css';
+
+import * as colors from '../colors.css';
+
+export const root = style({
+	width:          '100%',
+	height:         '100%',
+	display:        'flex',
+	justifyContent: 'center',
+});
+
+export const center = style({
+	width:   '100%',
+	height:  'max-content',
+	padding: '2em',
+});
+
+export const title_group = style({
+	marginBottom:   '1em',
+	width:          '100%',
+	height:         '4em',
+	display:        'flex',
+	justifyContent: 'space-between'
+});
+
+export const title_text_group = style({
+	flexGrow:     1,
+	boxSizing:    'border-box',
+	height:       '100%',
+	borderBottom: `1px solid ${colors.background2}`,
+});
+
+export const title = style({
+	margin:   0,
+	fontSize: '2em',
+});
+
+export const supertitle = style({
+	margin: 0,
+	color:  colors.foreground2
+});
+
+export const download_button = style({
+	width:           'auto',
+	height:          '100%',
+	marginLeft:      '2em',
+	border:          0,
+	padding:         0,
+	backgroundColor: colors.background2,
+	color:           colors.foreground,
+});
+
+export const download_button_image = style({
+	display: 'block',
+	width:   'auto',
+	height:  '100%',
+});
+
+export const download_text_section = style({
+	marginLeft: '1em',
+});
+
+export const download_text = style({
+	margin:     '0.5em 0',
+	fontFamily: 'monospace',
+	fontSize:   '1.5em',
+});