generatoc/src/style/main.css

Automatically generate table of content from heading of HTML document

/* TOC */
body {
  --toc-color: #1b81b8
}

#toc {
  position: fixed;
  left: 50%;
  top: 20%;
  margin-left: 400px;
  border-left: 1px solid #dddddd;
}

#toc a {
  display: block;
  color: #cccccc;
  transition: color .6s ease-in-out;
}

#toc a:hover {
  padding: 0;
  color: var(--toc-color);
}

#toc .active a {
  color: var(--toc-color);
}

#toc ul {
  margin-left: 1em;
  transition: all .6s ease-in-out;
  transform-origin: 50% 0;
}

#toc li {
  list-style: none;
  display: block;
}

@media only screen and (max-width: 540px) {
  #toc {
    display: none;
  }
}