Modifying scss classes (using the theme as a git submodule)

[BiosPlus]

Heyo, I'm using this theme as a submodule via git. I've been able to change things like the amount of recent posts shown on the index (by adding a modified version of index.html in the layouts/ dir), but I'm hitting a wall in terms of modifying/overriding the width of the .wrapper class as outlined in #46 (comment).

I'd really like to avoid hard copying the entire theme into my blog repo itself. 🫤

[hugo-sid]

Hi Michael. You don't have to copy the entire theme.

With Hugo, you can override theme styles. You can read this post for more information.

Follow these steps:

1. Create a file named assets/sass/_base.scss in your project’s root directory.
2. Copy all the styles from the theme's sass/_base.scss file into it.
3. Modify the styles as needed (either adding, removing, or adjusting them).

Let me know Michael, if that works.

[BiosPlus]

Fabulous stuff!

I was able to get the result I wanted via following your instructions and changing either the max-width value for the .wrapper class, or adding $narrow-size=1000px to the .wrapper class of that file (after copying it and the contents to the correct path).

However I opted for copying main.scss to assets/sass/main.scss like in the post and then modifying

$wide-size: 890px;
$narrow-size: 720px;

to:

$wide-size: 1200px;
$narrow-size: 1000px;

as that seemed to be the optimal file for it (given there are global variables for colors and the like contained in there).

---

Thank you so much for the tip, keep up the great work Sid :)