fix: toc tree and read indicator pos

Author: Innei

src/components/common/404.tsx

@@ -7,20 +7,6 @@ export const NotFound404 = () => {
       </div>
 
       <p>你来到了没有知识的荒原</p>
-      <style global jsx>
-        {`
-          .hit-the-floor {
-            font-size: 12em;
-            font-weight: bold;
-            font-family: Helvetica;
-            text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,
-              0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1),
-              0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3),
-              0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25),
-              0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
-          }
-        `}
-      </style>
     </>
   )
 }

src/components/widgets/shared/ArticleRightAside.tsx

@@ -64,7 +64,7 @@ const ArticleRightAsideImpl: Component = ({ children }) => {
           as="div"
           className="static ml-4"
           treeClassName={clsx(
-            'absolute h-full min-h-[120px] overflow-auto',
+            'absolute h-full min-h-[120px] flex flex-col',
             isScrollToBottom && 'mask-t',
             isScrollToTop && 'mask-b',
             canScroll && !isScrollToBottom && !isScrollToTop && 'mask-both',

src/components/widgets/toc/TocItem.tsx

@@ -63,7 +63,7 @@ export const TocItem: FC<{
       style={useMemo(
         () => ({
           paddingLeft:
-            depth >= rootDepth ? `${renderDepth * 0.6}rem` : undefined,
+            depth >= rootDepth ? `${renderDepth * 0.6 + 0.5}rem` : '0.5rem',
         }),
         [depth, renderDepth, rootDepth],
       )}

src/components/widgets/toc/TocTree.tsx

@@ -126,20 +126,28 @@ export const TocTree: Component<
       : React.createElement(accessory as FC)
   }, [accessory])
   return (
-    <ul className={clsxm('px-2 scrollbar-none', className)} ref={containerRef}>
-      {toc?.map((heading) => {
-        return (
-          <MemoedItem
-            heading={heading}
-            isActive={heading.anchorId === activeId}
-            key={heading.title}
-            rootDepth={rootDepth}
-            onClick={handleScrollTo}
-          />
-        )
-      })}
+    <ul
+      className={clsxm(
+        'flex flex-grow flex-col px-2 scrollbar-none',
+        className,
+      )}
+      ref={containerRef}
+    >
+      <ul className="overflow-auto scrollbar-none">
+        {toc?.map((heading) => {
+          return (
+            <MemoedItem
+              heading={heading}
+              isActive={heading.anchorId === activeId}
+              key={heading.title}
+              rootDepth={rootDepth}
+              onClick={handleScrollTo}
+            />
+          )
+        })}
+      </ul>
       {accessoryElement && (
-        <li>
+        <li className="flex-shrink-0">
           {!!toc.length && <Divider />}
           {accessoryElement}
         </li>
@@ -177,7 +185,7 @@ const MemoedItem = memo<{
         <m.span
           layoutId="active-toc-item"
           layout
-          className="absolute -left-2 bottom-[3px] top-[3px] w-[2px] rounded-sm bg-accent"
+          className="absolute bottom-[3px] left-0 top-[3px] w-[2px] rounded-sm bg-accent"
         />
       )}
       <TocItem

src/styles/theme.css

@@ -120,6 +120,26 @@
       opacity: 0;
     }
   }
+
+  /* 404 */
+  .hit-the-floor {
+    font-size: 12em;
+    font-weight: bold;
+    font-family: Helvetica;
+    text-shadow:
+      0 1px 0 #ccc,
+      0 2px 0 #c9c9c9,
+      0 3px 0 #bbb,
+      0 4px 0 #b9b9b9,
+      0 5px 0 #aaa,
+      0 6px 1px rgba(0, 0, 0, 0.1),
+      0 0 5px rgba(0, 0, 0, 0.1),
+      0 1px 3px rgba(0, 0, 0, 0.3),
+      0 3px 5px rgba(0, 0, 0, 0.2),
+      0 5px 10px rgba(0, 0, 0, 0.25),
+      0 10px 10px rgba(0, 0, 0, 0.2),
+      0 20px 20px rgba(0, 0, 0, 0.15);
+  }
 }
 
 .mask-both {