fix: Responsive type sizes #4099
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
DafyddLlyr
approved these changes
Dec 20, 2024
|
Nice catch thanks! |
|
Removed vultr server and associated DNS entries |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this PR do?
MUI responsive type sizes provides a one-value (
factor: x) scale for resizing type which aims to provide a global function, but removes the ability to scale or fine-tune by a particular type property.In PlanX we use h2 sizes for most page/question titles and h1 for headline/banners, MUI was resizing these to be too small comparatively to be effective.
I've tried a number of methods to work with MUI's automatic scale, ideally we'd use an up-to-date method (such as
fontSize: "clamp(2.125rem, 3rem, 5rem)",, but MUI needs to see a hardcoded value for each property.This PR introduces manual media queries to increase larger header sizes at the smallest (sub 500px wide) screens. There is also the reluctant use of an
!importantrule as MUI trumps any media queries defined in the theme with its own, and there is an apparent bug inh4resizes in which MUI does not scale this correctly between 500px – 768px.Before changes, largest viewport (left) vs smallest viewport (right):
After changes, largest viewport (left) vs smallest viewport (right):
