From 38c6090edc2d083fbd445ea51949943251895257 Mon Sep 17 00:00:00 2001
From: ClovertaTheTrilobita <cloverta@petalmail.com>
Date: Sat, 11 Apr 2026 20:46:53 +0300
Subject: [PATCH] update homepage update progress bar

---
 src/components/Posts/PostItem.astro  | 15 ++++++++++-
 src/layouts/BaseLayout.astro         | 10 +++----
 src/layouts/MarkdownPostLayout.astro | 39 ++++++++++++++++++++++++----
 3 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/src/components/Posts/PostItem.astro b/src/components/Posts/PostItem.astro
index bc20998..cc3e3c9 100644
--- a/src/components/Posts/PostItem.astro
+++ b/src/components/Posts/PostItem.astro
@@ -31,6 +31,8 @@ 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 {
@@ -53,7 +55,18 @@ const data = Astro.props;
   }
 
   .post-title {
-    font-family: "Maple Mono", "Maple Mono CN";
+    font-family:
+      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;
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index fc236b7..2d150f3 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -95,11 +95,11 @@ const {
 	#back-to-top {
 		width: 3rem;
 		height: 3rem;
-		border: #a7a7a7 2px solid;
+		border: #a7a7a7 1.5px 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(10px);
+		transform: translateY(150px);
 		transition:
 			opacity 0.2s ease,
-			transform 0.2s ease,
+			transform 0.27s ease,
 			visibility 0.2s ease;
 	}
 
diff --git a/src/layouts/MarkdownPostLayout.astro b/src/layouts/MarkdownPostLayout.astro
index fbe9d39..8f19ebb 100644
--- a/src/layouts/MarkdownPostLayout.astro
+++ b/src/layouts/MarkdownPostLayout.astro
@@ -14,6 +14,7 @@ const t = getTranslations(lang);
   description={frontmatter.description}
   image={frontmatter.image?.url}
 >
+<div id="reading-progress" aria-hidden="true"></div>
   <a
     href="/"
     class="back-button"
@@ -130,11 +131,39 @@ 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;
@@ -146,18 +175,18 @@ const t = getTranslations(lang);
     align-items: center;
     justify-content: center;
     text-decoration: none;
-    border: #285ee9 2px solid;
+    border: #285ee9 1.5px 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(10px);
-    opacity: 0;
+    transform: translateY(-80px);
+    /* opacity: 0; */
     transition:
       opacity 0.2s ease,
-			transform 0.2s ease,
+			transform 0.27s ease,
 			visibility 0.2s ease;
       box-shadow 0.2s ease,
       background 0.2s ease,