hextra/assets/css/variables.css

/* Hugo template to derive CSS variables from site and page parameters */

/* Do not remove the following comment. It is used by Hugo to render CSS variables.
{{- $layoutWidthValues := dict "normal" "80rem" "wide" "90rem" "full" "100%" -}}
{{- $layoutWidthDefault := index $layoutWidthValues "normal" -}}

{{- $maxPageWidth := (index $layoutWidthValues (site.Params.page.width | default "normal")) | default $layoutWidthDefault -}}
{{- $maxNavbarWidth := (index $layoutWidthValues (site.Params.navbar.width | default "normal")) | default $layoutWidthDefault -}}
{{- $maxFooterWidth := (index $layoutWidthValues (site.Params.footer.width | default "normal")) | default $layoutWidthDefault -}}

{{- $maxContentWidth := "72rem" -}}
*/

:root {
  --hextra-max-page-width: {{ $maxPageWidth }};
  --hextra-max-content-width: {{ $maxContentWidth }};
  --hextra-max-navbar-width: {{ $maxNavbarWidth }};
  --hextra-max-footer-width: {{ $maxFooterWidth }};
}

.hextra-max-page-width {
  max-width: var(--hextra-max-page-width);
}

.hextra-max-content-width {
  max-width: var(--hextra-max-content-width);
}

.hextra-max-navbar-width {
  max-width: var(--hextra-max-navbar-width);
}

.hextra-max-footer-width {
  max-width: var(--hextra-max-footer-width);
}