How to make all child indents font smaller than previous rem's font?

RemNote Learning RemNote
#1

I want to make deeper intents font smaller to help me differentiate the header and child indents. How is this possible as CSS Snippet?
(Whenever a new indent is made, font size should decrease but font size should not drop below 9 to make it readable)

1

#5

I personally find @liberated_potato’s explicit solution using heading levels more practical, but if you really want to automate this, you can toy around with this snippet:

:root {
  --initial-font-size: 18px;
  --shrinking-factor: 0.93em;
}

#document {
  font-size: var(--initial-font-size) !important;
}

#document * { 
  font-size: 1em;
}

.tree-node-container {
  font-size: var(--shrinking-factor) !important;
}

image

Tweak the two variables --initial-font-size and --shrinking-factor to your liking.

#6

thank you. This is what I was looking for exactly.

#2

I see 4 different font sizes here. Remnote has 3 different heading sizes + 1 size for normal text. So why not change the font size of headings to these values using custom CSS and use headings?

Something like this

/* H1 */
.rem-header--1 {
  font-size: 18px;
}
/* H2 */
.rem-header--2 {
  font-size: 16px;
}
/* H3 */
.rem-header--3 {
  font-size: 14px;
}
#3

@liberated_potato I put your snippet in Custom CSS but I could not make it work. Any additional settings I should make?

1

#4

@lyrk probably something is not enabled
Do you have the snippet enabled properly? Make sure that the code snipped language is css and css code block has the checkbox unchecked. In addition to that, if there are any parent check boxes, those checkboxes need to be unchecked as well.

image
image789×307 12.8 KB

Then have you applied headings properly?. Looks like you haven’t applied it.
If you select a heading rem, the bottom bar should look something like this.

image

#7

Thank you for the reply.