Prose doesn't fill width of the page

[thechubbypanda]

Issue description

I'm aware that this may be a style choice however;

The actual content of an article using the default layout (not simple) doesn't fill the page very well, leaving most of the site completely empty. As an example, the congo docs site.
With no contents pane, all the content is squished on the left.

I found the generated css that is causing this in assets/css/compiled/main.css:

.max-w-prose {
  max-width: 65ch;
}

Unfortunately I don't know tailwind and so can't figure out how to fix this from the source

Theme version

v2.7.6

Hugo version

v0.121.1+extended

Which browser rendering engines are you seeing the problem on?

Firefox (Mozilla Firefox)

URL to sample repository or website

https://jpanther.github.io/congo/samples/icons/

Hugo output or build error messages

No response

[wolfspyre]

While I agree with your preference and also would love to see this shift... I don't want you to think that you need to learn tailwind to address it in the meantime. ;)

( I went down this rabbithole because why not... )

fortunately no tailwind's required!

check out layouts/partials/head.html:

{{ $assets.Add "css" (slice $cssScheme) }}
  {{ $cssMain := resources.Get "css/compiled/main.css" }}
  {{ $assets.Add "css" (slice $cssMain) }}
  {{ $cssCustom := resources.Get "css/custom.css" }}
  {{ if $cssCustom }}
    {{ $assets.Add "css" (slice $cssCustom) }}
  {{ end }}
  {{ $bundleCSS := $assets.Get "css" | resources.Concat "css/main.bundle.css" | resources.Minify | resources.Fingerprint $algorithm }}
  <link
    type="text/css"
    rel="stylesheet"
    href="{{ $bundleCSS.RelPermalink }}"
    integrity="{{ $bundleCSS.Data.Integrity }}"
  />

So... you can overwrite this pretty easily:

assets/css/custom.css:

.prose {
  .table { overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; };
},
/*  change prose width for shiggles */
.max-w-prose { max-width:90ch !important; }

and viola!
thine site width be embiggened.

:)

[thechubbypanda]

Damn I was over-complicating it, thanks kind stranger.

And as a side note, "shiggles" is now my new favourite word

[jpanther]

Thanks for the report however as you suspected, this is a style choice and not a bug. The prose layout is designed for accessibility and ease of readability. CSS overrides are the way to adjust this behaviour.