Adjusting the card for varying viewport widths

[ebeshero]

Observations:

• The whole thing mostly works well on various widths of viewport except for the notecard, which doesn't scale or permit scrolling. For this we probably want all the text for an event to be visible in the viewport without having to pinch or scroll on mobile.
• It would be better for adjusting text sizes for these to be HTML elements. Maybe have the SVG for the card be a background image for an HTML div.
• Adjust CSS for the text so that it flows nicely on the card. For the CSS on font-size, try the vw (viewport width) unit b/c it scales beautifully and is super responsive to window size.

[AshLuvzU]

Its been a lot more challenging to make this work on mobile than i thought it would be, even using claude and other tools it just doesnt look right at all. I feel this may be a little out of my depth and may have to be put on hold for the time being.

[ebeshero]

@AshLuvzU Look at this line in the CSS:
https://github.com/spaceTimeExperiments/timeMapper2/blob/39a1f655c347cf18a90a2862293315d9093f7e24/src/css/style.css#L53

I think it’s forcing the card panel to be an absolute pixel size, and that probably works against scaling.

[AshLuvzU]

• add classes for the lines not being scaled with css (red lines, ruler lines, highlight lines)
• more...