How to change the max-width of distill posts?

[TomClabault]

This issue mentions that a way to change the width of distill posts (since they do not respond to the global website's max-width) is to:

"if you are using distill-style posts now, the easiest workaround is to make max_width match the max width of distill posts."

I'd like to make my distill posts larger but I'm not sure how. I tried to fiddle with the width parameters of _distill.scss but this did not give the expected result (either no change or the whole page was pushed to the left i.e. was not centered anymore).

How can we change the width of distill posts?

[george-gca]

The distill layout is not that simple to modify. It is not only about changing _sass/_distill.scss, but also some variables inside assets/js/distillpub/overrides.js, assets/js/distillpub/template.v2.js, and/or assets/js/distillpub/transforms.v2.js. And the template source is not well documented.

So, tbh, you'll have to do a lot of trial and error to find where exactly this change can be made and if it doesn't mess the overall layout of the post. But this would be a very good addition to our template if you manage to solve it and would be willing to submit a PR.

[TomClabault]

So I had a quick look at how the template handles the width of the content and it seems that it is all based on a grid system

The grid-template-column in the CSS does it all. The 60px 60px 60px 60px 60px 60px 60px 60px basically seems to allocate 8 column of 60px = 480px to the content in the middle of the page. Replacing all the 60x by 920px for example does widens the main content in the center of the page.

Depending on the width of your screen, the allocation of the column changes. That's what the rules here describe:

This all seems to be defined in the var layout = ... part of template.v2.js:1329 and transforms.V2.js:13816.

Now I'm really not a CSS guy, I'm not sure how all of that can be tweaked into a user controllable width but maybe you can have some ideas of how to approach things.

[TomClabault]

I could successfully save the CSS file that is applied to my distill blog post by clicking the ìnline` button here:

And then saving the style:

I can then add that stylesheet to my blog post, effectively overriding the default distill style. Then modifying the serie of 60px 60px 60px to whatever width I want does modify the width of my blog post and it all looks good.

So maybe "all" there's is to do for al-folio is to have a way to override that grid-template-columns CSS rule and tweak how the width/spacing of the columns are defined?

[george-gca]

Probably the "best" solution would be to break down this code and move the css part to _sass/_distill.scss. Note that "best" means it would be easier to customize it, but harder to apply any updates on the layout (supposing that one could appear) since it would have to be done more manually, not simply overriding the files.

That said, I think it would be best to move these to the sass file. Since the styles are all concatenated right below it in

al-folio/assets/js/distillpub/template.v2.js

Line 1345 in 853adef

const styles = base + layout + title + byline + article + math + print;

and

al-folio/assets/js/distillpub/transforms.v2.js

Line 13835 in 853adef

const styles = base + layout + title + byline + article + math + print;

this could be done easier than I thought. And by having it in our _sass/_distill.scss means that it is easier to use our own defined variables.

[george-gca]

Also by looking at the strings defined in the lines you gave we can see that it actually defines these grids based on

@media (min-width: 1180px)

meaning that it actually selects the grid based on the minimum width of the page, but doesn't set the columns' width based on the screen size. Idk if setting the width of the columns based on screen size would "look nice", maybe some more work on it is needed.

[george-gca]

Forget what I said, to be able to move the css from the code to _sass one would need to better understand the whole code. It would be even better if it was converted to pure jekyll. As stated in the distill guide:

This script tag will modify your post in your browser, adding the Distill styling and functionality.

So these javascript functions alter the html during execution.