Adjusting width of posts

[chrisxfire]

Hi, what's the correct way to adjust the width of texts in posts with this theme?

[hugo-sid]

Hi @chrisxfire.

Welcome to Hugo blog awesome discussions.

Solution

You have to change the value of $narrow-size and $spacing-full variables, which are defined in assets/sass/main.scss file.

Reasoning

The whole blog post is wrapped in a <div> with wrapper class. In order to change the width of text for individual posts, max-width property of this div should be changed.

hugo-blog-awesome/assets/sass/_base.scss

Lines 232 to 234 in 04afe81

	.wrapper {
	max-width: -webkit-calc(#{$narrow-size} - (#{$spacing-full} * 2));
	max-width: calc(#{$narrow-size} - (#{$spacing-full} * 2));

As seen above, the value of max-width property is decided by the two variables $narrow-size and $spacing-full. These variables are defined in assets/sass/main.scss (shown below).

hugo-blog-awesome/assets/sass/main.scss

Lines 53 to 57 in 04afe81

	$narrow-size: 720px;
	// Padding unit
	$spacing-full: 30px;
	$spacing-half: $spacing-full / 2;

Ultimately, you should change the value of these two variables in order to change the width of text for individual posts.

Conclusion

Let me know if this solution worked for you. In case it did, you can mark this as the answer. Otherwise, feel free to post your observations here. Don't forget to star the repo, if you liked this theme.

[chrisxfire]

Thanks for the detailed explanation — I learned something new from this!

[caprinux]

there seems to be more to it than that :(

the header and code block dont scale accordingly (i.e. despite scaling up the width, the border of the code block is scaled up but the text within the code block still starts according to the original/default width) not sure why that is the case

[caprinux]

the offending line of code appears to be in _code.scss, where max-width is set to be 50rem. by incrementing it to a larger number like 100, the lines of code will correctly align with the code block once again.

[chrisxfire]

Changing display to flexbox (without changing max-width) also seems to resolve this.