index.html

## index.html
<html>
<head>
  <meta charset="UTF-8">

  <style>

    body {
        line-height: 20px;
        font-size: 15px;
        color: #555;
        background: #f1f1f1;
        padding: 30px;
    }
    body, input, textarea {
        color: rgba(0, 0, 0, 0.75);
        font: 16px/20px "Source Sans Pro", Arial;
        min-height: 30px;
        -webkit-font-smoothing: antialiased;
    }

    /**
     * Substance List styles
     * -------
     *
     * Used for ordered lists
     *
     * Supports nesting only up to level-4
     */

    .li.level-2 { margin-left: 20px; }
    .li.level-3 { margin-left: 40px; }
    .li.level-4 { margin-left: 60px; }

    /* Spacing */
    .li.list-start { padding-top: 20px; }
    .li.list-end { padding-bottom: 20px; }

    /**
     * Unordered lists
     * -------
     */

     .ul.li::before {
        /*font-size: 12px;*/
        content: "▪ ";
     }

    /**
     * Ordered lists
     * -------
     *
     * Use CSS counters and support nesting up to level 4
     */

    /* When a new list occurs counters are reset */
    .list-start {
      counter-reset: level1 level2 level3 level4 !important;
    }
    /* Resets for individual levels */
    .ol.li.level-1 { counter-reset: level2 level3 level4; }
    .ol.li.level-2 { counter-reset: level3 level4; }
    .ol.li.level-3 { counter-reset: level4; }

    /* Counter displays for levels 1-3 */

    .ol.li.level-1::before { counter-increment: level1; content: counter(level1) ". "; }
    .ol.li.level-2::before { counter-increment: level2; content: counter(level1) "." counter(level2) ". " ; }
    .ol.li.level-3::before { counter-increment: level3; content: counter(level1) "." counter(level2) "." counter(level3) ". "; }
    .ol.li.level-4::before { counter-increment: level4; content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) ". "; }

  </style>
</head>

<body>
  <div class="paragraph">Here comes an ordered list</div>
  <div class="ol li level-1 list-start">A</div>
  <div class="ol li level-1">B</div>
  <div class="ol li level-2">B1</div>
  <div class="ol li level-2">B2</div>
  <div class="ol li level-3">B2a</div>
  <div class="ol li level-3">B2b</div>
  <div class="ol li level-1">C</div>
  <div class="ol li level-2">C2</div>
  <div class="ol li level-3">C2a</div>
  <div class="ol li level-3">C2b</div>
  <div class="ol li level-4">C2b1</div>
  <div class="ol li level-4 list-end">C2b2</div>
  <div class="paragraph">I am a paragraph in between</div>
  <div class="ol li level-1 list-start">A</div>
  <div class="ol li level-1">B</div>
  <div class="ol li level-2">B1</div>
  <div class="ol li level-1">C</div>
  <div class="ol li level-1 list-end">C2</div>
  <div class="paragraph">Now comes an unordered list</div>

  <div class="ul li level-1 list-start">A</div>
  <div class="ul li level-1">B</div>
  <div class="ul li level-2">B1</div>
  <div class="ul li level-2">B2</div>
  <div class="ul li level-3">B2a</div>
  <div class="ul li level-3">B2b</div>
  <div class="ul li level-1">C</div>
  <div class="ul li level-2 list-end">C2</div>
  <div class="ul li level-3">C2a</div>
  <div class="ul li level-3">C2b</div>
  <div class="ul li level-4">C2b1</div>
  <div class="ul li level-4">C2b2</div>
</body>
</html>