Fixed intro section overlap & Hugo native SCSS

[VincentTam]

Description

1. Set the first grid row height in #wrapper to auto so that the #intro can contain its contents no matter who large the avatar is.
2. Use Hugo's native method resources.ToCSS to automatically compile the main.scss file in runtime. This method only works for assets, so the relevant files have been moved around. I prefer naming the subfolder containing main.scss as assets/scss. That's the practice in the linked docs, and this improves the organisation of our assets. In addition, fingerprinting has been introduced.

Motivation and Context

To resolve #53 and #55.

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have read the Contributing Document.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation, including theme.toml, accordingly.

[pacollins]

Does this remove main.min.css since it will be processed by Hugo now? main.min.css was the processed version of main.scss.

If not, it should.

[pacollins]

Based on what I see, everything is good to go! 🎉

[VincentTam]

Does this remove main.min.css since it will be processed by Hugo now? main.min.css was the processed version of main.scss.

If not, it should.

The "Files Changed" tab shows the overall diff hunk
https://github.com/pacollins/hugo-future-imperfect-slim/pull/57/files?%5Bobject+FormData%5D=&file-filters%5B%5D=#diff-107f5abd5d36d17ac90493fe264f4cab
with several steps hidden.

1. Moved static/css/main.scss to assets/scss/main.scss.
2. Removed static/css/main.min.css.
3. Generated exampleSite/resources/_gen/assets/scss/scss/main.scss_{integrity}.content due to hugo -t ../.. and added this to the Git index.
4. Git treated the overall refactoring as a file renaming with modifications in light of the similarity index of the files removed in step two and added in step three.

[pacollins]

Sorry, the diff wasn't clear to me. Once I checked out the PR I noticed it was removed. Thanks for this.

…

[rmbolger]

Does removing the pre-processed main.css.min now mean you must run Hugo Extended in order for the scss to be processed? Or am I misunderstanding the gist of this thread?

Regardless, I'm currently using Hugo Extended 0.56.3, but with the latest commits including this one, it's no longer generating a main.css.min file in the css folder. All I see is add-on.css and normalize.css. Running in local server mode is also throwing a plain text 404 page for /css/main.min.css. Should I submit a separate issue?

[VincentTam]

@rmbolger

Does removing the pre-processed main.css.min now mean you must run Hugo Extended in order for the scss to be processed? Or am I misunderstanding the gist of this thread?

See @bep's reply.

• The extended version is only needed if you want to do SASS/SCSS changes.
• PostCSS support is in the regular version.
• You can use themes that use SASS/SCSS with the regular version provided that they have added the compiled styles to /resources in the theme.

If you don't change the theme's SCSS rules, you don't need extended verision.

Regardless, I'm currently using Hugo Extended 0.56.3, but with the latest commits including this one, it's no longer generating a main.css.min file in the css folder. All I see is add-on.css and normalize.css.

As written in my previous reply, the generated resources go to exampleSite/resources/_gen/.

Have you considered using the snap package for Hugo to automatically get the latest version of Hugo?

ℹ️ In the prerequisites for submitting an issue, using the latest version of Hugo is included.

Running in local server mode is also throwing a plain text 404 page for /css/main.min.css.

That's expected, since the generated main CSS file is called /css/main.{integrity}.min.css, where / stands for the context root here (not just the domain name). You may refer to Hugo's SRI support for reference from the official docs. Since the main CSS is a huge file (starting from a boilerplate), it's good to have SRI to ensure that it hasn't been altered by any intermediates.

Should I submit a separate issue?

I found the first point check all the prerequisites in the relevant section in the Contributing Guidelines quite difficult to observe in case of big projects with thousands of issues and PRs.

In this theme, we're expecting users to get things built "with minimal setup", so feel free to ask questions. Conducting a simple search using the search box with placeholder "is:issue is:open" before opening your issue is even better.

[rmbolger]

Running the latest Hugo wasn't the issue and actually seems to introduce its own problems I haven't submitted an issue about yet. My problem was I had forgotten about an overridden version of layouts/partials/head.html I was using and just needed to synchronize the latest changes from the theme's copy. Thanks for the point in the right direction.