refactor: move toc css to content.css

1 files changed, 7 insertions, 75 deletions

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');