@xingwangzhe/stalux 1.28.5 → 1.29.0

package/src/styles/components/layout/navs.module.css

@@ -24,7 +24,7 @@ nav {
     min-width: 0;
     max-width: 100%;
     box-sizing: border-box;
-    transition: transform 0.3s ease;
+    transition: transform 220ms cubic-bezier(0.22, 0.72, 0.22, 1);
     /* 当导航项总宽度超过视口时允许横向滚动，防止右侧项被裁剪 */
     flex-wrap: wrap;
     width: 100%;
@@ -213,7 +213,8 @@ nav {
     .navList {
         position: fixed;
         top: 0;
-        right: 0;
+        left: 0;
+        right: auto;
         width: min(220px, calc(100vw - 1rem));
         height: 100vh;
         background: var(--black-20p);
@@ -223,7 +224,7 @@ nav {
         justify-content: flex-start;
         gap: 0;
         padding: 0.5rem 1rem 2rem 1rem;
-        transform: translateX(100%);
+        transform: translateX(-100%);
         z-index: 1000;
         overflow-y: auto;
         pointer-events: none;

package/src/styles/components/links/linkCard.module.css

@@ -3,7 +3,7 @@
 .card {
     display: flex;
     flex-direction: column;
-    background: var(--white-10p) !important;
+    background: var(--surface-glass);
     border-radius: 10px;
     padding: 16px;
     text-decoration: none;
@@ -12,16 +12,17 @@
     width: 180px;
     overflow: visible;
     transition:
-        transform var(--transition-normal) ease,
-        box-shadow var(--transition-normal) ease,
-        background var(--transition-normal) ease;
-    box-shadow: var(--shadow-md);
+        transform 220ms ease,
+        box-shadow 220ms ease,
+        background-color 220ms ease,
+        border-color 220ms ease;
+    box-shadow: var(--shadow-sidebar);
 }
 
 .card:hover {
-    transform: translateY(-6px);
+    transform: translateY(-3px);
     background: #ffffff26;
-    box-shadow: var(--shadow-xl);
+    box-shadow: var(--shadow-raised-hover);
 }
 
 .avatar {
@@ -38,13 +39,13 @@
     border: 2px solid var(--accent-60p);
     transform-origin: center;
     transition:
-        transform 0.8s ease,
-        box-shadow 0.3s ease,
-        border-color 0.3s ease;
+        transform 220ms ease,
+        box-shadow 220ms ease,
+        border-color 220ms ease;
 }
 
 .card:hover .avatar img {
-    transform: rotate(360deg) scale(1.1);
+    transform: rotate(5deg) scale(1.04);
     box-shadow: 0 0 20px var(--accent-50p);
     border-color: var(--accent-85p);
 }
@@ -59,7 +60,7 @@
 .title {
     font-size: 1.1rem;
     margin: 0 0 8px 0;
-    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(1, 162, 190, 0.9));
+    background: linear-gradient(90deg, var(--white-95p), var(--accent-90p));
     background-clip: text;
     -webkit-text-fill-color: transparent;
     white-space: nowrap;

package/src/styles/components/links/linkList.module.css

@@ -12,22 +12,9 @@
 }
 
 .item {
-    animation: fadeInUp 0.5s ease forwards;
-    opacity: 0;
     display: flex;
 }
 
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
 /* 大屏幕：5个卡片一行 */
 @media (min-width: 1400px) {
     .list {

package/src/styles/components/posts/postCard.module.css

@@ -8,6 +8,7 @@
 .postTitle {
     margin: 0;
     line-height: 1.35;
+    overflow-wrap: anywhere;
 }
 
 .postTitle a {
@@ -18,41 +19,38 @@
 .postDescription {
     color: var(--white-70p);
     line-height: 1.6;
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+.postContainer > a:first-child {
+    display: block;
+    width: 100%;
+    min-width: 0;
 }
 
 .postContainer {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
     background-color: var(--card-bg);
     border-radius: var(--radius-lg);
-    border: var(--border-thin) solid var(--card-border);
     box-shadow: var(--card-box-shadow);
     padding: var(--space-lg);
     transition:
-        transform var(--transition-fast) ease,
-        box-shadow var(--transition-fast) ease;
+        transform 220ms cubic-bezier(0.22, 0.72, 0.22, 1),
+        box-shadow 220ms ease;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     height: 100%;
     gap: var(--space-lg);
-    box-sizing: border-box;
-    opacity: 0;
-    animation: fadeInUp 0.6s ease-in-out forwards;
-}
-
-@keyframes fadeInUp {
-    from {
-        transform: translateY(12px);
-        opacity: 0;
-    }
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
 }
 
 /* 封面图片 */
 .postCover {
     width: 100%;
+    min-width: 0;
     height: 180px;
     border-radius: var(--radius-md);
     overflow: hidden;
@@ -62,6 +60,7 @@
 
 .postCover img {
     width: 100%;
+    max-width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform var(--transition-fast) ease;
@@ -82,13 +81,12 @@
 /* 卡片悬停和焦点效果 */
 .postContainer {
     transition:
-        transform var(--transition-fast) ease,
-        box-shadow var(--transition-fast) ease,
-        opacity var(--transition-fast) ease;
+        transform 220ms cubic-bezier(0.22, 0.72, 0.22, 1),
+        box-shadow 220ms ease;
 }
 .postContainer:hover,
 .postContainer:focus-within {
-    transform: translateY(-6px);
+    transform: translateY(-3px);
     box-shadow: var(--card-box-shadow-hover);
 }
 

package/src/styles/components/posts/postContent.module.css

@@ -10,19 +10,18 @@
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    background: var(--black-10p);
-    border-radius: var(--radius-lg);
-    padding: var(--space-xl);
-    box-shadow: var(--shadow-sidebar);
-    transition: all var(--transition-normal) ease;
+    background: var(--surface-glass);
+    border-radius: 18px;
+    padding: clamp(1.25rem, 3vw, 2.5rem);
+    box-shadow: var(--surface-glass-shadow);
 }
 
 /* 文章标题 */
 .articleHeader {
     margin-bottom: 3rem;
     padding-bottom: 2rem;
-    animation: fadeInUp 0.6s ease forwards;
-    opacity: 0;
+    border-bottom: 1px solid var(--white-10p);
+    animation: contentReveal 220ms ease 360ms both;
 }
 
 .title {
@@ -96,14 +95,13 @@
 /* 文章身体 */
 .body {
     flex: 1;
-    animation: fadeInUp 0.6s ease 0.1s forwards;
-    opacity: 0;
     /* 限制 Markdown 内容最大宽度，居中显示，避免侵占左右侧栏 */
     width: min(900px, 100%);
     max-width: 100%;
     margin: 0 auto;
     box-sizing: border-box;
     padding: 0 1rem 2rem;
+    animation: contentReveal 220ms ease 360ms both;
 }
 
 /* “查看 Markdown 原文”按钮 */
@@ -154,8 +152,16 @@
     margin-top: 3rem;
     padding-top: 2rem;
     border-top: 1px solid var(--white-10p);
-    animation: fadeInUp 0.6s ease 0.2s forwards;
-    opacity: 0;
+    animation: contentReveal 220ms ease 360ms both;
+}
+
+@keyframes contentReveal {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 .footerContent {
@@ -182,6 +188,8 @@
         width: 100%;
         padding: 0;
         box-sizing: border-box;
+        background: transparent;
+        box-shadow: none;
     }
 
     .body {

package/src/styles/components/posts/postLayout.module.css

@@ -10,9 +10,9 @@
 .container {
     flex: 1;
     display: grid;
-    grid-template-columns: 280px 1fr 280px;
-    gap: 4rem;
-    max-width: 100%;
+    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr) minmax(220px, 250px);
+    gap: clamp(1.5rem, 3vw, 3.5rem);
+    max-width: 1680px;
     margin: 0 auto;
     padding: 1.5rem 1rem;
     width: 100%;
@@ -42,8 +42,8 @@
 /* 大屏幕 */
 @media (min-width: 1600px) {
     .container {
-        grid-template-columns: 300px 1fr 300px;
-        gap: 4.5rem;
+        grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(240px, 280px);
+        gap: 4rem;
         padding: 2rem 1.5rem;
     }
 }

package/src/styles/components/posts/postList.module.css

@@ -18,7 +18,8 @@
     }
 
     ul > li {
-        flex: 1 1 22rem; /* 最小宽度 22rem，自动填充每行 */
+        flex: 1 1 min(22rem, 100%);
+        min-width: 0;
         margin: 0;
     }
 }

package/src/styles/components/posts/postNavigation.module.css

@@ -29,8 +29,7 @@
         transform var(--transition-normal),
         box-shadow var(--transition-normal),
         color var(--transition-normal);
-    border: var(--border-thin) solid var(--white-20p);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    box-shadow: var(--shadow-sidebar);
     flex: 1 1 0;
     min-width: 0;
     position: relative;
@@ -53,7 +52,7 @@
 
 .postNavLink:hover {
     transform: translateY(-3px);
-    box-shadow: 0 8px 16px var(--shadow-dark);
+    box-shadow: var(--shadow-raised-hover);
 }
 
 .postNavLink:hover::before {

package/src/styles/components/posts/postSidebar.module.css

@@ -30,11 +30,13 @@
 .sidebarContainer {
     display: flex;
     flex-direction: column;
-    background: var(--black-10p);
-    border-radius: var(--radius-lg);
+    background: var(--surface-glass);
+    border-radius: 14px;
     padding: var(--space-md);
-    box-shadow: var(--shadow-sidebar);
-    transition: all var(--transition-normal) ease;
+    box-shadow: var(--surface-glass-shadow);
+    transition:
+        box-shadow 220ms ease,
+        background-color 220ms ease;
 }
 
 @media (max-width: 1400px) {

package/src/styles/components/posts/waline.css

@@ -1,5 +1,5 @@
 :root {
-    --waline-accent-rgb: 100, 255, 218;
+    --waline-accent-rgb: var(--stalux-accent-rgb);
 }
 
 /* 评论区容器与博客风格一致 */
@@ -8,9 +8,8 @@
     margin-bottom: 1rem;
     padding: 2rem;
     border-radius: 12px;
-    animation: fadeInUpComment 0.8s ease-in-out forwards;
-    opacity: 0;
-    animation-delay: 0.3s;
+    animation: fadeInUpComment 0.35s ease-out both;
+    animation-delay: 0.08s;
 }
 
 /* 评论区标题样式与博客风格一致 */

package/src/styles/components/words/wordCard.module.css

@@ -1,9 +1,10 @@
 .card {
     width: 100%;
-    background: var(--white-10p);
+    box-sizing: border-box;
+    background: var(--surface-glass);
     border-radius: var(--radius-lg, 12px);
     padding: 1.5rem;
-    box-shadow: var(--shadow-md);
+    box-shadow: var(--shadow-sidebar);
     transition:
         transform var(--transition-normal) ease,
         box-shadow var(--transition-normal) ease;
@@ -12,9 +13,14 @@
     gap: 0.75rem;
 }
 
+.body :global(.expressive-code) {
+    max-width: 100%;
+    overflow-x: auto;
+}
+
 .card:hover {
     transform: translateY(-4px);
-    box-shadow: var(--shadow-xl);
+    box-shadow: var(--shadow-raised-hover);
 }
 
 /* 被 hash 定位的卡片 — 主题光晕 */

package/src/styles/components/words/wordList.module.css

@@ -12,19 +12,6 @@
     width: 100%;
     max-width: 900px;
     display: flex;
-    animation: fadeInUp 0.5s ease forwards;
-    opacity: 0;
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
 }
 
 @media (max-width: 768px) {