@xingwangzhe/stalux 1.21.3 → 1.21.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.21.3",
+    "version": "1.21.5",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",
@@ -84,7 +84,6 @@
         "@waline/client": "^3.15.2",
         "@xingwangzhe/satteri-mermaid": "0.7.3",
         "@xingwangzhe/satteri-photoswipe": "^0.2.2",
-        "@xingwangzhe/stalux": "1.21.0",
         "@xingwangzhe/tags-cloud": "^1.2.5",
         "animejs": "^4.5.0",
         "astro-expressive-code": "^0.44.1",

package/src/components/stalux/layout/navs.astro

@@ -140,17 +140,20 @@ const navs = navsConfig?.items ?? [];
         if (!navList || !btnLeft || !btnRight) return;
 
         function updateButtons() {
-            const maxScrollLeft = Math.max(0, navList.scrollWidth - navList.clientWidth);
-            const hasOverflow = maxScrollLeft > 4;
-            const scrollLeft = Math.min(Math.max(navList.scrollLeft, 0), maxScrollLeft);
-
-            if (navList.scrollLeft !== scrollLeft) {
-                navList.scrollLeft = scrollLeft;
-            }
-
-            navList.toggleAttribute("data-overflow", hasOverflow);
-            btnLeft.classList.toggle("visible", hasOverflow && scrollLeft > 4);
-            btnRight.classList.toggle("visible", hasOverflow && scrollLeft < maxScrollLeft - 4);
+            const navWidth = navList.clientWidth;
+            const itemCount = navList.children.length;
+            const baseFontSize = Number.parseFloat(getComputedStyle(navList).fontSize) || 16;
+            const minFontSize = 12;
+            const gap = Number.parseFloat(getComputedStyle(navList).gap) || 0;
+            const estimatedWidth = [...navList.children].reduce(
+                (total, item) => total + item.getBoundingClientRect().width,
+                0,
+            ) + gap * Math.max(0, itemCount - 1);
+            const scale = estimatedWidth > navWidth ? Math.max(minFontSize / baseFontSize, navWidth / estimatedWidth) : 1;
+            navList.style.setProperty("--nav-scale", String(scale));
+            navList.removeAttribute("data-overflow");
+            btnLeft.removeAttribute("data-visible");
+            btnRight.removeAttribute("data-visible");
         }
 
         btnLeft.addEventListener("click", () => {

package/src/pages/index.astro

@@ -19,10 +19,10 @@ import { getSiteData, getAuthorData, getHeadData, getNavsData, getLinksData, get
 
 <Stalux title={siteTitle} description={siteDescription} fontSubsetId="home">
   <div class={styles.homeBody}>
-    <h1 class={styles.homeTitle}>{siteTitle}</h1>
     <div class={styles.homeNavs}>
       <Navs />
     </div>
+    <h1 class={styles.homeTitle}>{siteTitle}</h1>
     <h2 class="sr-only" style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;">{t("ai.about")}</h2>
     <Author />
     <TextType />

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

@@ -1,4 +1,10 @@
 /* 导航容器 — 相对定位，为滚动按钮提供锚点 */
+nav {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+}
+
 .navContainer {
     position: relative;
     width: 100%;
@@ -13,30 +19,22 @@
     gap: 2rem;
     align-items: center;
     justify-content: center;
+    transform: scale(var(--nav-scale, 1));
+    transform-origin: center;
     min-width: 0;
     max-width: 100%;
     box-sizing: border-box;
     transition: transform 0.3s ease;
     /* 当导航项总宽度超过视口时允许横向滚动，防止右侧项被裁剪 */
-    overflow-x: auto;
-    scroll-behavior: smooth;
-    -webkit-overflow-scrolling: touch;
-    /* 隐藏滚动条但保留滚动功能 */
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-}
-
-.navList[data-overflow] {
-    justify-content: flex-start;
-    padding-inline: 44px;
-}
-
-.navList::-webkit-scrollbar {
-    display: none;
+    flex-wrap: wrap;
+    width: 100%;
+    overflow: visible;
+    justify-content: center;
 }
 
 /* 滚动按钮 — 仅当内容溢出时显示 */
 .scrollBtn {
+    display: none;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -49,7 +47,6 @@
     backdrop-filter: blur(8px);
     color: var(--white-full);
     cursor: pointer;
-    display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
@@ -63,7 +60,7 @@
     background: var(--black-50p);
 }
 
-.scrollBtn.visible {
+.scrollBtn[data-visible] {
     opacity: 1;
     pointer-events: auto;
 }
@@ -77,7 +74,7 @@
 }
 
 /* 导航容器 hover 时显示滚动按钮 */
-.navContainer:hover .scrollBtn.visible {
+.navContainer:hover .scrollBtn[data-visible] {
     opacity: 1;
 }
 
@@ -183,20 +180,16 @@
     }
 }
 
-/* 较窄屏幕：隐藏文字，只显示图标 */
+/* 中小屏幕：保留文字，通过横向滚动展示完整导航 */
 @media (max-width: 900px) {
-    .navText {
-        display: none;
-    }
-
     .navItem {
-        font-size: 1em;
-        margin-right: 0.5em;
-        margin-left: 0.5em;
+        font-size: 0.95em;
+        margin-right: 0.25em;
+        margin-left: 0.25em;
     }
 
     .navList {
-        gap: 0.75rem;
+        gap: 0.5rem;
     }
 }
 
@@ -204,12 +197,19 @@
 @media (max-width: 600px) {
     .navToggle {
         display: block;
+        position: fixed;
+        top: 0.75rem;
+        left: 0.75rem;
     }
 
     .navContainer {
         overflow: visible;
     }
 
+    nav {
+        width: auto;
+    }
+
     .navList {
         position: fixed;
         top: 0;

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

@@ -13,10 +13,21 @@
             display: inline-flex;
             align-items: center;
             justify-content: center;
+            text-align: center;
             border-radius: 50%;
             background-color: var(--white-15p);
             box-sizing: border-box;
             overflow: hidden;
         }
+        a,
+        .icon-container,
+        .custom-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            line-height: 1;
+        }
     }
 }

package/src/styles/pages/home.module.css

@@ -4,6 +4,7 @@
     align-items: center;
     min-height: 100vh;
     padding-bottom: var(--space-3xl);
+    position: relative;
 }
 
 .homeTitle {
@@ -16,6 +17,11 @@
 
 .homeNavs {
     display: flex;
+    width: 100%;
+    order: -1;
+    min-width: 0;
+    max-width: 100%;
+    justify-content: center;
 }
 
 #showPostList {
@@ -44,6 +50,10 @@
         align-items: center;
         gap: 0.5em;
     }
+
+    .homeNavs :global(nav) {
+        width: 100%;
+    }
     #showPostList {
         margin-top: 2em;
         font-size: 1.1em;