diff --git a/src/components/TocWrapper.astro b/src/components/TocWrapper.astro
new file mode 100644
index 0000000..fa292c0
--- /dev/null
+++ b/src/components/TocWrapper.astro
@@ -0,0 +1,41 @@
+---
+import type { MarkdownHeading } from "astro";
+import "../styles/toc.scss";
+
+interface Props {
+ toc: boolean;
+ headings: MarkdownHeading[];
+}
+
+const { toc, headings } = Astro.props;
+---
+
+{
+ toc ? (
+ <>
+
-
{post.data.title}
+
+
+
{post.data.title}
+
+
+ {
+ post.data.draft && (
+
+
+ draft
+
+ )
+ }
+
+ {
+ post.data.tags.map((tag) => (
+
+
+ {tag}
+
+ ))
+ }
+
+
+
+ Posted on
+ - {remarkPluginFrontmatter.minutesRead}
+
-
{
- post.data.draft && (
-
-
- draft
-
+ heroImage && heroAlt && (
+
)
}
- {
- post.data.tags.map((tag) => (
-
-
- {tag}
-
- ))
- }
-
-
-
- Posted on
- - {remarkPluginFrontmatter.minutesRead}
-
-
- {
- heroImage && heroAlt && (
-
- )
- }
-
-
-
-
-
+
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 5b59432..5d63daa 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -12,7 +12,6 @@ body {
background-color: var(--background-color);
color: var(--text-color);
- max-width: 1024px;
margin: auto;
width: 100%;
height: 1px;
@@ -94,12 +93,13 @@ pre > code {
display: flex;
flex-direction: row;
align-items: stretch;
+ justify-content: center;
}
.flex-wrapper > main {
min-width: 0;
box-sizing: border-box;
- padding: 20px;
+ // padding: 20px;
}
@media screen and (max-width: variables.$breakpoint) {
@@ -120,6 +120,6 @@ pre > code {
}
.flex-wrapper > main {
- padding-left: 30px;
+ // padding-left: 30px;
}
}
diff --git a/src/styles/post.scss b/src/styles/post.scss
index c715fbe..19e7f6b 100644
--- a/src/styles/post.scss
+++ b/src/styles/post.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
.post-title {
font-size: 2rem;
font-weight: 600;
@@ -20,7 +22,9 @@
}
.post-container {
+ max-width: 720px;
display: flex;
+ padding: 20px;
flex-direction: column;
.toc-drawer {
@@ -175,6 +179,12 @@
}
}
+@media screen and (min-width: variables.$breakpoint) {
+ .post-container {
+ padding-left: 30px;
+ }
+}
+
.division .post-content,
.post-content {
.heading {
@@ -210,6 +220,7 @@ hr.endline {
display: flex;
gap: 6px;
margin-bottom: 6px;
+ flex-wrap: wrap;
.tag {
font-size: 0.75rem;
diff --git a/src/styles/toc.scss b/src/styles/toc.scss
new file mode 100644
index 0000000..3e8fbde
--- /dev/null
+++ b/src/styles/toc.scss
@@ -0,0 +1,44 @@
+@use "variables";
+$tocWidth: 180px;
+$tocBreakpoint: variables.$breakpoint + $tocWidth;
+
+.toc-wrapper {
+ position: relative;
+ display: flex;
+}
+
+.toc {
+ height: 100vh;
+
+ ul {
+ list-style-type: none;
+ padding-inline-start: 0;
+
+ li {
+ font-size: 14px;
+ }
+ }
+}
+
+@media screen and (max-width: $tocBreakpoint) {
+ .toc {
+ display: none;
+ }
+}
+
+@media screen and (min-width: $tocBreakpoint) {
+ .article {
+ flex-grow: 1;
+ }
+
+ .toc {
+ flex: 0 0 $tocWidth;
+ max-width: $tocWidth;
+
+ position: sticky;
+ top: 0;
+ padding: 20px;
+
+ overflow-y: auto;
+ }
+}