California Coast Theme

[mgmeyers]

So, you can change the font-family with this setting:

I’ll have to look into the font-size, though.

[sirlaughalot]

Thank you for your quick reply. I use the outliner plugin but the bug persists when I deactivate it. I attached a video which shows the bug.

[janpeeters]

@mgmeyers I noticed when using California Coast Theme with the Style Settings plugin that e.g. the H1 bottom margin that I set is not the same in the editor as it is in the preview. I think that in Preview mode it is how I set it in settings.
Is this something that can be synchronized so that it looks (almost) the same in Editor and Preview mode? Thanks.

Ps: I tend to remember that you wrote something about this but can’t find the post back.

[mgmeyers]

@janpeeters Unfortunately, the spacing can only apply to preview. The editor breaks when any significant margins are added to headings

[janpeeters]

Thanks for letting me know. Hopefully an updated editor will make this possible in the future.

[janpeeters]

@mgmeyers I noticed that the Checklist plugin doesn’t look so nice in CC.
On the GitHub page it looks like this:

but looks like this in CC:

Is this something that can be fixed in CC without too much hassle? Or is it something I should report to the plugin developer?

ps: does anyone know how to scale screenshots in posts in this forum? Would love to make better looking posts

[mgmeyers]

@janpeeters, I made some updates on my end to improve how sidebar content is handled

[janpeeters]

Edit: I just wrote here that it worked. But it seems some issues still occur with the alignment of the checkboxes.
In the default theme they all line up, in CC they are not.
All together it looks already a lot better (thanks for that) but something is influencing the alignment of the checkboxes.

[mgmeyers]

Thanks for bearing with me @janpeeters. I found some old list styles in my code that was conflicting with the checkboxes. Try again!

[janpeeters]

Bearing with you is not an effort, all the work you do… The visual environment you’ve designed gets better and better and is a pleasure to work in. Thanks!

[amarionette]

@mgmeyers Is it possible to achieve the transparency effect of the sidebar in Dark Mode, but when using Light Mode? I prefer the Dark Mode transparency effect but prefer the light mode for everything except the sidebar.

[Piotr]

This kind of spacing doesn’t break editor for me (I have some other changes too, so not sure how it works with your theme in default version), if I’m understanding correctly what @janpeeters is asking for

.cc-pretty-editor .HyperMD-header-1>span::before,
.cc-pretty-editor .HyperMD-header-1>span::after {
    content: "";
    display: block;
}

.cc-pretty-editor .HyperMD-header-1>span::before {
    padding-top: 80px;
}

.cc-pretty-editor .HyperMD-header-1>span::after {
    padding-bottom: 80px;
}

[janpeeters]

Hey @Piotr Thank you for your code, with it I could get my spacing almost the same in Editor as in Preview.
I noticed though that if I add a value other than 0 to padding-top e.g. the collapse icon shifts out of place, so maybe that’s one of the things that @mgmeyers meant when he said that it would break the editor.
If I use only a padding-bottom value, I’m fine.

[mgmeyers]

Interesting! I’ll have to play around with this!

[Persephone]

Thank you for the brilliant theme! I love the ability to customize things without needing to add my own CSS (which I don’t really know how to do).

I noticed that my cursor changes in size depending on where it is in the text. It seems that it’s adapting to the size in between lines, which is particularly noticeable in lists:

Strangely, reducing the line height seems to maintain the previous cursor height in some lists:

But then in others it seems to adapt again:

[mgmeyers]

Yeah, unfortunately this is a limitation of the Obsidian editor (CodeMirror) I haven’t been able to work around yet (though Piotr’s suggestion above may be a lead).

Strangely, reducing the line height seems to maintain the previous cursor height in some lists:

Closing and reopening documents should fix this. CodeMirror will remember the previous line-heights until the editor is reloaded.

[Piotr]

Oops, I use folding, but I removed these icons to have less clutter, I use only hotkeys for that. Unfortunately you’re right, when icons are displayed, they stay on top. If you always have H1 as the first line of the page (so you’re not using e.g. front matter) it’s possible to move that icon, you can modify px value in the code below to your needs. Otherwise I don’t think it’s possible to select this element with pure CSS, because it’s rendered as sibling to headers (and other foldable elements) and in codemirror’s html it’s not described in any way which element it affects.

.CodeMirror-code>:first-child .CodeMirror-guttermarker-subtle {
    padding-top: 20px;
}

Or if you’d like to test how it works for you without these icons:

.CodeMirror-guttermarker-subtle {
    display: none;
}

[janpeeters]

Thanks @Piotr, I’ll stick with the padding-bottom only solution for now, I find the icons quite useful. But thanks for elaborating.

[janpeeters]

The extra space in lists comes from padding afaik (why lists have extra space beats me). It can be that the cursor will become normal again if you remove the padding. I use the following code:

/* bullet lists same line height as body copy */
.cc-pretty-preview .markdown-preview-section ul li, .cc-pretty-preview .markdown-preview-section ol li {
	margin-top: 0px;
	margin-bottom: 0px;
}

.cc-pretty-editor .cm-s-obsidian pre.HyperMD-list-line {
	padding-top: 0;
	padding-bottom: 0px;
}

[Persephone]

I see now that this also applies to other themes, I just hadn’t noticed so far. As a workaround I’ll keep the reduced line height, which makes it significantly less noticeable for me.