Adjust alignment to fix hierarchy confusion

[ThatAdamGuy]

That’s a screenshot from a part of my sidebar. From looking at it, it’s easy to mistakenly determine that “Tasks” is a subpage of Templates when it’s… actually not.

SUGGESTION:
Move over all top level rems slightly to the right so all the top level rems are aligned on the same vertical plane.

e.g., the snippet above should look like
    Tools and resources
    Templates
▼Tasks
       Task and project fridge

Thanks!

[ThatAdamGuy]

Unrelated, except to the side-bar:
I’d really appreciate greater density here! It’s frustrating having to scroll so much

[steveaw]

I would also prefer increased indent for the hierarchy

For the greater density, try the following css snippet:

#document-sidebar div {
padding-top: 0px !important;
padding-bottom: 0px !important;
}

[ThatAdamGuy]

Ah, super, my first css’ing with RemNote; thanks for the handy snippet!

[Euan_Ong]

+1 – it can get quite confusing:

It would be really nice if there were a vertical line down each indent, like with ‘normal’ RemNote bullet hierarchy

[Euan_Ong]

I made a temporary fix with custom CSS:

#document-sidebar .accordion.ui.fluid {
    background:
        linear-gradient(#cacad9 0 0) 17px,
        linear-gradient(#cacad9 0 0) 43px,
        linear-gradient(#cacad9 0 0) 69px,
        linear-gradient(#cacad9 0 0) 95px,
        linear-gradient(#cacad9 0 0) 121px,
        linear-gradient(#cacad9 0 0) 147px,
        linear-gradient(#cacad9 0 0) 173px,
        linear-gradient(#cacad9 0 0) 199px,
        linear-gradient(#cacad9 0 0) 225px,
        linear-gradient(#cacad9 0 0) 251px,
        linear-gradient(#cacad9 0 0) 277px,
        linear-gradient(#cacad9 0 0) 303px,
        linear-gradient(#cacad9 0 0) 329px,
        linear-gradient(#cacad9 0 0) 355px,
        linear-gradient(#cacad9 0 0) 381px,
        linear-gradient(#cacad9 0 0) 407px;
    background-size: 1px 100%;
    background-repeat: no-repeat;
}

#document-sidebar .title.p-2 {
  	background: white;
}

#document-sidebar .p-2:not(:hover) {
  	background: white;
}