Modifying the distance between the body and the margin

[beyond2060]

I am using Quarto 1.3 Pre-Release, which has the new functionality to modify the sizes of the grid elements.

I want to increase the space between the body and the margin on desktop. If I increase it like this:

grid: gutter-width: 5em

this also increases the gutters on the left and right of the page. Worse, it also done it on mobile, making the page very narrow.

Is there any way to just increase the spacing between the body and the margin?

(I am trying to make my pages in the style recommended by Edward Tufte. Example here: https://edwardtufte.github.io/tufte-css/
)

[dragonstyle]

You can't currently accomplish that with simple YAML, but you should be able to using SCSS variables. For example, the individual gutters are specified as:

// Margin variables
$grid-page-gutter: $grid-column-gutter-width !default;  
$grid-page-gutter-start: $grid-page-gutter !default; // the `left` gutter between the edge of the screen and the sidebar
$grid-page-gutter-end: $grid-page-gutter !default;  // the `right` gutter between the edge of the screen and the margin

$grid-body-gutter: $grid-column-gutter-width !default;
$grid-body-gutter-start: $grid-body-gutter !default; // the `left` gutter between the sidebar and the body content
$grid-body-gutter-end: $grid-body-gutter !default; // the `right` gutter between the body content and the margin content

If you create an SCSS theme file and provide a new value like:

/*-- scss:defaults --*/
$grid-body-gutter-end: 5em;

That should only target that specific gutter.

Question, have you played with the article layout (https://quarto.org/docs/authoring/article-layout.html) in Quarto and are there changes there that you'd like to see to better approximate the Tufte style layout?

[beyond2060]

This worked thank you!

In answer to your question, in general I really like Quarto, it's really well designed. But as an SEO professional, I find it a bit frustrating that a very simple web page doesn't score very well on Google's Core Web Vitals. A dozen or more CSS and JS files are loaded, even if they are unnecessary and unused. I would like to have a more minimal theme that uses no framework at all which I could then stylise. At the moment the theming seems to be focused on tweaking colours etc. rather than being able to use a different framework entirely, or your own minimal framework. But I need to look into this more and understand better how Quarto works. I'll report back if I have any actionable suggestions.

Quarto is great and I really do appreciate the work you guys do on it. I hope to contribute back in the future. James

[dragonstyle]

Thanks for the feedback - that is very good to hear. I'll make a note to take a closer look at our page's measures on Core Web Vitals. We do generally try to limit the addition of dependencies to only when they are needed, but perhaps we are either including them in error or somehow they're sneaking in.

You are correct that we are currently pretty bound to Bootstrap, swapping out the framework would be a major undertaking right now (even for us!)....

[beyond2060]

Noted about Bootstrap - I won't attempt that for now then! But it really would be nice to be able to replace Bootstrap with other frameworks, or your own. James