refactor(theme): use scss and split index.css into modules

1 files changed, 89 insertions, 0 deletions

diff --git a/assets/css/components/_content.scss b/assets/css/components/_content.scss
new file mode 100644
index 00000000..6c5815cb
--- /dev/null
+++ b/assets/css/components/_content.scss
@@ -0,0 +1,89 @@
+/* toc */
+
+#toc-container {
+    position: absolute;
+    bottom: 0;
+    right: calc(50% + var(--page-width) / 2);
+    left: auto;
+    height: 100%;
+    top: 12rem;
+}
+
+@media screen and (max-width: 1200px) {
+    #toc-container {
+        display: none
+    }
+}
+
+#toc {
+    /* position */
+    position: sticky;
+    top: 3rem;
+    /* styling */
+    font-size: 1rem;
+    padding: 0 2rem;
+}
+
+@media screen and (max-width: 1700px) {
+    #toc {
+        font-size: 0.9rem;
+    }
+}
+
+@media screen and (max-width: 1500px) {
+    #toc {
+        font-size: 0.825rem;
+    }
+}
+
+#toc ul, #toc ol {
+    margin-block-start: 0;
+    margin-block-end: 0;
+    padding-inline-start: 1rem;
+}
+
+#toc li {
+    list-style: none;
+}
+
+#toc li > a {
+    color: var(--secondary-text-color);
+    text-decoration: none;
+    transition: color .3s;
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+}
+
+#toc li > a::before {
+    content: '';
+    display: inline-block;
+    width: 1rem;
+    height: .3rem;
+    background-color: var(--block-background-color);
+    border-radius: .2rem;
+    transition: background .3s;
+}
+
+#toc li a:hover,
+#toc li.is-active-li > a {
+    color: var(--text-color);
+}
+
+#toc li.is-active-li > a::before {
+    background-color: var(--secondary-text-color);
+}
+
+#toc .toc-list {
+	overflow: hidden;
+	position: relative;
+}
+
+#toc .toc-list .toc-list {
+    max-height: 25rem;
+	overflow-y: auto
+}
+
+#toc .toc-list.is-collapsed {
+	max-height: 0
+}