Modifying the website to have nested Headings

#Digital-Garden-Plugin #Publishing-Obsidian-Notes

Modify the custom-style.scss file in your GitHub repo located here src/site/styles/custom-style.scss

The modified file:

body {
    /***
      ADD YOUR CUSTOM STYLING HERE. (INSIDE THE body {...} section.)
      IT WILL TAKE PRECEDENCE OVER THE STYLING IN THE STYLE.CSS FILE.
   ***/
    //  background-color: white;
    //  .content {
    //   font-size: 14px;
    //  }
    //  h1 {
    //   color: black;
    //  }
    /* 1. Set fixed indents for the headings */
.content h1 { margin-left: 0px !important; }
.content h2 { margin-left: 20px !important; }
.content h3 { margin-left: 40px !important; }
.content h4 { margin-left: 60px !important; }
.content h5 { margin-left: 80px !important; }
.content h6 { margin-left: 100px !important; }

/* 2. Indent content that follows an H1 */
.content h1 ~ * { margin-left: 20px; }

/* 3. Indent content after H2 (UNLESS an H1 appears) */
.content h2 ~ *:not(h2 ~ h1 ~ *) { margin-left: 40px; }

/* 4. Indent content after H3 (UNLESS an H1 or H2 appears) */
.content h3 ~ *:not(h3 ~ h1 ~ *, h3 ~ h2 ~ *) { margin-left: 60px; }

/* 5. Indent content after H4 */
.content h4 ~ *:not(h4 ~ h1 ~ *, h4 ~ h2 ~ *, h4 ~ h3 ~ *) { margin-left: 80px; }

/* 6. Indent content after H5 */
.content h5 ~ *:not(h5 ~ h1 ~ *, h5 ~ h2 ~ *, h5 ~ h3 ~ *, h5 ~ h4 ~ *) { margin-left: 100px; }

/* 7. Indent content after H6 */
.content h6 ~ *:not(h6 ~ h1 ~ *, h6 ~ h2 ~ *, h6 ~ h3 ~ *, h6 ~ h4 ~ *, h6 ~ h5 ~ *) { margin-left: 120px; }

    /* Tightly pack headings to match Obsidian Editor Mode */
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
    margin-top: 16px !important;    /* Gives just a little breathing room above the heading */
    margin-bottom: 4px !important;  /* Pulls the content below right up against the heading */
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    line-height: 1.3 !important;
    }

/* Tightly pack standard text blocks (paragraphs and lists) */
.content p, .content ul, .content ol, .content blockquote {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    }

    
}