feat: expand container width on large screen

[lex111]

I think we can borrow this technique from Bootstrap.

Jest blog (need to resize columns as 3/7/2, to close facebook/docusaurus#4083):

Before	After

Docs:

Before	After

[slorber]

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 😅 )

[lex111]

Actually not, but maybe I don't properly understand what you mean.

[slorber]

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 3/7/2 as it's a design decision

[lex111]

Well, it might be worth discussing this with other team members later.

Changing columns to 3/7/2 applies only to blog pages, this is necessary to increase the block size with recent posts.

[yangshun]

I'll review this

[netlify]

Deploy preview for infima ready!

Built with commit 5d41d4a

https://deploy-preview-62--infima.netlify.app

[github-actions]

Size Change: +996 B (0%)

Total Size: 528 kB

Filename	Size	Change
./packages/core/dist/css/default-dark/default-dark-rtl.css	76.6 kB	+139 B (0%)
./packages/core/dist/css/default-dark/default-dark-rtl.min.css	53.3 kB	+110 B (0%)
./packages/core/dist/css/default-dark/default-dark.css	76.6 kB	+139 B (0%)
./packages/core/dist/css/default-dark/default-dark.min.css	53.3 kB	+110 B (0%)
./packages/core/dist/css/default/default-rtl.css	75.8 kB	+139 B (0%)
./packages/core/dist/css/default/default-rtl.min.css	52.8 kB	+110 B (0%)
./packages/core/dist/css/default/default.css	75.7 kB	+139 B (0%)
./packages/core/dist/css/default/default.min.css	52.8 kB	+110 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
./packages/core/dist/js/alerts.js	409 B	0 B
./packages/core/dist/js/alerts.min.js	409 B	0 B
./packages/core/dist/js/button-groups.js	267 B	0 B
./packages/core/dist/js/button-groups.min.js	267 B	0 B
./packages/core/dist/js/dropdowns.js	1.01 kB	0 B
./packages/core/dist/js/dropdowns.min.js	1.01 kB	0 B
./packages/core/dist/js/menu.js	1.74 kB	0 B
./packages/core/dist/js/menu.min.js	1.74 kB	0 B
./packages/core/dist/js/navbar.js	926 B	0 B
./packages/core/dist/js/navbar.min.js	926 B	0 B
./packages/core/dist/js/pills.js	270 B	0 B
./packages/core/dist/js/pills.min.js	270 B	0 B
./packages/core/dist/js/radio-behavior.js	705 B	0 B
./packages/core/dist/js/radio-behavior.min.js	705 B	0 B
./packages/core/dist/js/tabs.js	267 B	0 B
./packages/core/dist/js/tabs.min.js	267 B	0 B

_{compressed-size-action}

[yangshun]

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);
    }
}

[lex111]

Thanks, fixed.

[slorber]

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?

[lex111]

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.

[yangshun]

Nice one, thank you!

[yangshun]

For some weird reason I see this change applied to the demo page, but not the infima website deploy preview 😅 any idea why?

Is the website deploy preview using the trunk version of Infima? Otherwise it won't show up there.

[slorber]

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 😅
Will see on next changes if it works or not but it is supposed to deploy the infima changes on the website

[slorber]

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.

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 if width > 1300px && width < 1440px ) container-width=90%.

Not too important for now

[slorber]

@lex111 do we want an even larger container for larger screens?

Jest reported truncated TOC:
https://jestjs.netlify.app/docs/mock-function-api

Even using the new xl container width it gets truncated for very large screens and feels like we are wasting some space.

[lex111]

@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.