The PreTeXt Guide

Elements that are placed or sized relative to the page or other top level structures of the page will likely need to leverage SCSS variables to work well across different themes. Many files have variables defined that look like this one from css/components/page-parts/_body.scss:

That variable can be overridden by a file that @uses it, but otherwise will have a default value of 600px. That variable can be used in style rules:

.ptx-page {
    max-width: $content-width;
    margin-left: auto;
    margin-right: auto;
}

When the CSS is built, the variable will be replaced by the appropriate value in each build target.

A few of the most important sizing values are also rendered into CSS variables that can be referenced from anywhere. For example, var(--base-content-width) can be used to reference the standard width of the content area. Look for spots where SCSS variables are rendered into CSS variables like this:

:root {
    --base-content-width: #{$content-width};
    --content-padding: #{$content-side-padding};
}