Feat/universalize

[cjshearer]

No description provided.

[cjshearer]

changed

html {
  font-size: 62.5% -> 12.5%;
}

body {
  ...
  font-size: 1.6rem -> 8rem;
  ...
}

so that

    --size-scale: 0.125rem;

    --size-1: 0.25rem;
    /*
      console.log(Array.from({length: 22},
        (_, i) => `--size-${1.5 + i / 2}`.replace('.', '-') + `: calc(var(--size-1) + ${i+1} * var(--size-scale));`).join("\n")
      )
    */
    --size-1-5: calc(var(--size-1) + 1 * var(--size-scale)); /*1.25rem*/
    --size-2: calc(var(--size-1) + 2 * var(--size-scale)); /*1.375rem*/
    --size-2-5: calc(var(--size-1) + 3 * var(--size-scale)); /*1.5rem*/
    --size-3: calc(var(--size-1) + 4 * var(--size-scale)); /*1.625rem*/
    --size-3-5: calc(var(--size-1) + 5 * var(--size-scale)); /*1.75rem*/
    --size-4: calc(var(--size-1) + 6 * var(--size-scale)); /*1.875rem*/
    --size-4-5: calc(var(--size-1) + 7 * var(--size-scale)); /*2rem*/
    --size-5: calc(var(--size-1) + 8 * var(--size-scale)); /*2.125rem*/
    --size-5-5: calc(var(--size-1) + 9 * var(--size-scale)); /*2.25rem*/
    --size-6: calc(var(--size-1) + 10 * var(--size-scale)); /*2.375rem*/
    --size-6-5: calc(var(--size-1) + 11 * var(--size-scale)); /*2.5rem*/
    --size-7: calc(var(--size-1) + 12 * var(--size-scale)); /*2.625rem*/
    --size-7-5: calc(var(--size-1) + 13 * var(--size-scale)); /*2.75rem*/
    --size-8: calc(var(--size-1) + 14 * var(--size-scale)); /*2.875rem*/
    --size-8-5: calc(var(--size-1) + 15 * var(--size-scale)); /*3rem*/
    --size-9: calc(var(--size-1) + 16 * var(--size-scale)); /*3.125rem*/
    --size-9-5: calc(var(--size-1) + 17 * var(--size-scale)); /*3.25rem*/
    --size-10: calc(var(--size-1) + 18 * var(--size-scale)); /*3.375rem*/
    --size-10-5: calc(var(--size-1) + 19 * var(--size-scale)); /*3.5rem*/
    --size-11: calc(var(--size-1) + 20 * var(--size-scale)); /*3.625rem*/
    --size-11-5: calc(var(--size-1) + 21 * var(--size-scale)); /*3.75rem*/
    --size-12: calc(var(--size-1) + 22 * var(--size-scale)); /*3.875rem*/

became (notice the lack of floats):

    --size-1: 4rem;
  /*
    console.log(Array.from({length: 22},
    (_, i) => `--size-${1.5 + i / 2}`.replace('.', '-') + `: calc(var(--size-1) + ${i+1}rem);/*${2+i+1}rem*\/`).join("\n")
    )
  */
  /* TODO: replace this with something simple like html 62.5% body 1.6rem font-size */
  --size-1-5: calc(var(--size-1) + 1rem); /*5rem*/
  --size-2: calc(var(--size-1) + 2rem); /*6rem*/
  --size-2-5: calc(var(--size-1) + 3rem); /*7rem*/
  --size-3: calc(var(--size-1) + 4rem); /*8rem*/
  --size-3-5: calc(var(--size-1) + 5rem); /*9rem*/
  --size-4: calc(var(--size-1) + 6rem); /*10rem*/
  --size-4-5: calc(var(--size-1) + 7rem); /*11rem*/
  --size-5: calc(var(--size-1) + 8rem); /*12rem*/
  --size-5-5: calc(var(--size-1) + 9rem); /*13rem*/
  --size-6: calc(var(--size-1) + 10rem); /*14rem*/
  --size-6-5: calc(var(--size-1) + 11rem); /*15rem*/
  --size-7: calc(var(--size-1) + 12rem); /*16rem*/
  --size-7-5: calc(var(--size-1) + 13rem); /*17rem*/
  --size-8: calc(var(--size-1) + 14rem); /*18rem*/
  --size-8-5: calc(var(--size-1) + 15rem); /*19rem*/
  --size-9: calc(var(--size-1) + 16rem); /*20rem*/
  --size-9-5: calc(var(--size-1) + 17rem); /*21rem*/
  --size-10: calc(var(--size-1) + 18rem); /*22rem*/
  --size-10-5: calc(var(--size-1) + 19rem); /*23rem*/
  --size-11: calc(var(--size-1) + 20rem); /*24rem*/
  --size-11-5: calc(var(--size-1) + 21rem); /*25rem*/
  --size-12: calc(var(--size-1) + 22rem); /*26rem*/

so that I can replace the css variables with simple integers throughout my css.