@xingwangzhe/stalux 1.2.0

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

@@ -0,0 +1,250 @@
+/* 导航容器 — 相对定位，为滚动按钮提供锚点 */
+.navContainer {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+}
+
+.navList {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+    justify-content: center;
+    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;
+}
+
+/* 滚动按钮 — 仅当内容溢出时显示 */
+.scrollBtn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 10;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: none;
+    background: var(--black-30p);
+    backdrop-filter: blur(8px);
+    color: var(--white-full);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s ease;
+    padding: 0;
+    box-shadow: var(--shadow-md);
+}
+
+.scrollBtn:hover {
+    background: var(--black-50p);
+}
+
+.scrollBtn.visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.scrollBtn[data-side="left"] {
+    left: 4px;
+}
+
+.scrollBtn[data-side="right"] {
+    right: 4px;
+}
+
+/* 导航容器 hover 时显示滚动按钮 */
+.navContainer:hover .scrollBtn.visible {
+    opacity: 1;
+}
+
+/* 按钮图标 */
+.scrollBtn svg {
+    width: 20px;
+    height: 20px;
+    stroke: currentColor;
+    stroke-width: 2;
+    fill: none;
+}
+
+.navLink,
+.navLink:visited {
+    color: inherit;
+    text-decoration: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    padding: 0.5rem 0.75rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    min-height: 44px;
+}
+
+.navLink :global(.nav-icon) {
+    stroke: var(--white-full);
+}
+
+.navLink:hover :global(.nav-icon),
+.navLink:hover .navText {
+    stroke: var(--stalux-accent-color);
+    color: var(--stalux-accent-color);
+}
+
+.navItem {
+    font-size: 1.3em;
+    margin-right: 1em;
+    margin-left: 1em;
+    text-shadow: var(--stalux-text-shadow);
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.navText {
+    white-space: nowrap;
+    color: var(--white-full);
+}
+
+/* 汉堡菜单按钮 */
+.navToggle {
+    display: none;
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    padding: 0.75rem;
+    z-index: 1001;
+    min-width: 48px;
+    min-height: 48px;
+}
+
+.navToggle :global(svg) {
+    width: 32px;
+    height: 32px;
+}
+
+/* 遮罩层 */
+.navOverlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 999;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+}
+
+.navOverlay[data-state="show"] {
+    display: block;
+    opacity: 1;
+    pointer-events: auto;
+}
+
+/* 中等屏幕：缩小间距和字号 */
+@media (max-width: 1100px) {
+    .navList {
+        gap: 1rem;
+    }
+
+    .navItem {
+        font-size: 1em;
+        margin-right: 0.6em;
+        margin-left: 0.6em;
+    }
+}
+
+/* 较窄屏幕：隐藏文字，只显示图标 */
+@media (max-width: 900px) {
+    .navText {
+        display: none;
+    }
+
+    .navItem {
+        font-size: 1em;
+        margin-right: 0.5em;
+        margin-left: 0.5em;
+    }
+
+    .navList {
+        gap: 0.75rem;
+    }
+}
+
+/* 窄屏：改为侧边栏 */
+@media (max-width: 600px) {
+    .navToggle {
+        display: block;
+    }
+
+    .navContainer {
+        overflow: visible;
+    }
+
+    .navList {
+        position: fixed;
+        top: 0;
+        right: 0;
+        width: 220px;
+        height: 100vh;
+        background: var(--black-20p);
+        backdrop-filter: blur(20px);
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        gap: 0;
+        padding: 0.5rem 1rem 2rem 1rem;
+        transform: translateX(100%);
+        z-index: 1000;
+        overflow-y: auto;
+        pointer-events: none;
+    }
+
+    .navList[data-state="open"] {
+        transform: translateX(0);
+        pointer-events: auto;
+    }
+
+    .navItem {
+        width: 100%;
+        margin: 0;
+        border-bottom: 1px solid var(--white-10p);
+        font-size: 0.9em;
+        flex-shrink: 0;
+    }
+
+    .navText {
+        display: inline;
+    }
+
+    .navLink {
+        width: 100%;
+        padding: 0.45rem 0.75rem;
+        min-height: 44px;
+        font-size: inherit;
+    }
+
+    .navLink :global(.nav-icon) {
+        width: 18px;
+        height: 18px;
+    }
+}

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

@@ -0,0 +1,99 @@
+/* 友链卡片（受 staluxmyblog 链接布局启发）*/
+
+.card {
+    display: flex;
+    flex-direction: column;
+    background: var(--white-10p) !important;
+    border-radius: 10px;
+    padding: 16px;
+    text-decoration: none;
+    color: #fff;
+    min-height: 200px;
+    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);
+}
+
+.card:hover {
+    transform: translateY(-6px);
+    background: #ffffff26;
+    box-shadow: var(--shadow-xl);
+}
+
+.avatar {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 12px;
+}
+
+.avatar img {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid var(--accent-60p);
+    transform-origin: center;
+    transition:
+        transform 0.8s ease,
+        box-shadow 0.3s ease,
+        border-color 0.3s ease;
+}
+
+.card:hover .avatar img {
+    transform: rotate(360deg) scale(1.1);
+    box-shadow: 0 0 20px var(--accent-50p);
+    border-color: var(--accent-85p);
+}
+
+.content {
+    text-align: center;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.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-clip: text;
+    -webkit-text-fill-color: transparent;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.description {
+    margin: 0;
+    font-size: 0.95rem;
+    color: var(--white-78p);
+    line-height: 1.45;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@media (max-width: 480px) {
+    .card {
+        padding: 14px;
+    }
+
+    .avatar img {
+        width: 70px;
+        height: 70px;
+    }
+
+    .title {
+        font-size: 1rem;
+    }
+
+    .description {
+        font-size: 0.9rem;
+    }
+}

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

@@ -0,0 +1,67 @@
+/* 友链列表 - 响应式网格布局（受 staluxmyblog 启发）*/
+
+.list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 20px;
+    margin: 30px auto;
+    padding: 0;
+    list-style: none;
+    max-width: 1200px;
+    justify-items: center;
+}
+
+.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 {
+        grid-template-columns: repeat(5, 1fr);
+    }
+}
+
+/* 中等屏幕：4个卡片一行 */
+@media (max-width: 1399px) and (min-width: 1100px) {
+    .list {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
+/* 小屏幕：3个卡片一行 */
+@media (max-width: 1099px) and (min-width: 768px) {
+    .list {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+/* 平板：2个卡片一行 */
+@media (max-width: 767px) and (min-width: 480px) {
+    .list {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 16px;
+    }
+}
+
+/* 移动设备：1个卡片一行 */
+@media (max-width: 479px) {
+    .list {
+        grid-template-columns: 1fr;
+        gap: 14px;
+        margin: 20px auto;
+    }
+}

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

@@ -0,0 +1,22 @@
+.social-links {
+    margin-top: 3em;
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em;
+        padding: 0;
+        margin: 0;
+        li {
+            font-size: large;
+            width: 2.5em;
+            height: 2.5em;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            background-color: var(--white-15p);
+            box-sizing: border-box;
+            overflow: hidden;
+        }
+    }
+}