Added toc to the side

assets/css/common/post-single.css

@@ -260,18 +260,34 @@
 .toc {
     margin: 0 2px 40px 2px;
     border: 1px solid var(--border);
-    background: var(--code-bg);
+    background: var(--entry);
     border-radius: var(--radius);
     padding: 0.4em;
 }
 
-.dark .toc {
-    background: var(--entry);
+.toc-container.wide {
+    position: absolute;
+    height: 100%;
+    border-right: 1px solid var(--border);
+    left: calc((var(--toc-width) + var(--gap)) * -1);
+    top: calc(var(--gap) * 2);
+    width: var(--toc-width);
+}
+
+.wide .toc {
+    position: sticky;
+    top: var(--gap);
+    border: unset;
+    background: unset;
+    border-radius: unset;
+    width: 100%;
+    margin: 0 2px 40px 2px;
 }
 
 .toc details summary {
     cursor: zoom-in;
     margin-inline-start: 20px;
+    padding: 12px 0;
 }
 
 .toc details[open] summary {
@@ -283,13 +299,27 @@
     font-weight: 500;
 }
 
+.toc-container.wide .toc .inner {
+    margin: 0;
+}
+
+.active {
+    font-weight: 500;
+}
+
+.toc ul {
+    list-style-type: circle;
+}
+
 .toc .inner {
-    margin: 0 20px;
-    padding: 10px 20px;
+    margin: 0 0 0 20px;
+    padding: 0px 15px 15px 20px;
+    font-size: 16px;
 }
 
 .toc li ul {
-    margin-inline-start: var(--gap);
+    margin-inline-start: calc(var(--gap) * 0.5);
+    list-style-type: none;
 }
 
 .toc summary:focus {
@@ -311,7 +341,6 @@
 .paginav {
     border-radius: var(--radius);
     background: var(--code-bg);
-    border: 1px solid var(--border);
 }
 
 .post-tags a {
@@ -321,11 +350,10 @@
     color: var(--secondary);
     font-size: 14px;
     line-height: 34px;
-    background: var(--code-bg);
+    background: var(--tertiary);
 }
 
-.post-tags a:hover,
-.paginav a:hover {
+.post-tags a:hover {
     background: var(--border);
 }
 
@@ -427,4 +455,4 @@ h6:hover .anchor {
 
 [dir="rtl"] .paginav .next {
     text-align: left;
-}
+}

assets/css/core/theme-vars.css

@@ -3,6 +3,7 @@
     --content-gap: 20px;
     --nav-width: 1024px;
     --main-width: 720px;
+    --toc-width: 300px;
     --header-height: 60px;
     --footer-height: 60px;
     --radius: 8px;