refactor: review the table of content display

src/blog_assets/css/index.scss

@@ -75,16 +75,21 @@ main {
   position: sticky;
   top: 1rem;
   align-self: flex-start;
-  width: 320px;
 }
 .left-side {
   padding-right: 60px;
+  min-width: 360px;
+  max-width: 360px;
+}
+.right-side {
+  min-width: 300px;
+  max-width: 300px;
 }
 
 .table-of-contents {
   background: var(--background-color-toc);
   border-radius: 5px;
-  padding: 0.7rem;
+  padding: 1.625rem 0.7rem;
 }
 
 .table-of-contents ul {
@@ -97,9 +102,7 @@ main {
   }
 
   li {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
+    line-height: 17px;
 
     a {
       font-weight: bold;
@@ -113,13 +116,23 @@ main {
   }
 }
 
+.table-of-contents > ul ul {
+  margin-top: 10px;
+}
+
 .table-of-contents > ul ul li {
-  margin-left: 0.7rem;
+  margin: 0 0 0 0.7rem;
+  line-height: 17px;
   a {
     font-weight: normal;
   }
 }
 
+.table-of-contents > ul ul li+li,
+.table-of-contents > ul ul li:first-child {
+  margin-bottom: .5rem;
+}
+
 .right-side {
   padding-left: 60px;
 }
@@ -293,7 +306,7 @@ figure figcaption {
   gap: 3rem;
 }
 .post-list-item {
-  max-width: 430px;
+  max-width: 410px;
   padding: 2rem;
   border-radius: 5px;
   box-shadow: 0 5px 10px rgba(0,0,0,0.3);