How to increase the size of drop down arrows and bullets

Questions & Help
1

How do I increase the size of the drop down arrows or triangles that indicate content underneath that is hidden? I find the size of the these triangles and bullets so small and light that I often miss them. (The font size on the text is okay, though.)

Thanks.

Michael

2

Try adding the following css rules inside file custom.css :

.rotating-arrow svg {
    fill: black;
    height: 24px;
}
.bullet-container:not(.typed-list) .bullet {
    background-color: #999;
    height: 12px;
    width: 12px;
}

Old versions: .bullet-container .bullet

1 Like
3

Yes, this helped a lot. The arrows and bullets are now larger, easier to see. If you have a moment to tell me how to make them darker (they are very light gray) that would be great.

In any case, I appreciate the help!

Michael

4

I have updated the answer above for darker colors.

5

The arrow is now darker, so thanks! I would like to make the round dots darker as well. So I took what you wrote and using that as a model I added fill: black as part of the .bullet-container.bullet part. See below, but it didn’t make a difference.

.rotating-arrow svg { fill: black; height: 24px; } .bullet-container .bullet { fill: black; background-color: #999; height: 12px; width: 12px; }

Michael

6
  • The attribute fill doesn’t apply to the bullets.
  • The bullets are as dark as the arrow.
  • If you want the bullets even darker, should change their background-color to either:
    • a lower hexadecimal value (e.g. #555)
    • a dark named color (e.g. black)
7 
.bullet-container .bullet

didn’t work for me. I had to look at the devtools console to find the selector being used, as of 0.10.7 (2024-03-15):

.bullet-container:not(.typed-list) .bullet

I’m not sure what a typed-list class is for, but apparently, not for the bullets!

1 Like
8

This is awesome! Is there a way to make the rotating arrow always available when there are collapsible sections like the NOW/LATER section below the journal page?