(Almost the) rest of the redesign (#880)

* Load demo img

* two-up styles

* Back button

* Button size tweak

* Move back btn

* Move options and back button into a single grid

* Simpler max height

* Responsive grid

* Feed index into options

* Option heading themes

* More option styles

* Changing checkbox position

* Theme range input & use transforms

* Range input underline theme

* Checkbox color

* Add toggle

* Reorder

* Arrow revealer

* Round two-up thumb

* Don't bundle CSS urls starting #

* Results in progress

* Fix Safari bugs

* Download blobs

* Loading spinner

* Hook up download button

* Different style for original image

* Mobile design for results

* Remove demo auto-loader

* Remove redundant colors

* Sticky headings

src/shared/prerendered-app/Intro/index.tsx

@@ -46,7 +46,7 @@ const demos = [
     url: logo,
     iconUrl: logoIcon,
   },
-];
+] as const;
 
 const blobAnimImport =
   !__PRERENDER__ && matchMedia('(prefers-reduced-motion: reduce)').matches

src/shared/prerendered-app/Intro/style.css

@@ -6,7 +6,7 @@
   display: grid;
   grid-template-rows: 1fr max-content max-content;
   font-size: 1.2rem;
-  color: var(--dark-text);
+  color: var(--dim-text);
 }
 
 .blob-canvas {

src/shared/prerendered-app/colors.css

@@ -2,18 +2,19 @@ html {
   --pink: #ff3385;
   --hot-pink: #ff0066;
   --white: #fff;
+  --black: #000;
+  --off-black: #1d1d1d;
+  --blue: #5fb4e4;
   --dim-blue: #0a7bcc;
   --deep-blue: #09f;
   --light-blue: #76c8ff;
+  --less-light-gray: #bcbcbc;
+  --medium-light-gray: #d1d1d1;
   --light-gray: #eaeaea;
-  --dark-text: #343a3e;
+  --dark-gray: #333;
+  --dim-text: #343a3e;
+  --dark-text: #142630;
 
   /* Old stuff: */
-  --gray-dark: rgba(0, 0, 0, 0.8);
-
-  --button-fg-color: 95, 180, 228;
   --button-fg: rgb(95, 180, 228);
-
-  --negative: rgb(207, 113, 127);
-  --positive: rgb(149, 212, 159);
 }