@xingwangzhe/stalux 1.2.0

package/src/styles/components/tags/tagsCloud.module.css

@@ -0,0 +1,124 @@
+/* ── 移动端：卡片容器（桌面端隐藏） ── */
+.cards {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    justify-content: center;
+    align-items: flex-start;
+    align-content: flex-start;
+    padding: 1rem;
+    box-sizing: border-box;
+}
+
+@media (min-width: 769px) {
+    .cards {
+        display: none;
+    }
+}
+
+/* ── 桌面端：Canvas 容器（移动端隐藏） ── */
+.canvas {
+    display: none;
+    width: 100%;
+    min-height: 520px;
+    position: relative;
+}
+
+@media (min-width: 769px) {
+    .canvas {
+        display: block;
+    }
+}
+
+/* ── 卡片标签项 ── */
+.tagCard {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    border-radius: 2rem;
+    background-color: var(--white-10p);
+    color: var(--white-full);
+    text-decoration: none;
+    border: 1px solid var(--white-20p);
+    transition: all var(--transition-slow);
+    overflow: hidden;
+}
+
+.tagCard::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        120deg,
+        rgba(255, 255, 255, 0),
+        var(--white-10p),
+        rgba(255, 255, 255, 0)
+    );
+    transform: translateX(-100%);
+    transition: transform var(--transition-slowest);
+    z-index: 1;
+}
+
+.tagCard:hover {
+    transform: translateY(-2px);
+    border-color: var(--accent-50p);
+    box-shadow: var(--shadow-md);
+}
+
+.tagCard:hover::before {
+    transform: translateX(100%);
+}
+
+/* 按标签数量调整尺寸 */
+.tagCard[data-count="1"] {
+    font-size: 0.9rem;
+    padding: 0.3rem 0.8rem;
+}
+.tagCard[data-count="2"] {
+    font-size: 1rem;
+    padding: 0.4rem 0.9rem;
+}
+.tagCard[data-count="3"] {
+    font-size: 1.1rem;
+    padding: 0.5rem 1rem;
+}
+.tagCard[data-count^="4"],
+.tagCard[data-count^="5"] {
+    font-size: 1.2rem;
+    padding: 0.6rem 1.1rem;
+}
+.tagCard[data-count^="6"],
+.tagCard[data-count^="7"],
+.tagCard[data-count^="8"],
+.tagCard[data-count^="9"] {
+    font-size: 1.3rem;
+    padding: 0.7rem 1.2rem;
+}
+
+.tagName {
+    margin-right: 0.5rem;
+    z-index: 2;
+}
+
+.tagCount {
+    background-color: var(--white-20p);
+    border-radius: 1rem;
+    padding: 0.1rem 0.4rem;
+    font-size: 0.8rem;
+    min-width: 1.5rem;
+    text-align: center;
+    z-index: 2;
+}
+
+/* ── 空状态 ── */
+.noTags {
+    font-size: 1.2rem;
+    color: var(--white-60p);
+    text-align: center;
+    padding: 2rem;
+    width: 100%;
+}

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

@@ -0,0 +1,130 @@
+.card {
+    width: 100%;
+    background: var(--white-10p);
+    border-radius: var(--radius-lg, 12px);
+    padding: 1.5rem;
+    box-shadow: var(--shadow-md);
+    transition:
+        transform var(--transition-normal) ease,
+        box-shadow var(--transition-normal) ease;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-xl);
+}
+
+/* 被 hash 定位的卡片 — 主题光晕 */
+.card:target,
+.card[data-glow] {
+    animation: word-glow 2s ease-out;
+    box-shadow:
+        0 0 20px var(--accent-40p),
+        0 0 60px var(--accent-20p),
+        var(--shadow-lg);
+}
+
+@keyframes word-glow {
+    0% {
+        box-shadow:
+            0 0 30px var(--accent-50p),
+            0 0 80px var(--accent-30p),
+            var(--shadow-lg);
+        transform: scale(1.02);
+    }
+    100% {
+        box-shadow:
+            0 0 20px var(--accent-40p),
+            0 0 60px var(--accent-20p),
+            var(--shadow-lg);
+        transform: scale(1);
+    }
+}
+
+.body {
+    color: var(--white-80p);
+    line-height: 1.7;
+    font-size: 1.05rem;
+}
+
+.body :global(h1),
+.body :global(h2),
+.body :global(h3),
+.body :global(h4),
+.body :global(h5),
+.body :global(h6) {
+    font-size: 1.1em;
+    margin: 0.5rem 0;
+}
+
+.body :global(p) {
+    margin: 0.5rem 0;
+}
+
+.body :global(blockquote) {
+    margin: 0.5rem 0;
+    padding: 0.6rem 1rem;
+    border-left: 3px solid var(--accent-60p);
+    background: var(--white-05p);
+}
+
+/* 长代码块自动换行，避免卡片内出现横向滚动条 */
+.body :global(pre) {
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-x: visible;
+}
+
+.body :global(code) {
+    word-break: break-word;
+}
+
+.footer {
+    margin-top: auto;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--white-10p);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    font-size: 0.9rem;
+    color: var(--white-60p);
+}
+
+.date {
+    font-variant-numeric: tabular-nums;
+    color: var(--white-50p);
+}
+
+.sourceMeta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+}
+
+.sourceDate {
+    font-style: italic;
+    color: var(--white-50p);
+}
+
+.sourceText {
+    font-style: italic;
+}
+
+.sourceLink {
+    color: var(--accent-80p);
+    text-decoration: underline;
+    text-decoration-color: var(--accent-50p);
+    text-underline-offset: 0.15em;
+    font-style: italic;
+    transition: color var(--transition-fast) ease;
+}
+
+.sourceLink:hover {
+    color: var(--accent-90p);
+}

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

@@ -0,0 +1,39 @@
+.list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    margin: 2rem auto;
+    padding: 0;
+    list-style: none;
+}
+
+.item {
+    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) {
+    .list {
+        gap: 1rem;
+        margin: 1.5rem auto;
+    }
+
+    .item {
+        max-width: 100%;
+    }
+}

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

@@ -0,0 +1,18 @@
+.h1 {
+    margin-top: 1.5em;
+    text-align: center;
+    text-shadow: var(--stalux-text-shadow);
+    font-size: 2.5em;
+}
+.description {
+    text-align: center;
+    margin-bottom: 1.5em;
+    font-size: 1.2em;
+    color: var(--white-60p);
+}
+
+.archivesContainer {
+    max-width: 1000px;
+    margin: 0 auto; /* 水平居中 */
+    padding: 2rem 1rem;
+}

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

@@ -0,0 +1,13 @@
+.title {
+    margin-top: 1.5em;
+    text-align: center;
+    justify-content: center;
+    text-shadow: var(--stalux-text-shadow);
+    font-size: 2.5em;
+}
+.description {
+    text-align: center;
+    margin-bottom: 1.5em;
+    font-size: 1.2em;
+    color: var(--white-60p);
+}

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

@@ -0,0 +1,51 @@
+.homeBody {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 100vh;
+    padding-bottom: var(--space-3xl);
+}
+
+.homeTitle {
+    font-size: 4em;
+    margin-top: 1.5em;
+    text-shadow: var(--stalux-text-shadow);
+    text-align: center;
+    color: var(--white-full);
+}
+
+.homeNavs {
+    display: flex;
+}
+
+#showPostList {
+    margin-top: 3em;
+    font-size: 1.5em;
+    cursor: pointer;
+    text-shadow: var(--stalux-text-shadow);
+}
+
+/* 移动端响应式优化 */
+@media (max-width: 768px) {
+    .homeBody {
+        height: auto;
+        padding: 2rem 0.5rem 1.5rem 0.5rem;
+        max-width: 95vw;
+        width: 100%;
+        box-sizing: border-box;
+    }
+    .homeTitle {
+        font-size: 2em;
+        margin-top: 1em;
+        word-break: break-all;
+    }
+    .homeNavs {
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5em;
+    }
+    #showPostList {
+        margin-top: 2em;
+        font-size: 1.1em;
+    }
+}

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

@@ -0,0 +1,13 @@
+.title {
+    margin-top: 1.5em;
+    text-align: center;
+    text-shadow: var(--stalux-text-shadow);
+    font-size: 2.5em;
+}
+
+.description {
+    text-align: center;
+    margin-bottom: 1.5em;
+    font-size: 1.2em;
+    color: var(--white-60p);
+}

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

@@ -0,0 +1,12 @@
+.title {
+    margin-top: 1.5em;
+    text-align: center;
+    text-shadow: var(--stalux-text-shadow);
+    font-size: 2.5em;
+}
+.description {
+    text-align: center;
+    margin-bottom: 1.5em;
+    font-size: 1.2em;
+    color: var(--white-60p);
+}

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

@@ -0,0 +1,13 @@
+.title {
+    margin-top: 1.5em;
+    text-align: center;
+    text-shadow: var(--stalux-text-shadow);
+    font-size: 2.5em;
+}
+
+.description {
+    text-align: center;
+    margin-bottom: 1.5em;
+    font-size: 1.2em;
+    color: var(--white-60p);
+}

package/src/styles/shared/animations.css

@@ -0,0 +1,87 @@
+/* 共享动画关键帧 — 由 Stalux.astro 全局导入 */
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeInUpSmall {
+    from {
+        opacity: 0;
+        transform: translateY(12px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeInLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-15px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes fadeInRight {
+    from {
+        opacity: 0;
+        transform: translateX(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes fadeScale {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes fadeSlideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes dotPulse {
+    0%,
+    80%,
+    100% {
+        transform: scale(0.3);
+    }
+    40% {
+        transform: scale(1);
+    }
+}

package/src/styles/shared/stagger.css

@@ -0,0 +1,20 @@
+/* 共享列表入场动画延迟 — 由 Stalux.astro 全局导入 */
+
+.stagger-children > *:nth-child(1) {
+    animation-delay: 0.1s;
+}
+.stagger-children > *:nth-child(2) {
+    animation-delay: 0.15s;
+}
+.stagger-children > *:nth-child(3) {
+    animation-delay: 0.2s;
+}
+.stagger-children > *:nth-child(4) {
+    animation-delay: 0.25s;
+}
+.stagger-children > *:nth-child(5) {
+    animation-delay: 0.3s;
+}
+.stagger-children > *:nth-child(n + 6) {
+    animation-delay: 0.35s;
+}