This is an English translation of a Japanese blog. Some content may not be fully translated.
Hugo

How to Adjust Article Width in Hugo Wowchemy (formerly Academic)

Customization can be done as follows.

For advanced style customization, you can write CSS code to override or enhance existing styles.

  1. Create the assets/scss/ folder if it doesn’t exist.
  2. Create a file named custom.scss in the assets/scss/ folder.
  3. Add your custom CSS code to the file you created and re-run Hugo to view the changes.

You can specify it like this as appropriate:

.article-container {
    width: 100%;
    max-width: 1000px;
    min-width: 500px;
    margin-right: auto;
    margin-left: auto;
}

Reference

Extending Wowchemy | Wowchemy: Free, No Code Website Builder for Hugo themes

Customize style (CSS)

To personalize Wowchemy, you can choose a colour theme and font set in config/_default/params.yaml.

For further personalization, you can create your own colour theme and font theme .

If advanced style customization is required, CSS code can be written to override or enhance the existing styles:

  1. Create the assets/scss/ folder if it doesn’t exist
  2. Create a file named custom.scss in the assets/scss/ folder
  3. Add your custom CSS code to the file you created and re-run Hugo to view changes
Suggest an edit on GitHub