feat: 优化样式布局与字体配置

src/app.css

@@ -1,4 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Open+Sans:wght@400;600;700&display=swap');
 
 :root {
   --bg-color: #ffffff;
@@ -13,7 +12,7 @@
 
   --accent-color: #bd6262;
   
-  --font-sans: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'Segoe UI Emoji', 'Segoe UI Symbol', Helvetica, Arial, -apple-system, system-ui, sans-serif;
+  --font-sans: 'Open Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'Segoe UI Emoji', 'Segoe UI Symbol', Helvetica, Arial, -apple-system, system-ui, sans-serif;
   --font-serif: 'Noto Serif SC', var(--font-sans);
   
   --layout-width: 860px;
@@ -36,7 +35,6 @@ body {
   background-color: var(--bg-color);
   color: var(--text-color);
   line-height: 1.8;
-  -webkit-font-smoothing: antialiased;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -70,7 +68,7 @@ a:hover {
   top: 0;
   left: 0;
   width: 100%;
-  height: 60px;
+  height: 58px;
   background-color: var(--header-bg);
   color: var(--header-text);
   z-index: 1000;
@@ -85,12 +83,16 @@ a:hover {
   }
 }
 
+.header.scrolled {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
+}
+
 .header .container {
   display: flex;
   justify-content: center; /* Center the navigation */
   align-items: center;
   height: 100%;
-  max-width: var(--layout-width);
+  max-width: 100%;
   margin: 0 auto;
   padding: 0 20px;
   position: relative;
@@ -117,8 +119,8 @@ a:hover {
   align-items: center;
   justify-content: center;
   color: var(--header-text);
-  font-size: 0.95rem;
+  font-size: 1rem;
-  padding: 0 1rem;
+  padding: 0.3rem 0.55rem;
   height: 100%;
   transition: 0.3s;
 }
@@ -193,6 +195,10 @@ body.single-col .post-list {
   }
 }
 
+.card-link {
+  display: block;
+}
+
 .card {
   padding-bottom: 30px;
   background-color: transparent;
@@ -213,7 +219,7 @@ body.single-col .post-list {
     border-bottom: 2px solid var(--text-color);
     transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) border-color;
   }
-  .card:hover {
+  .card-link:hover .card {
     border-color: var(--accent-color);
   }
 }
@@ -230,7 +236,7 @@ body.single-col .post-list {
   .card .title {
     font-size: 1.85rem;
   }
-  .card:hover .title {
+  .card-link:hover .title {
     color: var(--accent-color) !important;
   }
 }
@@ -239,21 +245,27 @@ body.single-col .post-list {
   color: rgba(0, 0, 0, 0.125);
   font-size: 14px;
   font-weight: bold;
-  font-family: var(--font-sans);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   text-transform: uppercase;
   margin-bottom: 3px;
 }
 
-.card .headline {
+.card .excerpt {
-  color: #999999;
-  font-size: 20px;
-  font-weight: 300;
-  line-height: 1.3;
   margin-top: 0.6rem;
   margin-bottom: 0;
   flex-grow: 1;
 }
 
+.card .full-link {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  transition: 0.3s;
+}
+
+.card-link:hover .full-link {
+  border-bottom-color: var(--accent-color);
+  color: var(--accent-color);
+}
+
 /* Article Detail */
 .article-detail {
   padding: 2rem 0 4rem 0;
@@ -743,12 +755,11 @@ footer {
 /* Floating Controllers */
 #ctrler-panel {
   position: fixed;
-  right: 20px;
+  right: 1.5rem;
-  bottom: 20px;
+  bottom: 1.5rem;
   z-index: 100;
   display: flex;
   flex-direction: column;
-  gap: 10px;
 }
 
 .ctrler-item a {
@@ -759,8 +770,6 @@ footer {
   height: 40px;
   background-color: var(--header-bg);
   color: #fff;
-  border-radius: 50%;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
   transition: 0.3s;
 }
 
@@ -925,13 +934,11 @@ footer {
 /* 展开/关闭按钮 */
 #toggle-toc {
     position: fixed;
-    right: 20px;
+    right: 1.5rem;
-    bottom: 70px;
+    bottom: calc(1.5rem + 40px); /* Exactly above the go-top button */
     width: 40px;
     height: 40px;
     background-color: var(--header-bg);
-    border-radius: 50%;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
     display: flex;
     justify-content: center;
     align-items: center;

src/app.html

@@ -4,6 +4,9 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="text-scale" content="scale" />
+		<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel="stylesheet">
+		<link id="stylesheet_noto" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:300,400,700&display=swap&subset=chinese-simplified" rel="stylesheet">
+		<link href="https://fonts.googleapis.com/css?family=Fira+Code&display=swap" rel="stylesheet">
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">