Interesting you like that. Here's my updated CSS to fix the "dumb default width":
.hasPane.panePinned .App-content .container, .hasPane.panePinned .App-footer .container {
padding-left: 12px;
padding-right: 12px;
min-width: unset;
}
@media(min-width:1100px) {
.container {
width: unset;
min-width: 1100px;
padding: 0 calc(18vw - 191px) 0 calc(12.5vw - 38px);
}
.DiscussionPage .container {
padding-left: calc(13vw - 134px);
}
#header .container {
padding: 0 calc(15vw - 150px) 0 calc(13vw - 66px);
}
.Post {
margin-right: 2vw;
}
}
@media(min-width:768px) and (max-width:1099px) {
.container {
padding: 0 7px 0 99px;
margin: 0;
width: auto
}
.DiscussionPage .container {
padding-left: 9px;
}
#header .container {
padding: 0 0 0 77px;
}
}
@media(min-width:768px) {
.Hero .container {
padding-top: 40px;
padding-bottom: 30px;
}
}
You should probably pair this with increasing the font size for readability:
.Post-body, .TextEditor .TextEditor-editor {
font-size: .9rem;
}
@media (min-width: 1100px){
.Post-body, .TextEditor .TextEditor-editor {
font-size: 1rem;
}
}
@media (min-width: 1700px){
.Post-body, .TextEditor .TextEditor-editor {
font-size: 1.1rem;
}
}
@media (min-width: 2200px){
.Post-body, .TextEditor .TextEditor-editor {
font-size: 2rem;
}
}
@media (min-width: 3400px){
.Post-body, .TextEditor .TextEditor-editor {
font-size: 2.2rem;
}
}
When I say the defaults are "dumb" that's actually a bit of a joke because it's actually quite common with professional tools to have "dumb defaults". I'm sure there are some people that prefer having a forum with a skinny centre, but I'm not one of them (it looks very dated). Flarum doesn't play nice when adding custom CSS with calc() values so you have to add the above code either in-line using an extension like HTML Head Items or into a separate stylesheet.
