Snippet to set point size for headers

Basement
1

I’m not a CSS expert, but I would like to make a snippet that would universally set the point size for headers (#, ##, ###, etc.) so I could use that snippet when I try out different templates. I prefer header point size to be the much larger than ordinary body text. So for me, that would be body text==14pt, ### == 16pt, ##==16pt, and #==18pt.

(I searched “header point size snippet” and didn’t find any posts that looked like the answer.)

2 
# = h1
## = h2
### = h3
etc.

For preview mode, you can use this css snippet:


/* h1 */
.empty-state-title, .markdown-preview-view h1 {
    font-size: 18pt;
}

/* h2 */
.markdown-preview-view h2,
.HyperMD-header-2,
.cm-header-2 {
    font-size: 16pt;
}

/* h3 */
.markdown-preview-view h3,
.HyperMD-header-3,
.cm-header-3 {
    font-size: 16pt;
}
3

Cool. Thank you @mnvwvnm.

Any suggestions for editing mode?

4

You could, perhaps, edit this to suit your needs. Does both edit and preview mode.

/* << EDITOR and PREVIEW HEADERS >> */

.cm-header-1, .markdown-preview-view h1 {
  font-size: 1.55em;
  color: #797972;
  font-weight: 400 !important;
}

.cm-header-2, .markdown-preview-view h2 {
  font-size: 1.4em;
  color: #797972;
  font-weight: 400 !important;
}

.cm-header-3, .markdown-preview-view h3 {
  font-size: 1.3em;
  color: #797972;
  font-weight: 400 !important;
}

.cm-header-4, .markdown-preview-view h4 {
  font-size: 1.2em;
  color: #797972;
  font-weight: 400 !important;
}

.cm-header-5, .markdown-preview-view h5 {
  font-size: 1.1em;
  color: #797972;
  font-weight: 400 !important;
}

.cm-header-6, .markdown-preview-view h6 {
  font-size: 1em;
  color: #797972;
  font-weight: 400 !important;
}

Angel

5

The previous code already contemplates the “editing mode” for h2 and h3. Missing h1. Reformulating h1 code for both modes:

/* h1 */
.empty-state-title,
.markdown-preview-view h1,
.HyperMD-header-1,
.cm-header-1 {
    font-size: 18pt;
}
1 Like
6

Gotcha! Thank you very much. (And a hat tip to @anon12638239 too for their assistance.)

This makes experimenting with contributed templates a lot easier on the eyes. Large-size headers feels like the page is screaming at me :smile:

1 Like
7

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.