@xingwangzhe/stalux 1.21.2 → 1.21.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.21.2",
+    "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

@@ -15,7 +15,7 @@ const { t } = createTranslator(siteConfig.lang || "zh-CN");
 const navs = navsConfig?.items ?? [];
 ---
 
-<nav aria-label="Main navigation" transition:persist-props>
+<nav aria-label={t("nav.main")} transition:persist-props>
     <!-- 汉堡菜单按钮 (仅窄屏显示) -->
     <button
         data-ref="stalux-nav-toggle"
@@ -140,17 +140,20 @@ const navs = navsConfig?.items ?? [];
         if (!navList || !btnLeft || !btnRight) return;
 
         function updateButtons() {
-            const hasOverflow = navList.scrollWidth > navList.clientWidth;
-            const atStart = navList.scrollLeft <= 4;
-            const atEnd = navList.scrollLeft >= navList.scrollWidth - navList.clientWidth - 4;
-
-            if (hasOverflow) {
-                btnLeft.classList.toggle("visible", !atStart);
-                btnRight.classList.toggle("visible", !atEnd);
-            } else {
-                btnLeft.classList.remove("visible");
-                btnRight.classList.remove("visible");
-            }
+            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", () => {
@@ -167,6 +170,9 @@ const navs = navsConfig?.items ?? [];
         // 用 ResizeObserver 监听容器尺寸变化（窗口缩窄/变宽时重新判断）
         const ro = new ResizeObserver(updateButtons);
         ro.observe(navList);
+        if (navList.parentElement) ro.observe(navList.parentElement);
+        window.addEventListener("resize", updateButtons, { passive: true });
+        window.addEventListener("load", updateButtons, { once: true });
 
         // 初始检测
         updateButtons();

package/src/i18n/en.json

@@ -1,6 +1,7 @@
 {
     "nav": {
         "menu": "Open navigation menu",
+        "main": "Main navigation",
         "scrollLeft": "Scroll navigation left",
         "scrollRight": "Scroll navigation right",
         "search": "Search"

package/src/i18n/zh-CN.json

@@ -1,6 +1,7 @@
 {
     "nav": {
         "menu": "打开导航菜单",
+        "main": "主导航",
         "scrollLeft": "向左滚动导航",
         "scrollRight": "向右滚动导航",
         "search": "搜索"

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,9 +1,17 @@
 /* 导航容器 — 相对定位，为滚动按钮提供锚点 */
+nav {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+}
+
 .navContainer {
     position: relative;
     width: 100%;
+    min-width: 0;
     max-width: 100%;
     overflow: hidden;
+    box-sizing: border-box;
 }
 
 .navList {
@@ -11,22 +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::-webkit-scrollbar {
-    display: none;
+    flex-wrap: wrap;
+    width: 100%;
+    overflow: visible;
+    justify-content: center;
 }
 
 /* 滚动按钮 — 仅当内容溢出时显示 */
 .scrollBtn {
+    display: none;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -39,7 +47,6 @@
     backdrop-filter: blur(8px);
     color: var(--white-full);
     cursor: pointer;
-    display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
@@ -53,7 +60,7 @@
     background: var(--black-50p);
 }
 
-.scrollBtn.visible {
+.scrollBtn[data-visible] {
     opacity: 1;
     pointer-events: auto;
 }
@@ -67,7 +74,7 @@
 }
 
 /* 导航容器 hover 时显示滚动按钮 */
-.navContainer:hover .scrollBtn.visible {
+.navContainer:hover .scrollBtn[data-visible] {
     opacity: 1;
 }
 
@@ -173,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;
     }
 }
 
@@ -194,17 +197,24 @@
 @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;
         right: 0;
-        width: 220px;
+        width: min(220px, calc(100vw - 1rem));
         height: 100vh;
         background: var(--black-20p);
         backdrop-filter: blur(20px);

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;