feat: expand container width on large screen#62
Conversation
|
Thanks, That looks better to me. Was wondering if it's not worth keeping the content perfectly centered? (not even sure it is right now 😅 ) |
|
Actually not, but maybe I don't properly understand what you mean. |
|
For example:
I mean we may want the main content to have the same margin on the right and left sides, is using 2/8/2 or 3/6/3 and not 1/8/3 I'm not a designer so not sure what is a good choice here 😅 Increasing the container width for larger screens looks safe to me, but can't really tell for moving to |
|
Well, it might be worth discussing this with other team members later. Changing columns to |
|
I'll review this |
9a3280c to
27a066a
Compare
|
Deploy preview for infima ready! Built with commit 5d41d4a |
|
Size Change: +996 B (0%) Total Size: 528 kB
ℹ️ View Unchanged
|
packages/core/styles/layout/grid.css
Outdated
|
|
||
| @media (min-width: 1440px) { | ||
| & { | ||
| --ifm-container-width: 1320px; |
There was a problem hiding this comment.
We should give people a way to modify this just by tweaking CSS variables. If we do this then they have to write a new media query. I think we should define a CSS variable for this viewport so people can override it if they want to:
--ifm-container-width: 1140px;
--ifm-container-width-xl: 1320px;
...
@media (min-width: 1440px) {
& {
max-width: var(--ifm-container-width-xl);
}
}
…111/expand-container-large-screen
27a066a to
5d41d4a
Compare
|
For some weird reason I see this change applied to the demo page, but not the infima website deploy preview 😅 any idea why? Also, I think it's an improvement, but don't like too much having containers "jump size" after a certain threshold. What if the container would just grow naturally between 1200px and 1440px, using a % value? |
What do you have in mind exactly? Can you show the code for implementing this? Normally, the screen has a fixed size, so I don't understand how container can jump in this case, unless you manually change screen size, for example, for development purposes. |
Is the website deploy preview using the trunk version of Infima? Otherwise it won't show up there. |
Everything is using symlinks and I can see the changes locally so not sure what is happening with the deployed preview 😅 |
I mean, if the width is 1439px, do we really want the container to be significantly smaller than for width=1440px? I do agree that resizing is not something done by regular users too much and the experience does not matter much, just saying that there's a way to optimize the width we render to for "middle width" devices by using a % value. Like Not too important for now |
|
@lex111 do we want an even larger container for larger screens? Jest reported truncated TOC: Even using the new xl container width it gets truncated for very large screens and feels like we are wasting some space.
|
|
@slorber it's hard to say, maybe in the docs layout we should adopt columns similar structure as in the blog? Or set even larger width for docs container, but I don't figure out what it should be. |
I think we can borrow this technique from Bootstrap.
Jest blog (need to resize columns as 3/7/2, to close facebook/docusaurus#4083):
Docs: