Page width adjustment to css

[arnold-c]

Just a small comment to suggest thinking about updating the css-generating file to set a maximum page width as, at present, on wide screens the content starts at the left of the page, which is very off-center. This can be done with a call to grid elements (see here). As a starting point, I've found the following values to work quite well (specified in the yaml file).

grid:
      sidebar-width: 270px
      body-width: 1000px
      margin-width: 200px
      gutter-width: 1rem

Relatedly, it would be worth making an adjustment to the navbar at the same time, to ensure the navbar is appropriately centered with the content. This can be done with the following code.

/*-- scss:rules: --*/

.navbar > .container-xxl, .navbar > .container-xl, .navbar > .container-lg, .navbar > .container-md, .navbar > .container-sm, .navbar > .container, .navbar > .container-fluid {
  max-width: 1400px;
  margin: 0 auto;
}

This package looks great - thanks for putting it together.

[vituri]

Thanks for having a try at the package!

Two questions:

1. I always have to fight with the widths so the content looks nice on wide screen. To use your suggestion, do I need to put the grid config as following?

website:
  grid:
    sidebar-width: 270px
    body-width: 1000px
    margin-width: 200px
    gutter-width: 1rem

2. About the scss: do I need to create a file a save it? If so, how do I add it to the format config? Today it is as follows:

format:
  html:
    theme: $theme
    css: styles.css
    code-copy: true
    code-overflow: wrap
    preview-links: true
    toc: true
    toc-depth: 3
    toc-expand: true """

You can make a PR if you prefer!