Justifying text

[dr460nf1r3]

Hey! :)
As I tried to build my site, I didn't find any way to justify my articles or content of the profile page. While searching for a solution, I found out about the possibility of creating a custom.css and injecting code the code in there. However, it still wouldn't work so I guess I'm inserting the wrong code. How would I proceed with this?
This might also be a good new feature 🤔

Thanks for your work, its beautiful 😄

[jpanther]

This is one of those things that is not directly supported in Markdown but it depends what you're looking for. If you just want to justify certain blocks of text, you can simply place the HTML directly into your content...

<div style="text-align: justify">This is justified text.</div>

You could also make this into a custom shortcode to easily reuse it across multiple articles. You can simply wrap an entire article with this tag and it should still format all the headings and things correctly.

If you want to apply justified text to the entire site, you can add the below to your custom.css file and it will apply to all the Markdown content throughout the theme.

.prose {
  text-align: justify;
}

[dr460nf1r3]

So the actual goal is to have every text excpet for the headlines justified. I tried your first suggestion which does in fact work well - expect for one big drawback which is that Markdown content does no longer work (probably as its parsing HTML there) 👀
When I tried the second suggestion, it sadly did not work as expected. Just to verify I did it correctly: I created the file at /static/css/custom.css and added custom_css = ["css/custom.css"] to /config/_default/config.toml. Probably, this method is more suited for my use case as it probably does still has Markdown working I guess.
Thanks for taking the time, highly appreciated 😊

[jpanther]

The custom.css file needs to be placed in the assets/css/ directory. Refer to the docs for a more detailed explanation. You don't need to add it to your config file as it will be automatically detected once it's in the correct location.

[dr460nf1r3]

Haha, I really should have been doing more RTFM 😁 It works now and I'm very happy with how it turned out. I have one last question. I noticed that all contents but the main/profile page are not centered for some reason 🤔 Is it possible to either center the blocks of texts or extend it to the right it it so the space to the edges of the page are even?

[jpanther]

I had to laugh at "for some reason" as all these are design choices. Around 65 characters is generally thought to be the maximum readable width for text. As a result, the theme caps the width of prose in articles at 65ch. I also prefer to align everything to the left margin and so the content will appear off-centre at larger window sizes. You would have to override this behaviour by changing the HTML templates as the width and alignment is not defined in any one place in CSS. This is due to how Tailwind websites are structured as there is no one defined CSS block that allows you to customise things like the article.

Your best bet is to override single.html and unset the max width on the article by removing max-w-prose. Then set a new max width on the prose section by using something like max-w-full in order to allow the article content to fill the available space. The docs also have more detail on how to override templates.

[dr460nf1r3]

Well I did not mean to disrespect your design choices in any way, if it came across as such I'm sorry 😅 Thanks again for taking the time!

[jpanther]

Oh no, no offence taken. Just made me chuckle because it's one of those "is this a bug or a feature" type moments.