refactor: review the table of content appearance

src/blog_assets/css/index.scss

@@ -15,6 +15,7 @@
   --color-green-2: #57c183;
 
   --background-color: #fff;
+  --background-color-toc: #F2F7F6;
 
   --text-color: rgba(0,0,10,.8);
   --text-color-sub: rgba(0,0,10,.55);;
@@ -22,6 +23,7 @@
   --text-color-tertiary: var(--color-green-2);
   --text-color-link: var(--color-green-1);
   --text-color-link-active: var(--color-green-1);
+  --text-color-toc: #1C4852;
 }
 
 /*@media (prefers-color-scheme: dark) {*/
@@ -80,9 +82,9 @@ main {
 }
 
 .table-of-contents {
-  background: var(--color-gray-20);
+  background: var(--background-color-toc);
   border-radius: 5px;
-  padding: 15px 5px;
+  padding: 0.7rem;
 }
 
 .table-of-contents ul {
@@ -90,6 +92,10 @@ main {
   margin: 0;
   padding: 0;
 
+  li ul {
+    margin-bottom: 1rem;
+  }
+
   li {
     text-overflow: ellipsis;
     overflow: hidden;
@@ -97,9 +103,8 @@ main {
 
     a {
       font-weight: bold;
-      font-size: 0.8125rem;
-      margin: 5px;
-      color: var(--text-color);
+      font-size: 0.875rem;
+      color: var(--text-color-toc);
       text-decoration: none;
       &:hover {
         text-decoration: underline;
@@ -109,6 +114,7 @@ main {
 }
 
 .table-of-contents > ul ul li {
+  margin-left: 0.7rem;
   a {
     font-weight: normal;
   }
@@ -251,7 +257,7 @@ figure img {
 
 figure figcaption {
   margin-top: 6px;
-  font-size: 0.8125rem; /* 13px /16 */
+  font-size: 0.875rem;
   color: var(--text-color-sub);
 }
 
@@ -326,7 +332,7 @@ figure figcaption {
 }
 .post-tag a {
   color: var(--text-color);
-  font-size: 0.8125rem; /* 13px /16 */
+  font-size: 0.875rem;
   font-weight: 700;
   text-decoration: none;
 }
@@ -336,7 +342,7 @@ figure figcaption {
   display: flex;
   flex-direction: column;
   gap: .5em;
-  font-size: 0.8125rem; /* 13px /16 */
+  font-size: 0.875rem;
   color: var(--text-color-sub);
 }
 
@@ -350,7 +356,7 @@ h1 + .post-metadata {
 
 .post-metadata .post-metadata__header {
   flex-grow: 1;
-  font-size: 0.8125rem; /* 13px /16 */
+  font-size: 0.875rem;
   color: var(--text-color-sub);
 }
 .post-nav ul {