Custom CSS for cleaner line spacings with Minimal theme
I use Minimal theme because it makes the UI super clean. However, one thing I don't like is how the theme handles line spacings. I believe quite some people have similar problems.
Specifically, the issues are
- A paragraph following a heading is way too close to the heading.
- The spacing before a paragraph and spacing after a paragraph is different.
- The discrepancy between the edit view and read view is too much.
- Indent for list is a bit large, and the gap between the bullet and the text is too small.
I thought there would be a simple and easy fix to these issues. But I was too naive...
As usual I googled my issue and found some helpful discussions on line spacings. However, when I changed some settings, it either affected only one of the two modes, or affected the two in a different way. This drove me crazy, as I couldn't un-see those ugly spacings once I noticed them.
I've spent some unhealthy amount of time figuring out how to handle this. I learned that turning on the developer tool and analyzing the CSS myself is the most effective way to tackle these OCD-inducing subtle eye-sores in formatting.
Long story short, the key was to modify the variable --p-spacing-empty and implementing margin-block-start for edit mode using + and :not().
Below is the CSS that fixes these issues. I also attached before and after shots.
These issues may seem trivial to those who are familiar with CSS. However, I couldn't find any discussion recent and specific enough to easily solve this issue for me. I hope this post helps someone having similar troubles. Also, English is not my native language, so please understand minor grammar issues...
/* changes to global variables */
body {
--p-spacing: 1.0rem;
--p-spacing-empty: 1.0rem;
--heading-spacing: 0;
--list-edit-offset: 0;
}
/* -------------------------- */
/* edit mode (preview) tweaks */
/* -------------------------- */
/* Spacing before all headings */
.cm-s-obsidian .cm-line.HyperMD-header {
padding-top: var(--p-spacing-empty);
padding-bottom: 0 !important;
}
/* Larger spacing before H1 */
.cm-line.HyperMD-header-1 {
padding-top: calc(var(--p-spacing-empty)*2) !important;
}
/* Margin between H1 and its divider */
.h1-l .markdown-reading-view h1:not(.embedded-note-title),
.h1-l .mod-cm6 .cm-editor .HyperMD-header-1{
padding-bottom: calc(var(--p-spacing-empty)*0.8) !important;
border-bottom: 2.5px solid var(--h1l); /* thicker divider */
}
/* Spacing before First lines of lists */
.is-live-preview .cm-line:not(.HyperMD-list-line) +
.cm-line.HyperMD-list-line {
padding-top: var(--p-spacing-empty);
}
/* Larger list indent */
.cm-formatting-list.cm-formatting-list-ul {
margin-right: 5px;
}
/* ---------------- */
/* read mode tweaks */
/* ---------------- */
/* Spacing of headings except for H1 */
.markdown-rendered :is(h2, h3, h4, h5, h6) {
margin-block-start: var(--p-spacing-empty) !important;
margin-block-end: 0.0rem !important;
padding-top: 0rem !important;
padding-bottom: 0.0rem !important;
}
/* Spacing of H1 */
.markdown-rendered :is(h1) {
margin-block-start: calc(var(--p-spacing-empty)*2) !important;
margin-block-end: 0.0rem !important;
padding-top: 0rem !important;
padding-bottom: calc(var(--p-spacing-empty)/2) !important; /* spacing above divider */
}
/* Larger list indent */
.markdown-rendered .list-bullet {
margin-right: 5px;
}
