chore: adjust banner header font-size for better mobile fit

[Anca2022]

PR Checklist

• INTORG-45 Linear issue
• If styles were updated:
  • Stylesheet version has been bumped

Summary

• Make heading font smaller on mobile, so text can fit better

• Safari wasn't respecting the soft hyphens in the banners

  • updated styles
  • updated content types in Drupal to add/remove soft hyphens (Hero banner - Join the network, Hero banner - Get involved(video)) and to add zero-width no-break space (Hero banner - Open Standards)

Includes changes from PR 114 => closed PR

[JoblersTune]

I suggest we keep the smooth font scaling which is what we get with clamp instead of media query break points. But we rather edits the low point to be smaller.
For example, how about --step-5: clamp(3.125rem, 2.2551rem + 4.0936vw, 5.75rem); and we get rid of --step-6 and use --step-5 for the hero headings.
But we'd still need to check how well this works. And run through all the pages and also inspect the hero banners for any hard coded sizes inside the text field just to be safe we don't get out of alignment.
If this makes the text appropriately smaller then we can drop the Safari issue with manual hyphens since that introduces risk as well, because if anyone forgets to add soft break points (which is very easy to do) then the headings will actually break and that would be worse.

[Anca2022]

Completely agree, thank you

I'd like to keep hyphens: manual, because Safari has this weird behaviour where it prefers to split words instead of phrases; there are lots of examples on the website;
I agree it's risky in case we forget to add soft hyphens, but that's a totally fixable issue
PS: I tried using hyphen: auto with Zero Width No-Break Space () to force Safari not to split those words, but for some reason Safari just ignores the character

Examples with hyphen: auto on Safari:




...and many more

[Anca2022]

I will update headers that have hard coded sizes after this PR merges.
(Making a note not to forget)
I will replace <span style="font-size:var(--step-5)> with <span style="font-size:var(--step-4)> on the following pages:

• Homepage
• Summit
• Hackathon
• Past summits - all 3 summit pages
• Hacktoberfest

[JoblersTune]

Please let's change those font sizes on Drupal as you listed and check the hero banners for appropriate soft breaks as well then.

Ping me when you are ready so I can merge these changes on prod just before you make the hero banner font adjustments.