Bullet and line misalignment

[nucspl]

This is a very pleasant theme to work in, thank you! But I'm curious if having the bullets and lines misaligned from the grid is intended or not, as It kind of bothers me but not so much thanks to how subtle these are colored. Does it have to do with the dotting? Can it be changed somehow so that these elements are aligned with the grid or vice versa? Also curious if the dotting could be made scrollable.

[stdword]

Hello! Thank you!

1. No, misaligning it is not intended. However it is hard to sync it, because of the left and right sidebars presence. Different width of right sidebar shifts all main view:

2. We can fix the right sidebar width on the certain position. But the span width between bullets of different level is not matched with dots distance. It can be adjusted, but looks strange (for my taste):

If you like it, adjust you custom.css with your own numbers by this code:

#app-container {
    background-position: -2.5px 0px;
    background-size: 30px 30px;
}

3. Scrolling the dots. It requires big redesign decisions for header, left and right margins. We can skip these areas for the sake of experimenting:

From my point of view it doesn't look so nice as fixed dots.

[nucspl]

If I may ask, how was the dot scrolling done? background-attachment doesn't appear to do anything. I'm interested in trying to affix the elements to the grid.

[stdword]

Use this CSS:

#app-container {
  background-image: none;
}
.cp__sidebar-main-content {
    background-image: radial-gradient(
        var(--bujo-dots) 5%,
        var(--bujo-dots-background) 5%
    );
    background-position: 0 0;
    background-size: 25px 25px;
}

[nucspl]

I noticed that .cp__sidebar-main-content gets cut in height so I used .mx-auto in its place. I got the whole main container to have scrolling dots that way. 2023-10-22 07-09-59.webm

I also measured the dots on my actual bulleted journal and the distance between each one came out to 0.5cm.

edit: This was harder than I thought, looks like just about every page element's size has to be changed to fit the grid's scale. I'll just make a fork and continue this idea over there.

CSS

```css /* overrides */ #app-container { /* base coloration */ background-image: radial-gradient( var(--bujo-dots) 0, var(--bujo-dots-background) 5% ); background-size: 0.5cm 0.5cm; background-position: 0 0; background-origin: border-box; } #main-content-container, .cp__sidebar-main-content { /* margins, paddings, and widths */ width: 100%; padding: 0 0; margin: 0 0; } .mx-auto { max-width: 21cm; /* a4 paper */ padding: 1cm 1cm; /* dot-edge spacing */ margin: 0 auto; & .page { padding: 1cm 1cm; /* dot-content spacing */ background-image: radial-gradient( var(--bujo-dots) 5%, var(--bujo-dots-background) 5% ); background-size: 0.5cm 0.5cm; /* the measurement of my bulleted journal */ background-position: 0 0; background-origin: border-box; } } #journals .journal-item { margin: 0 0; &:first-child { min-height: 0; margin: 0 0 1cm; } } ```