Fluid typo - take 2

[tmjoen]

alt 1

setting base font size as vw and subtracting this from the wanted vw size + 1rem

calc(3vw - var(--font-base-vw) + 1rem)

This breaks since the viewport width changes when zooming, so if we zoom in the viewport size gets smaller which again affects the font-base-vw

alt 2

since window.innerWidth changes when we zoom, can we check to see when ec-zoom increases and innerWidth decreases to trigger a recalc of ec-zoom? Does the innerWidth change when changing monitors from retina to 1x?

The problem currently is when switching from a retina to non retina device the zoom is set to 2.

[tmjoen]

function betterClamp(minSize = 55, maxSize = 76.3889, minWidth = 1440, maxWidth = 1920) {
  const rem = 20
  minSize = minSize / rem
  maxSize = maxSize / rem
  maxWidth = maxWidth / rem
  minWidth = minWidth / rem
  // do calculations
  let slope = (maxSize - minSize) / (maxWidth - minWidth)
  let yAxisIntersection = -minWidth * slope + minSize
  let preferredValue = `${yAxisIntersection} * 1rem + ${slope} * 100vw`
  // output as rem
  minSize = `${minSize} * 1rem`
  maxSize = `${maxSize} * 1rem`
  return `clamp(${minSize}, ${preferredValue}, ${maxSize})`
}