Fix article layout responsiveness

[abizek]

Description

Fixes article layout responsiveness (learn page and about page)

I had to modify the tailwind config of the xs screen a little to use the built-in max-width queries(max-sm, max-md, etc). Previously xs: meant max-width of 670px, now it means min-width of 670px, correctly aligning with the built-in min-width queries. All xs: queries have been renamed max-xs: to keep the existing behavior.

xs is a bit misleading still since xs = 670px but sm = 640px and md = 768px.

Validation

https://github.com/nodejs/nodejs.org/assets/91976421/fbad1142-6109-4add-8166-8cefccab4ac7

Related Issues

Fixes #6819

Check List

• [x] I have read the Contributing Guidelines and made commit messages that follow the guideline.
• [x] I have run npm run format to ensure the code follows the style guide.
• [x] I have run npm run test to check if all tests are passing.
• [x] I have run npx turbo build to check if the website builds without errors.
• [x] I've covered new added functionality with unit tests if necessary.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Jun 6, 2024 10:24am

[github-actions[bot]]

Lighthouse Results URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 99	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 98	🟢 100	🟢 100	🟢 91	🔗
/en/about/previous-releases	🟢 97	🟢 100	🟢 100	🟢 92	🔗
/en/download	🟢 98	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 99	🟢 100	🟢 96	🟢 92	🔗

[github-actions[bot]]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	90.67% (593/654)	76.08% (175/230)	94.57% (122/129)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
131	0 :zzz:	0 :x:	0 :fire:	5.211s :stopwatch: