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.

8

I figured I’d share these minor changes to the default display.css stylesheet that will be of particular interest to anyone who uses both the include-quote and quote-from commands and wants normal blockquotes to appear the same way as notes referred to by include-quote.

/* Make sure you replace the old CSS for blockquotes */
blockquote, figure.notenik-quote-attrib {
    margin-left: 2em;
    margin-right: 2em;
    margin-bottom: 2em;
}

.quote-from:before {
    content: "\2014";
    padding-right: .4ex;
}
1 Like