src/components/Posts/PostItem.astro

@@ -31,8 +31,6 @@ const data = Astro.props;
     list-style: none;
     margin: 0 0 1rem 0;
     padding-left: 0;
-    padding-bottom: 1.7rem;
-    padding-top: 1.7rem;
   }
 
   .post-link {
@@ -55,18 +53,7 @@ const data = Astro.props;
   }
 
   .post-title {
-    font-family:
+    font-family: "Maple Mono", "Maple Mono CN";
-      sans-serif,
-      system-ui,
-      -apple-system,
-      BlinkMacSystemFont,
-      "Segoe UI",
-      Roboto,
-      Oxygen,
-      Ubuntu,
-      Cantarell,
-      "Open Sans",
-      "Helvetica Neue";
     color: inherit;
     font-weight: 700;
     font-size: 1.34rem;

src/friends/example.md

@@ -2,5 +2,5 @@
 name: 'CLovertaTheTrilobita'
 description: "This is Cloverta's blog"
 url: "https://blog.cloverta.top"
-avatar: '/images/marisa.png' 
+avatar: '/images/marisa.png'
 ---

src/layouts/BaseLayout.astro

@@ -95,11 +95,11 @@ const {
 	#back-to-top {
 		width: 3rem;
 		height: 3rem;
-		border: #a7a7a7 1.5px solid;
+		border: #a7a7a7 2px solid;
 		border-radius: 999px;
 		background: rgba(255, 255, 255, 0.92);
 		color: #222;
-		/* box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); */
+		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
 		cursor: pointer;
 		display: flex;
 		align-items: center;
@@ -151,12 +151,12 @@ const {
 
 	#theme-toggle-fab,
 	#back-to-top {
-		/* opacity: 0; */
+		opacity: 0;
 		visibility: hidden;
-		transform: translateY(150px);
+		transform: translateY(10px);
 		transition:
 			opacity 0.2s ease,
-			transform 0.27s ease,
+			transform 0.2s ease,
 			visibility 0.2s ease;
 	}
 

src/layouts/MarkdownPostLayout.astro

@@ -14,7 +14,6 @@ const t = getTranslations(lang);
   description={frontmatter.description}
   image={frontmatter.image?.url}
 >
-<div id="reading-progress" aria-hidden="true"></div>
   <a
     href="/"
     class="back-button"
@@ -131,39 +130,11 @@ const t = getTranslations(lang);
       backButton.dataset.bound = "true";
     }
   };
-    const updateProgress = () => {
-    const doc = document.documentElement;
-    const scrollTop = window.scrollY || doc.scrollTop;
-    const scrollHeight = doc.scrollHeight - window.innerHeight;
-
-    const progress = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
-
-    const bar = document.getElementById("reading-progress");
-    if (bar) {
-      bar.style.width = `${Math.min(progress, 100)}%`;
-    }
-  };
-
-  updateProgress();
-  window.addEventListener("scroll", updateProgress, { passive: true });
-  window.addEventListener("resize", updateProgress);
   initFloatingActions();
   document.addEventListener("astro:page-load", initFloatingActions);
 </script>
 
 <style>
-    #reading-progress {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 9999;
-    width: 0;
-    height: 3px;
-    background: #5a89ff;
-    transition: width 0.08s linear;
-    pointer-events: none;
-  }
-
   .back-button {
     position: fixed;
     top: 1.25rem;
@@ -175,18 +146,18 @@ const t = getTranslations(lang);
     align-items: center;
     justify-content: center;
     text-decoration: none;
-    border: #285ee9 1.5px solid;
+    border: #285ee9 2px solid;
     background: rgba(255, 255, 255, 0.92);
     color: #222;
-    /* box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); */
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
     backdrop-filter: blur(6px);
     z-index: 1000;
     visibility: hidden;
-    transform: translateY(-80px);
+    transform: translateY(10px);
-    /* opacity: 0; */
+    opacity: 0;
     transition:
       opacity 0.2s ease,
-			transform 0.27s ease,
+			transform 0.2s ease,
 			visibility 0.2s ease;
       box-shadow 0.2s ease,
       background 0.2s ease,