How to space paragraphs and headings

Devs: Theme Design & Custom CSS
1

I have a CSS snippet that formats spaces between headings the way I want (see below), but as soon as I add this additional code, it counteracts the space between headings:

.cm-editor :is(.cm-line + .cm-line) {
padding-top: 0.5em;
}

I’m not sure how to reconfigure them so they don’t conflict. I’m guessing that it conflicts because it refers to all lines, and needs to be specific to non-headings, but I don’t know how to write that.

These are the headings codes:

/* live preview mode bottom line beneath headings */
.cm-editor .HyperMD-header-1 {
  border-bottom: 1px solid #CCCCCC;
  padding-bottom: 0.2em;
}


/* live preview mode bottom line beneath headings */
.cm-editor .HyperMD-header-2 {
  border-bottom: 1px solid #e5d5ec;
  padding-bottom: 0.2em;
}

/* live preview mode bottom line beneath headings */
.cm-editor .HyperMD-header-3 {
  border-bottom: 1px solid #a582b5;
  padding-bottom: 0.2em;
}

/* live preview mode bottom line beneath headings */
.cm-editor .HyperMD-header-4 {
  border-bottom: 1px solid #896f95;
  padding-bottom: 0.2em;
}

/* live preview mode bottom line beneath headings */
.cm-editor .HyperMD-header-5 {
  border-bottom: 1px solid #6b5874;
  padding-bottom: 0.2em;
}

/* live preview mode bottom line beneath headings */
.cm-editor .HyperMD-header-6 {
  border-bottom: 1px solid #4b3e51;
  padding-bottom: 0.2em;
}

(And the same in reading view)

.markdown-rendered h1 {
   --heading-spacing: 30x !important; 
}

.markdown-rendered :is(h2, h3, h4, h5, h6) {
   --heading-spacing: 10px; 
}

.cm-s-obsidian .cm-line.HyperMD-header-1 {
    padding-top: 35px; 
}

.cm-s-obsidian .cm-line:is(.HyperMD-header-2, .HyperMD-header-3) {
    padding-top: 20px; 
}

.cm-s-obsidian .cm-line:is(.HyperMD-header-4) {
    padding-top: 17.5px; 
}

.cm-s-obsidian .cm-line:is(.HyperMD-header-5, .HyperMD-header-6) {
    padding-top: 15px; 
}

/* Add a bottom line to headings */
h1 {
    padding-top: 35px;
}

/* Add spacing above headings in reading view */
h2, h3, h4, h5, h6 {
    padding-top: 25px;
}

/* Add a bottom line to headings in reading view */
h1, h2 {
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 0.25em;
}

/* Add a bottom line to headings in reading view */
h3, h4, h5, h6 {
    border-bottom: 1px solid #D9CDF9;
    padding-bottom: 0.25em;
}

Any help is appreciated :smiley:

2

I’ve solved it, actually!

I was going to delete the topic, but just in case anyone has a similar problem, I added “!important” to the heading scripts and changed the paragraph spacing code to:

/* live preview mode bottom mode space between paragraphs */
.cm-editor :is(.cm-line + .cm-line) {
   padding-bottom: 0.5em;
}

And this solved the problem.

:smiley:

3

It seems it’s sorted out, but I would try something like .cm-line:not(.HyperMD-header) to exclude headings instead of slapping !importants on a bunch of stuff.

4

Hey! Thanks for the suggestion. So I’ve written this:

/* live preview mode bottom mode space between paragraphs */
.cm-line:not(.HyperMD-header) {
   padding-bottom: 0.5em;
}

I’m not sure if this is what you meant. It doesn’t interfere with the headings, but it only increases spacing between lines, rather than between paragraphs, which is what I’m looking for. Is there any way to combine the “not header” with the “.cm-line + .cm-line” instruction?

I made an attempt, but it hasn’t worked:

.cm-editor :is(.cm-line:not(.HyperMD-header) + .cm-line:not(.HyperMD-header))  {
   padding-bottom: 0.5em;
}
5

ariehen was saying to make the first line .cm-editor .cm-line:not(.HyperMD-header) {

If you’re interested, here’s a little clean-up of all the code you shared. This might make it easier for you to continue tweaking. I typed it from looking at your CSS, so if I missed anything and you can’t figure out how to put it back in, feel free to let me know.

/* Live Preview */

.cm-editor .cm-line:not(.HyperMD-header) {
	padding-bottom: 0.5em;
}

.markdown-source-view.cm-s-obsidian .HyperMD-header {
	border-bottom: 1px solid var(--my-heading-line-color);
	padding-bottom: 0.2em;
	padding-top: var(--my-heading-padding-top);
}

.HyperMD-header-1 { --my-heading-line-color: #cccccc; --my-heading-padding-top: 35px; }
.HyperMD-header-2 { --my-heading-line-color: #e5d5ec; --my-heading-padding-top: 20px; }
.HyperMD-header-3 { --my-heading-line-color: #a582b5; --my-heading-padding-top: 20px; }
.HyperMD-header-4 { --my-heading-line-color: #896f95; --my-heading-padding-top: 17.5px; }
.HyperMD-header-5 { --my-heading-line-color: #6b5874; --my-heading-padding-top: 15px; }
.HyperMD-header-6 { --my-heading-line-color: #4b3e51; --my-heading-padding-top: 15px; }


/* Reading */

h1 {
	--heading-spacing: 30px;
	padding-top: 35px;
}

h2, h3, h4, h5, h6 {
	--heading-spacing: 10px;
	padding-top: 25px;
}

h1, h2 {
	border-bottom: 1px solid #CCCCCC;
	padding-bottom: 0.25em;
}

h3, h4, h5, h6 {
	border-bottom: 1px solid #D9CDF9;
	padding-bottom: 0.25em;
}
6

I’ve tried it out and everything looks the same.

Thank you for clarifying, and for your help. :grinning_face_with_smiling_eyes: