HTML CSS

<article>
  <h1>Indented TOC</h1>
  <nav class="toc" aria-expanded="true" aria-controls="toc-list">
    <h2>Table of Contents</h2>
    <ol id="toc-list" class="">
      <li class="toc-entry toc-h2">
        <a href="#how-do-i-use-shortcuts">How do I use shortcuts?</a>
      </li>
      <li class="toc-entry toc-h2">
        <a href="#how-to-add-and-modify-keybindings">How to add and modify keybindings</a>
        <ol>
          <li class="toc-entry toc-h3">
            <a href="#what-is-the-when-clause">What is the when clause?</a>
          </li>
          <li class="toc-entry toc-h3">
            <a href="#how-to-avoid-and-fix-conflicts">How to avoid and fix conflicts</a>
          </li>
        </ol>
      </li>
      <li class="toc-entry toc-h2">
        <a href="#keybindings-for-panels">Keybindings for panels</a>
        <ol>
          <li class="toc-entry toc-h3">
            <a href="#navigate-to-next-panel-view">Navigate to next panel view</a>
          </li>
        </ol>
      </li>
      <li class="toc-entry toc-h2">
        <a href="#keybindings-for-markdown">Keybindings for Markdown</a>
        <ol>
          <li class="toc-entry toc-h3">
            <a href="#toggle-inline-elements-image-linketc">Toggle inline elements (image, link..etc)</a>
          </li>
          <li class="toc-entry toc-h3">
            <a href="#toggle-block-elements">Toggle block elements</a>
          </li>
          <li class="toc-entry toc-h3">
            <a href="#toggle-headings">Toggle headings</a>
          </li>
          <li class="toc-entry toc-h3">
            <a href="#extended-syntax">Extended syntax</a>
          </li>
          <li class="toc-entry toc-h3">
            <a href="#avoid-a-clash-with-the-view-toggle-side-bar-visibility-command">Avoid a clash with the “View: Toggle Side Bar Visibility”
              command</a>
          </li>
        </ol>
      </li>
      <li class="toc-entry toc-h2">
        <a href="#keybindings-for-file-management">Keybindings for file management</a>
      </li>
      <li class="toc-entry toc-h2">
        <a href="#keybindings-for-the-terminal">Keybindings for the terminal</a>
        <ol>
          <li class="toc-entry toc-h3">
            <a href="#simplify-opening-a-new-terminal-pane">Simplify opening a new terminal pane</a>
          </li>
          <li class="toc-entry toc-h3">
            <a href="#close-any-terminal-instance">Close any terminal instance</a>
          </li>
          <li class="toc-entry toc-h3">
            <a href="#simplify-paste">Simplify paste</a>
          </li>
          <li class="toc-entry toc-h3">
            <a href="#simplify-scrolling">Simplify scrolling</a>
          </li>
        </ol>
      </li>
      <li class="toc-entry toc-h2">
        <a href="#final-word">Final word</a>
      </li>
    </ol>
  </nav>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo ipsum
    voluptatibus porro dicta eos cupiditate minus accusantium quod, eum, dolores
    neque delectus harum nulla ea nesciunt eaque corporis? Repudiandae, explicabo.
  </p>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia fugiat
    eveniet, earum iusto ut distinctio maiores! Earum est id minima odio
    temporibus dolorem consequatur iste dicta cumque repudiandae. Aliquid, iusto?
  </p>
  <h2 id="how-do-i-use-shortcuts">How do I use shortcuts?</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi,
    exercitationem culpa necessitatibus error quidem veritatis minus sunt ratione
    id temporibus accusamus ea ducimus! Tempora sit repellat distinctio atque
    sapiente ut?
  </p>
  <p>
    Molestiae fugiat debitis dolores laborum possimus sapiente fugit! Rem natus
    eum nisi pariatur ut, alias maiores molestias ratione accusamus aspernatur
    esse soluta, ipsam vel tempora nobis provident fugiat ea deleniti?
  </p>
  <h2 id="how-to-add-and-modify-keybindings">
    How to add and modify keybindings
  </h2>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam fuga alias
    quia voluptate asperiores tempora sequi nobis quod quam consequatur culpa
    corporis expedita error, mollitia id aut accusamus beatae incidunt.
  </p>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero, tenetur
    dignissimos? Consectetur eaque, quasi illum blanditiis, ab doloremque mollitia
    dolorum, aspernatur dolor omnis tempora corporis quam aut alias id similique?
  </p>
  <h3 id="what-is-the-when-clause">
    What is the
    <code class="language-plaintext highlighter-rouge">when</code> clause?
  </h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem nam cum ab
    pariatur harum dolores, voluptates blanditiis sunt saepe fugiat maxime itaque
    et provident necessitatibus reiciendis accusantium iste doloribus. Incidunt.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quisquam
    possimus veritatis quam quod quo dolore est adipisci inventore, nihil debitis
    laudantium similique temporibus corrupti. Voluptatem distinctio numquam
    perspiciatis quas!
  </p>
  <h3 id="how-to-avoid-and-fix-conflicts">How to avoid and fix conflicts</h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio facilis error
    omnis voluptatum modi debitis iure cumque culpa sint obcaecati nam ducimus
    iste repudiandae aliquam, laboriosam ipsa, nulla, quam provident!
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod velit modi
    consequatur libero minus dicta, ut alias blanditiis reprehenderit nisi ex qui,
    debitis, expedita non ipsa dolorem corporis labore cum!
  </p>
  <h2 id="keybindings-for-panels">Keybindings for panels</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorem
    maxime vitae optio dicta sapiente voluptates placeat aliquam sed suscipit, aut
    maiores nam voluptate odio, facilis neque aperiam ipsa laboriosam!
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur aut dolore
    deserunt fugit eaque molestiae, ipsam nam suscipit dignissimos inventore iure
    qui nulla vel quaerat in fuga? Voluptatem, natus fugit?
  </p>
  <h3 id="navigate-to-next-panel-view">Navigate to next panel view</h3>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit non vitae,
    et maxime corporis est aliquam eius quia sunt ipsum beatae id quisquam. Sed
    aliquid, quos enim fugit illum odit.
  </p>
  <h2 id="keybindings-for-markdown">Keybindings for Markdown</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione similique,
    repellat odio inventore, laudantium accusamus molestiae in optio quos ipsam,
    est hic culpa officiis! Aperiam quibusdam dolore soluta. Ipsa, harum.
  </p>
  <h3 id="toggle-inline-elements-image-linketc">
    Toggle inline elements (image, link..etc)
  </h3>
  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam error
    praesentium quidem, culpa, magni deleniti omnis illo a eveniet reiciendis quis
    quisquam unde, repudiandae quaerat? Magnam minus laboriosam maiores vel.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis vitae
    cumque accusamus, rem, porro odit inventore pariatur eligendi, dolorum optio
    culpa! Exercitationem maxime libero sunt minus mollitia facere! Nobis, totam?
  </p>
  <h3 id="toggle-block-elements">Toggle block elements</h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, quasi.
    Architecto esse assumenda autem ab est? Doloribus debitis eaque necessitatibus
    ipsam, ratione est illum odit cupiditate maxime quaerat nihil. Ad!
  </p>
  <h3 id="toggle-headings">Toggle headings</h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut odio reprehenderit
    dignissimos iste deserunt, tempora delectus amet est nobis repellendus culpa
    provident accusantium veniam, at minus ipsam ipsa. Nulla, voluptatem.
  </p>
  <h3 id="extended-syntax">Extended syntax</h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam ea, quae eveniet
    vitae fugit eum hic voluptate beatae unde! Placeat voluptate cumque
    perspiciatis eaque eum aliquid ipsam, dolore adipisci est!
  </p>
  <h3 id="avoid-a-clash-with-the-view-toggle-side-bar-visibility-command">
    Avoid a clash with the “View: Toggle Side Bar Visibility” command
  </h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit velit aperiam
    molestias animi, fugit vel accusantium alias odit minus ex voluptates eveniet
    tenetur veniam laborum aliquid facere veritatis suscipit eligendi?
  </p>
  <h2 id="keybindings-for-file-management">Keybindings for file management</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae aspernatur
    quaerat autem rerum corporis, vel nemo, dolore eligendi unde saepe minus
    soluta perspiciatis! Unde deserunt iusto nihil nisi odit accusamus!
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet explicabo ipsam
    aperiam maxime nisi quam! Culpa eaque, temporibus cumque tenetur ipsam aliquam
    quo maiores iure, dolores ipsum iusto aliquid nostrum.
  </p>
  <h2 id="keybindings-for-the-terminal">Keybindings for the terminal</h2>
  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum molestias
    unde explicabo eaque. Fuga commodi voluptates quas, quo numquam culpa sint
    libero neque saepe placeat, dolorem temporibus nam eveniet laboriosam.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti vel
    molestias ratione aliquam a alias at maxime minus, voluptas numquam atque
    similique consectetur, quis, ducimus voluptatibus laboriosam architecto optio
    aspernatur.
  </p>
  <h3 id="simplify-opening-a-new-terminal-pane">
    Simplify opening a new terminal pane
  </h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa in doloribus
    quas aliquam odio quis quidem iure maiores distinctio architecto quo, earum
    saepe eius, velit impedit ducimus voluptate! Voluptas, corporis!
  </p>
  <h3 id="close-any-terminal-instance">Close any terminal instance</h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores
    ipsam excepturi, deleniti beatae labore quidem cum repudiandae, laboriosam
    ullam impedit! Ullam corporis nobis facere fugiat repudiandae laboriosam iusto
    atque!
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste molestias
    pariatur, explicabo libero soluta dicta, amet qui sunt optio numquam doloribus
    ducimus dolorem ipsum iusto vel suscipit! Nihil, quae harum!
  </p>
  <h3 id="simplify-paste">Simplify paste</h3>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam magnam
    reiciendis cupiditate beatae corporis unde quaerat numquam, animi saepe
    aspernatur debitis facilis sapiente ipsa perspiciatis possimus ab veritatis
    eaque maiores!
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, modi,
    perspiciatis, fuga quo qui adipisci reiciendis neque quidem pariatur sapiente
    incidunt non. Maxime aut voluptatum, culpa nisi assumenda ab reprehenderit!
  </p>
  <h3 id="simplify-scrolling">Simplify scrolling</h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas iusto
    reprehenderit nemo qui alias odit nam quam dolorum, eius magni architecto
    consequuntur libero enim odio numquam et necessitatibus iure. Mollitia!
  </p>
  <h2 id="final-word">Final word</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia officia sit
    nemo ex laudantium velit expedita, soluta blanditiis tempore libero, eligendi
    magnam rerum enim placeat quod quasi praesentium et voluptatibus!
  </p>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem a, temporibus
    doloremque natus saepe repellendus quam dicta odio reprehenderit cupiditate
    eveniet maxime molestias doloribus omnis voluptatem beatae, sapiente,
    obcaecati consectetur.
  </p>
</article>

/* custom numbering of list items */
  .toc ol {
    list-style-type: none;

    counter-reset: toc-counter;
  }

  .toc li::before {
    content: counters(toc-counter, ".") " "; /* Combines the values of all instances by a period */

    counter-increment: toc-counter; /* Increments only this instance of the toc-counter counter */

    color: hsl(14, 51%, 54%);
  }

  .toc {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1rem;

    border-radius: 5px;

    background-color: #fffff9;
    border: 1px solid lightgrey;

    padding: 1rem;
  }

  .toc h2,
  .toc ol {
    margin: 0;
  }

  .toc a {
    text-decoration: none;
    color: hsl(193, 46%, 39%);
  }

  /* general styles */

  body {
    margin: 1rem 0;
    padding: 0 6px;
  }

  article {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }

  p {
    margin: 1rem 0;
  }

  .hide {
    display: none;
  }

  h1,
  h2,
  h3,
  h4 {
    text-align: center;
  }

  html {
    scroll-behavior: smooth;
  }