CSS: How to create a CSS class meant for a little small font note that goes on the sidebar? My first approach was modifying zoom which bugged out

[NoNameBohr]

What I’m trying to do

I want to define a css class that for a note where I can dump quick ideas, but without being an eyesore. The idea is to put this note in sidebar and everything in it, particularly the font, small.

Things I have tried

I tried two css classes, that failed for different reasons:

.littlenotezoom {
  zoom: 70%;  /* This sets the zoom level to x% for elements with this class */
}

This almost works. But it’s very buggy. Clicking in one place of the note puts the cursor in a different place in the note. Moving the cursor using the arrows skips lines. There’s a bunch of strange bugs.

.littlenote {
    font-size: 5px;
}

I even tried using .littlenote p { but it didn’t help. This didn’t do anything.

[ariehen]

Just clarify a bit:

• will this note in the sidebar usually be in editing view, reading view, or will you switch back and forth between the views? (the CSS is different between the views)
• are you just looking to change the base font size with headings scaling along?

[holroy]

If you can’t see it, why are you showing it in the first place?

If you want to use it for dropping stuff which you’re going to use later, then why don’t you leave it elsewhere and make a command to drop the clipboard to the end of that file?

[NoNameBohr]

Editing view. Being able to use it in reading view would be nice but it’s completely secondary.

• are you just looking to change the base font size with headings scaling along?

That’s one way to do it. Scaling everything would be nice but that works.

[ariehen]

I have something similar, so just copied my version (with the cssclass changed). You could combine these, but I left them separate if you wanted to adjust reading view and editing view independently.

/* reading view font size */
.markdown-preview-view.littlenote { 
    font-size: 0.7em;
}

/* editing view font size */
.markdown-source-view.littlenote .cm-scroller {
    font-size: 0.7em;
}

[NoNameBohr]

This works, thank you!