styling: ensure background gradient always fills page

[kwvg]

Expected Behavior

Actual Behavior

Proposed Fix

Basically the implementation of @amitkhare's comment from StackOverflow on a question about the same subject

[ygoex]

Hi @kittywhiskers. Thank you for creating the pull request.

After a little bit of testing I've seen that the issue addressed only happens on screens over ~1400px.

Given the previous and that the background works as designed for small and medium screen devices, the best solution would be to create a new breakpoint right under the existing background-size: contain; in _common.scss, _home-tmpl.scss and _dark-theme.scss with the following snippet:

    @include media-query(xxl) {
      background-size: cover;
    }

No prefixes are required, since this is something that the PostCSS Autoprefixer plugin does when the production build runs (npm run build).

Also, for the previous snippet to work, it will also be required to create a new breakpoint under _settings.scss. The following comment needs to be added in line 15: /// 90rem * 16px = 1440px;, and the breakpoint itself included in line 22: "xxl": 90em. The breakpoint xl will require a comma at the end of the line.

Please let me know if there is something that needs further clarification.

[kwvg]

Sorry for the delay! I can't say I know a thing about SCSS but hopefully my updated commit reflects your description as best as possible.

Thanks for your help!