Improved UI on large screens about mini-diary HOT 3 CLOSED

@druc This should fairly be easy to achieve, only a couple of CSS rules will need to be modified.

I'm not really sure how to improve the UI though. Assigning a max width to the editor would definitely improve the writing experience, but having most of the window filled with the background color might not look great either. I guess it's a trade-off.

I'm definitely open to a PR if you'd like to try out what looks best to you :)

from mini-diary.

Hey @samuelmeuli

Here are two screenshots showing the before & after.

Changes:

• a slightly smaller top&bottom padding for the whole app
• slightly decreased calendar date font size
• increased entry title from 150% to 180%
• increased paragraph spacing from 10px to 16px
• adjusted the page box shadow to make the page stand out even more
• limited the paragraph length to 680px (about 85-90 characters per line)

Possible issue:

• vw units are used for padding the editor, and that kind of messes up the width. It is ok if I switch to using px and add a media query?

Let me know what you agree/disagree with and I'll put up a PR later today. 😄

from mini-diary.

That's definitely better.

I'd rather not have too many different font sizes. I think the <h1>/<p> sizes should be the same for calendar and editor. Maybe increasing the base font size in larger windows would be good though?

Same for the paragraph spacing. I think the current one works well for medium-sized windows. Maybe we should only increase it in larger windows.

vw units are used for padding the editor, and that kind of messes up the width. It is ok if I switch to using px and add a media query?

Yeah, that makes sense.

Thanks for your work on this! Looking forward to the PR 😊

from mini-diary.