114 lines
2.2 KiB
TypeScript
114 lines
2.2 KiB
TypeScript
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({
|
|
boxSizing: 'border-box',
|
|
width: '100%',
|
|
maxWidth: '75em',
|
|
height: 'max-content',
|
|
padding: '2em',
|
|
});
|
|
|
|
export const title_group = style({
|
|
width: '100%',
|
|
height: '3.5em',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
'@media': {
|
|
'screen and (min-width: 768px)': {
|
|
height: '4em',
|
|
},
|
|
},
|
|
});
|
|
|
|
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: '1.5em',
|
|
'@media': {
|
|
'screen and (min-width: 768px)': {
|
|
fontSize: '2em',
|
|
},
|
|
},
|
|
});
|
|
|
|
export const supertitle = style({
|
|
margin: 0,
|
|
color: colors.foreground2,
|
|
fontSize: '0.9em',
|
|
'@media': {
|
|
'screen and (min-width: 768px)': {
|
|
fontSize: '1em',
|
|
},
|
|
},
|
|
});
|
|
|
|
export const download_button = style({
|
|
width: 'auto',
|
|
height: '100%',
|
|
marginLeft: '2em',
|
|
padding: 0,
|
|
border: `1px solid ${colors.background2}`,
|
|
backgroundColor: colors.background,
|
|
color: colors.foreground,
|
|
});
|
|
|
|
const download_button_image = style({
|
|
width: 'auto',
|
|
height: '100%',
|
|
transition: 'background-color 0.35s',
|
|
':hover': {
|
|
backgroundColor: colors.background2,
|
|
},
|
|
});
|
|
|
|
export const download_button_image_dark = style([download_button_image, {
|
|
display: 'block',
|
|
'@media': {
|
|
'(prefers-color-scheme: light)': {
|
|
display: 'none',
|
|
},
|
|
},
|
|
}]);
|
|
|
|
export const download_button_image_light = style([download_button_image, {
|
|
display: 'none',
|
|
'@media': {
|
|
'(prefers-color-scheme: light)': {
|
|
display: 'block',
|
|
},
|
|
},
|
|
}]);
|
|
|
|
export const download_tty_group = style({
|
|
display: 'none',
|
|
'@media': {
|
|
'screen and (min-width: 768px)': {
|
|
display: 'block',
|
|
margin: 0,
|
|
marginTop: '0.5em',
|
|
borderBottom: `1px solid ${colors.background2}`,
|
|
paddingBottom: '0.5em',
|
|
},
|
|
},
|
|
});
|
|
|
|
export const download_tty = style({
|
|
padding: '0.25em 0',
|
|
height: '3em',
|
|
})
|
|
|