Changes

- Added 'curl' and 'wget' commands. TODO: Add feedback when user clicks on them to copy (probably need a not bajillion years outdated Inkscape with icons that aren't completely broken first though :/)
- Fixed some light theme issues
- Fixed some sizing issues on mobile
- Download button actually works now

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

@@ -10,17 +10,23 @@ export const root = style({
 });
 
 export const center = style({
-	width:   '100%',
-	height:  'max-content',
-	padding: '2em',
+	boxSizing: 'border-box',
+	width:     '100%',
+	height:    'max-content',
+	padding:   '2em',
 });
 
 export const title_group = style({
 	marginBottom:   '1em',
 	width:          '100%',
-	height:         '4em',
+	height:         '3.5em',
 	display:        'flex',
-	justifyContent: 'space-between'
+	justifyContent: 'space-between',
+	'@media': {
+		'screen and (min-width: 768px)': {
+			height: '4em',
+		},
+	},
 });
 
 export const title_text_group = style({
@@ -32,12 +38,23 @@ export const title_text_group = style({
 
 export const title = style({
 	margin:   0,
-	fontSize: '2em',
+	fontSize: '1.5em',
+	'@media': {
+		'screen and (min-width: 768px)': {
+			fontSize: '2em',
+		},
+	},
 });
 
 export const supertitle = style({
-	margin: 0,
-	color:  colors.foreground2
+	margin:   0,
+	color:    colors.foreground2,
+	fontSize: '0.9em',
+	'@media': {
+		'screen and (min-width: 768px)': {
+			fontSize: '1em',
+		},
+	},
 });
 
 export const download_button = style({
@@ -46,22 +63,48 @@ export const download_button = style({
 	marginLeft:      '2em',
 	border:          0,
 	padding:         0,
-	backgroundColor: colors.background2,
+	border:          `1px solid ${colors.background2}`,
+	backgroundColor: colors.background,
 	color:           colors.foreground,
 });
 
-export const download_button_image = style({
+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',
-	width:   'auto',
-	height:  '100%',
+	'@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,
+			marginBottom:  '1em',
+			borderBottom:  `1px solid ${colors.background2}`,
+			paddingBottom: '1em',
+		},
+	},
 });
 
-export const download_text_section = style({
-	marginLeft: '1em',
-});
-
-export const download_text = style({
-	margin:     '0.5em 0',
-	fontFamily: 'monospace',
-	fontSize:   '1.5em',
-});