refactor: move toc css to content.css

Former-commit-id: 9bea54b8d6e25b2c194e8555210fb6df16e3c851

3 files changed, 60 insertions, 77 deletions

diff --git a/assets/css/components/_toc.scss b/assets/css/components/_toc.scss
new file mode 100644
index 00000000..0fcd9188
--- /dev/null
+++ b/assets/css/components/_toc.scss
@@ -0,0 +1,50 @@
+#toc {
+    ul {
+        margin-block-start: 0;
+        margin-block-end: 0;
+        padding-inline-start: 1rem;
+
+        overflow: hidden;
+        position: relative;
+        li {
+            list-style: none;
+
+            & > a {
+                color: var(--secondary-text-color);
+                text-decoration: none;
+                transition: color .3s;
+                display: inline-flex;
+                align-items: center;
+                gap: .5rem;
+                &::before {
+                    content: '';
+                    display: inline-block;
+                    width: 1rem;
+                    height: .3rem;
+                    background-color: var(--block-background-color);
+                    border-radius: .2rem;
+                    transition: background .3s;
+                }
+            }
+
+            /* nested list */
+            ul {
+                max-height: 25rem;
+                overflow-y: auto
+            }
+
+            /* active styles */
+            &:not(.active) ul {
+                max-height: 0
+            }
+            a:hover,
+            &.active > a {
+                color: var(--text-color);
+            }
+
+            &.active > a::before {
+                background-color: var(--secondary-text-color);
+            }
+        }
+    }
+}
diff --git a/assets/css/content.scss b/assets/css/content.scss
index ca707daf..c172cc36 100644
--- a/assets/css/content.scss
+++ b/assets/css/content.scss
@@ -1,2 +1,3 @@
-@import "libraries/littlefoot";
-@import "libraries/fancybox";
+@import "components/littlefoot";
+@import "components/fancybox";
+@import "components/toc";
diff --git a/layouts/_partials/posts/toc.html b/layouts/_partials/posts/toc.html
index 794328c9..0af63e4a 100644
--- a/layouts/_partials/posts/toc.html
+++ b/layouts/_partials/posts/toc.html
@@ -1,80 +1,12 @@
 {{ if .Params.toc }}
-<div id="toc-container"><div id="toc">{{ .TableOfContents }}</div></div>
-<style>
-/* 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) {
-        display: none
-    }
-}
+<div id="toc-container"
+    class="absolute bottom-0 right-[calc(50%_+_var(--page-width)_/_2)] left-auto
+    h-full top-[12rem] hidden xl:block">
+    <div id="toc"
+        class="sticky top-12 text-size-sm 2xl:text-size-base px-8"
+    >{{ .TableOfContents }}</div>
+</div>
 
-#toc {
-    /* position */
-    position: sticky;
-    top: 3rem;
-    /* styling */
-    font-size: 1rem;
-    padding: 0 2rem;
-    @media screen and (max-width: 1500px) {
-        font-size: 0.825rem;
-    }
-
-    ul {
-        margin-block-start: 0;
-        margin-block-end: 0;
-        padding-inline-start: 1rem;
-
-        overflow: hidden;
-        position: relative;
-        li {
-            list-style: none;
-
-            & > a {
-                color: var(--secondary-text-color);
-                text-decoration: none;
-                transition: color .3s;
-                display: inline-flex;
-                align-items: center;
-                gap: .5rem;
-                &::before {
-                    content: '';
-                    display: inline-block;
-                    width: 1rem;
-                    height: .3rem;
-                    background-color: var(--block-background-color);
-                    border-radius: .2rem;
-                    transition: background .3s;
-                }
-            }
-
-            /* nested list */
-            ul {
-                max-height: 25rem;
-                overflow-y: auto
-            }
-
-            /* active styles */
-            &:not(.active) ul {
-                max-height: 0
-            }
-            a:hover,
-            &.active > a {
-                color: var(--text-color);
-            }
-
-            &.active > a::before {
-                background-color: var(--secondary-text-color);
-            }
-        }
-    }
-}
-</style>
 <script>
 document.addEventListener('DOMContentLoaded', () => {
   const toc = document.getElementById('toc');