Miscellaneous CSSs

  1. If you are on mobile and wants to have finer control over the UI and font-size (something you can do in browser by zooming in and out) e.g. because the smallest font size is still not small enough for you … just use something like this

body { zoom: 0.8 }

Note: 1. App restart required (tested on android). 2. setting body zoom breaks something in the browser (e.g. double-click used to select entire item, now it behaves more randomly)

  1. I often use the code markup to highlight stuff, and use this so it doesn’t become a block level item

.node-inline-code { font-style: inline !important; }

  1. Give your notes field a different color so it’s easier to tell e.g. how long the notes are, whether there’s any empty lines, etc.

.Node-noteContainer {
background-color:#EEEEEE;
border: 1px solid gray;
border-radius: 5px;
padding: 3px;
}
  1. Use this css to make the article view identical to the bullet view except for the absence of any bullets – in effect, the article view now feels like a text editor. I find myself preferring this over the default article view which is too spaced-out for me

     .is-compactDensity.is-article-view .Node-self,
     .is-cozyDensity.is-article-view .Node-self,
     .is-comfortableDensity.is-article-view .Node-self {
       padding-top: 0px;
       padding-bottom: 0px;
     }
5 Likes

This is fantastic, thanks @YG

Especially point 4 RE: the article view padding. I agree the spacing is a bit too much by default. I tweaked this to 2px (top and bottom) so it matches the bullet view :blush:

1 Like