tutorial toc

tutorial/style.scss

@@ -0,0 +1,81 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.cm-editor {
+  background-color: transparent !important;
+}
+
+h1::before,
+h2::before,
+h3::before,
+h4::before,
+h5::before,
+h6::before {
+  display: block;
+  content: ' ';
+  margin-top: -70px;
+  height: 70px;
+  visibility: hidden;
+  pointer-events: none;
+  position: relative;
+}
+
+h1:hover .icon-link,
+h2:hover .icon-link,
+h3:hover .icon-link,
+h4:hover .icon-link,
+h5:hover .icon-link,
+h6:hover .icon-link,
+.icon.icon-link:hover {
+  visibility: visible;
+}
+.icon.icon-link {
+  background-image: url(./link.svg);
+  background-repeat: no-repeat;
+  width: 16px;
+  height: 16px;
+  display: block;
+  color: gray;
+  fill: black;
+  position: absolute;
+  visibility: hidden;
+  margin-left: -20px;
+  width: 20px;
+  margin-top: 8px;
+}
+
+#table-of-contents {
+  display: none;
+}
+
+#table-of-contents + ul {
+  position: fixed;
+  right: 0;
+  top: 64px;
+  padding: 12px 0;
+  overflow: auto;
+  height: calc(100vh - 64px);
+  width: 33%;
+  margin: 2px;
+  padding-left: 8px;
+  ul {
+    padding-left: 8px;
+  }
+  li {
+    list-style: none;
+    margin: 2px;
+    p {
+      margin: 0;
+    }
+    a {
+      text-decoration: none;
+    }
+  }
+}
+
+@media only screen and (max-width: 1120px) {
+  #table-of-contents + ul {
+    display: none;
+  }
+}