Heading (and text after it) indentation

Custom CSS & Theme Design
4

Hi @teseracto ! :blush:

Here is the CSS code snippet I use to achieve this, maybe it will work for you too :

/* Shift left all headings in the gutter in order to make them more distinguishable from text bodies in Editing and Reading modes. */
/* NOTE : `:not(.callout-content)` is used to exclude headings contained in callout boxes */
.HyperMD, 
:not(.callout-content) > h1,
:not(.callout-content) > h2,
:not(.callout-content) > h3,
:not(.callout-content) > h4,
:not(.callout-content) > h5,
:not(.callout-content) > h6 {
  position: relative;
}
h1, .HyperMD-header-1 {
  left: -31px;
}
h2, .HyperMD-header-2 {
  left: -30px;
}
h3, .HyperMD-header-3 {
  left: -22.5px;
}
h4, .HyperMD-header-4 {
  left: -15px;
}
h5, .HyperMD-header-5 {
  left: -7.5px;
}
h6, .HyperMD-header-6 {
  left: 0px;
}
div.markdown-preview-view,
div.markdown-source-view div.cm-content { /* This is used to center note considering shifted titles */
  padding-left: 60px !important;
  padding-right: 20px !important;
}

I agree with @ironhak, I don’t think to that indenting text bodies by header is possible from plain CSS. In the past I tried to use a JS script for this, but it led to a buggy jumping effect, so I opted for that simple CSS code which is sufficient for me.

Let me know if you need further clarification,
Lila.

6 Likes