make the flag generator scalable

src/components/FlagGenerator.module.css

@@ -1,8 +1,9 @@
 .input {
- margin-top: 8px;
- margin-bottom: 8px;
- font-size: 16pt;
+ margin: 0.5em 0;
+ border: 0;
+ padding: 0.25em;
+ font-size: 2em;
+ width: 14.5em;
  background-color: rgb(var(--cmblack));
  color: white;
- border: 0;
 }

src/components/FlagGenerator.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "preact/hooks";
 import styles from "./FlagGenerator.module.css";
 
-const colors = {
+const colors: { [k: string]: string } = {
  "t": "rgb(var(--transblue))",
  "r": "rgb(var(--transpink))",
  "a": "white",
@@ -13,16 +13,16 @@ export default function FlagGenerator() {
  const [flag, setFlag] = useState("");
  let input: HTMLInputElement;
  const chars = [...flag.toLowerCase()].filter(x => "trans".includes(x));
- const height = 400 / chars.length;
+ const height = 20 / chars.length;
  useEffect(() => input.focus());
  return (
  <main>
  <input ref={x => input = x!} type="text" placeholder="trans, rat, ant, ..."
  spellcheck={false} autocorrect="off" class={styles.input}
  value={flag} onInput={e => setFlag(e.target.value)} />
  {chars.length ? chars.map(x => (
- <div style={{ width: 600, backgroundColor: colors[x], height }} />
- )) : <div style={{ width: 600, backgroundColor: "transparent", height: 400 }} />}
+ <div style={{ width: "30em", backgroundColor: colors[x], height: `${height}em` }} />
+ )) : <div style={{ width: "30em", backgroundColor: "transparent", height: "20em" }} />}
  </main>
  );
 }

src/pages/flag.astro

@@ -10,5 +10,12 @@ import Layout from "../layouts/Layout.astro";
 <style>
  :global(div#content) {
  width: max-content;
+ max-width: 100%;
+ font-size: 20px;
+ }
+ @media screen and (width <= 667px) {
+ :global(div#content) {
+ font-size: 3vw;
+ }
  }
 </style>