✨ on this page added

yuancong-liu · Dec 6, 2023 · cc98758 · cc98758 · vercel · Dec 6, 2023
1 parent af43acc
commit cc98758
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/src/components/pages/blog/postContent/index.css b/src/components/pages/blog/postContent/index.css
@@ -4,7 +4,7 @@
 
 .toc-wrapper {
   position: sticky;
-  top: 40px;
+  top: 60px;
   z-index: 200;
   display: flex;
   flex-shrink: 0;
@@ -19,7 +19,8 @@
   }
 
   @media (width <= 768px) {
-    width: 250px;
+    top: 50px;
+    width: 100%;
     height: 0;
     visibility: hidden;
     opacity: 0;
@@ -105,7 +106,7 @@
     &::after {
       position: absolute;
       right: 0;
-      bottom: -80px;
+      bottom: -60px;
       z-index: -1;
       font-size: 4rem;
       font-weight: 600;

diff --git a/src/components/pages/blog/postContent/index.module.scss b/src/components/pages/blog/postContent/index.module.scss
@@ -17,6 +17,7 @@
   @include sp() {
     flex-direction: column;
     gap: 0;
+    margin-top: 0;
   }
 
   h2 {
@@ -192,15 +193,25 @@
   }
 }
 
-.toc-button {
+.toc-back-wrapper {
   position: sticky;
   top: 0;
   z-index: 200;
-  padding: 0;
-  font-weight: 600;
-  color: utils.$color-pink;
+  display: flex;
+  flex-direction: row-reverse;
+  padding: 10px 30px;
+  margin: 0 -30px; // this is disgusting 😢
+  background: utils.$color-navy-bd;
+  backdrop-filter: blur(10px);
 
   @include pc() {
     display: none;
   }
 }
+
+.toc-button {
+  padding: 0;
+  font-weight: 600;
+  color: utils.$color-pink;
+
+}
diff --git a/src/components/pages/blog/postContent/index.tsx b/src/components/pages/blog/postContent/index.tsx
@@ -41,9 +41,11 @@ export const PostContent = ({ content }: Props) => {
 
   return (
     <>
-      <button className={styles['toc-button']} onClick={toggleToc}>
-        TOC
-      </button>
+      <div className={styles['toc-back-wrapper']}>
+        <button className={styles['toc-button']} onClick={toggleToc}>
+          On this page
+        </button>
+      </div>
       {contentMemo}
     </>
   );