diff --git a/src/components/TocWrapper.astro b/src/components/TocWrapper.astro
index 9f7c9a0..83706fb 100644
--- a/src/components/TocWrapper.astro
+++ b/src/components/TocWrapper.astro
@@ -17,12 +17,16 @@ const minDepth = Math.min(...headings.map((heading) => heading.depth));
- Table of contents
+
Table of contents
{headings.map((heading) => {
return (
- -
- {heading.text}
+
-
+
+
+ {heading.text}
+
+
);
})}
@@ -35,8 +39,86 @@ const minDepth = Math.min(...headings.map((heading) => heading.depth));
)
}
-
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 209cb84..a1b6fd4 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -80,7 +80,7 @@ const datestamp = post.data.date.toLocaleDateString(undefined, {
)
}
-
diff --git a/src/styles/post.scss b/src/styles/post.scss
index b6b3ecd..585869b 100644
--- a/src/styles/post.scss
+++ b/src/styles/post.scss
@@ -3,6 +3,7 @@
.post-title {
font-size: 2rem;
font-weight: 600;
+ margin-top: 20px;
margin-bottom: 12px;
}
diff --git a/src/styles/toc.scss b/src/styles/toc.scss
index c1c7197..adc2693 100644
--- a/src/styles/toc.scss
+++ b/src/styles/toc.scss
@@ -5,6 +5,10 @@ $tocBreakpoint: variables.$breakpoint + $tocWidth;
.toc-wrapper {
position: relative;
display: flex;
+
+ .title {
+ margin-top: 20px;
+ }
}
.toc {
@@ -16,7 +20,35 @@ $tocBreakpoint: variables.$breakpoint + $tocWidth;
li {
font-size: 14px;
- margin: 6px;
+ display: block;
+
+ &:hover {
+ // background-color: var(--link-hover-color);
+ }
+
+ a {
+ display: block;
+ padding: 10px;
+ color: var(--text-color);
+ border-left: 4px solid transparent;
+ border-radius: unset;
+
+ &:hover {
+ background-color: unset;
+ border-left-color: var(--link-color);
+ color: var(--link-color);
+ }
+ }
+
+ &.active {
+ &:first {
+ border: 1px solid orange;
+ }
+
+ a {
+ background-color: var(--link-hover-color);
+ }
+ }
}
}
}