Custom CSS for note display

Favorite Features
1

I love that the display of notes can have custom CSS.

I use a large monitor (27-inch) so have some simple CSS to:

  • Cap the line length for readability.
  • Use clamp to have the font size increase/decrease based on note width, along with max and min values, so things don’t get out of hand.
  • Left and right auto margins to centre the note.

You can view a small video of this in action should it interest anyone.

4 Likes
2

Very cool! Thanks for making and sharing the video!

3

Hey @wgrace Winston, I’m just starting to learn/understand HTML and CSS. In your video (which is very helpful btw), is the CSS thing that limits the width of the text the max-width element? Just trying to understand whether padding works to keep the text squished in a certain distance from the edge of the note.

4

@wgrace I wasn’t aware of that ‘clamp’ property. Thanks for sharing!

5

Yep, that max-width. Those rules are being applied to the body element of the HTML from memory.

6

No worries, CSS has certainly come a long way.

7

This has reminded me of a feature request thats been banging around in my head for awhile.