Is there a way of changing the width of the text area?

[dbrg77]

Hi,

Thanks for making this awesome theme. I quite like it :-)

One quick question: is there a way of changing the width of the text area? Currently, all post contents are rendered very narrowly. This is good for reading on the phone, I guess ... When reading from a regular computer screen, there is quite wide empty space at the side.

In the homepage, if I change the layout to "page", the text area become much wider compared to the "profile" layout. I like this behaviour. Is there a way of making similar changes for the actual content, like posts etc?

Thank you!!

Regards,
Xi

[dbrg77]

After messing around a bit, I figured it out.

You can check in list.html and single.html depending what you want to change, copy those files to your own layouts directory and look for the following block:

<div class="min-w-0 min-h-0 max-w-prose">
        {{ .Content | emojify }}
</div>

change the max-w-prose to max-w-full makes the content as wide as the 'page' style of the homepage.

Thanks anyway!!!!

[mircea-pavel-anton]

Thanks @dbrg77 do you think this would be a good feature? if so add it to the issues page

I do believe this would be a nice addition. At the moment, I am implementing this in my blog by modifying the max-w-prose in the custom.css but it would be nice if there was a toggle in the config, something like:

article:
  fullWidth: true

[nunocoracao]

Happy to hear more comments on this. At this stage the theme is getting complex with all different configs available. Will need to consider this better before making a call.

[mircea-pavel-anton]

I agree! Especially since this is something we can relatively easily configure in the custom.css without overriding any html layout, I don't see this as being a high priority. I would classify it as a "Nice to have" at best, since we have a workaround for it

[nunocoracao]

But let's discuss how to make that experience better via other means... e.g. having a template custom.css with some examples in the repo

[mircea-pavel-anton]

I am not entirely sure how we could streamline the process here, as changes to custom.css can, and more often than not do, affect other things as well. For example, changing it like i mentioned also affects the layout in other pages, not just for articles. This may or may not be desired.

Maybe just having the links in the documentation for user implementations is ok here, as one could take a look at some examples and if they find anything they might want to replicate, they can check out the repo and figure out how it was done.

I wouldn't say that overriding the width in the css is too complicated, at least for the intended result discussed here:

.max-w-prose { 
  max-width: 100%;
}