@xingwangzhe/stalux 1.29.7 → 1.30.0

package/src/styles/base/init.css

@@ -1,287 +0,0 @@
-/* 全局设置 */
-html,
-body {
-    margin: 0;
-    width: 100%;
-    height: 100%;
-    color: white;
-    main {
-        flex: 1;
-    }
-    scrollbar-color: #4a4a4a #2a2a2a;
-    display: block;
-    font-family:
-        var(--font-body), "Noto Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
-}
-
-html[data-clarity-id] {
-    opacity: 1 !important;
-}
-/* 将所有链接初始化为无视觉状态，但保留键盘可见焦点 */
-a {
-    color: inherit;
-    text-decoration: none;
-    background-color: transparent;
-    cursor: pointer;
-    text-decoration-skip-ink: auto;
-}
-
-.a-none {
-    color: inherit !important;
-    text-decoration: none !important;
-    background-color: transparent;
-    cursor: pointer;
-    text-decoration-skip-ink: auto;
-}
-
-.a-none::after {
-    display: none !important;
-}
-
-a {
-    position: relative;
-    transition:
-        color 0.2s ease,
-        text-shadow 0.2s ease;
-}
-
-/* 下划线动画 */
-a::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    bottom: -2px;
-    height: 1px;
-    width: 100%;
-    background: linear-gradient(90deg, var(--stalux-accent-color), var(--accent-50p));
-    transform: scaleX(0);
-    transform-origin: left;
-    transition: transform 0.25s cubic-bezier(0.25, 0.9, 0.2, 1);
-    pointer-events: none;
-}
-
-a:hover::after,
-a:focus-visible::after,
-a:active::after {
-    transform: scaleX(1);
-}
-
-a:hover,
-a:active,
-a:focus-visible {
-    text-decoration: none;
-    /* 保持颜色不变，避免 hover 时颜色跳变 */
-}
-
-a:focus {
-    outline: none;
-}
-
-a:focus-visible {
-    outline: 2px solid var(--stalux-accent-color);
-    outline-offset: 2px;
-}
-ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-.none {
-    display: none;
-}
-/* 布局：使 body 成为列 flex 容器，并让 main 填充可用高度 */
-.stalux-root {
-    min-height: 100vh;
-    color: white;
-}
-
-/* 主内容至少撑满视口高度
- * - 内容不足视口时：min-height 让 main = 100vh，页脚紧跟在视口下方
- * - 内容超过视口时：main 自然撑高，页脚在内容末尾
- * 不使用 flex，避免 flex-basis 限制导致内容溢出 main */
-.stalux-main {
-    min-height: 100vh;
-}
-
-/* 默认 stalux 背景的 CSS 变量（非动态默认值） */
-:root {
-    --stalux-bg-color: #202020;
-    --stalux-bg-filter: none;
-    --stalux-text-shadow: var(--stalux-accent-color) 0.08rem 0.08rem 0.18rem;
-    --stalux-accent-color: #eab308;
-    --stalux-accent-rgb: 234, 179, 8;
-    --surface-glass: var(--black-05p);
-    --surface-glass-shadow: var(--shadow-sidebar);
-
-    /* 卡片和标签颜色 Token（可在这里统一调整主题色/透明度） */
-    --card-bg: var(--surface-glass);
-    --card-border: rgba(255, 255, 255, 0.1);
-    --card-box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
-    --card-box-shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.12);
-
-    --tag-bg: rgba(255, 255, 255, 0.12);
-    --tag-bg-hover: rgba(255, 255, 255, 0.18);
-    --category-bg: rgba(255, 255, 255, 0.08);
-    --category-bg-hover: rgba(255, 255, 255, 0.14);
-
-    --date-bg: rgba(66, 160, 255, 0.18);
-    --date-border: rgba(66, 160, 255, 0.25);
-    --updated-bg: rgba(255, 201, 71, 0.2);
-    --updated-border: rgba(255, 201, 71, 0.3);
-
-    /* 常用颜色值 */
-    --white-full: #ffffff;
-    --white-95p: rgba(255, 255, 255, 0.95);
-    --white-90p: rgba(255, 255, 255, 0.9);
-    --white-85p: rgba(255, 255, 255, 0.85);
-    --white-80p: rgba(255, 255, 255, 0.9);
-    --white-78p: rgba(255, 255, 255, 0.78);
-    --white-75p: rgba(255, 255, 255, 0.75);
-    --white-70p: rgba(255, 255, 255, 0.86);
-    --white-60p: rgba(255, 255, 255, 0.6);
-    --white-50p: rgba(255, 255, 255, 0.5);
-    --white-30p: rgba(255, 255, 255, 0.3);
-    --white-20p: rgba(255, 255, 255, 0.2);
-    --white-15p: rgba(255, 255, 255, 0.15);
-    --white-10p: rgba(255, 255, 255, 0.1);
-    --white-05p: rgba(255, 255, 255, 0.05);
-
-    --black-30p: rgba(0, 0, 0, 0.3);
-    --black-20p: rgba(0, 0, 0, 0.2);
-    --black-15p: rgba(0, 0, 0, 0.15);
-    --black-10p: rgba(0, 0, 0, 0.1);
-    --black-05p: rgba(0, 0, 0, 0.05);
-
-    /* 强调色变体 */
-    --accent-90p: rgba(var(--stalux-accent-rgb), 0.9);
-    --accent-85p: rgba(var(--stalux-accent-rgb), 0.85);
-    --accent-80p: rgba(var(--stalux-accent-rgb), 0.8);
-    --accent-70p: rgba(var(--stalux-accent-rgb), 0.7);
-    --accent-60p: rgba(var(--stalux-accent-rgb), 0.6);
-    --accent-50p: rgba(var(--stalux-accent-rgb), 0.5);
-    --accent-40p: rgba(var(--stalux-accent-rgb), 0.4);
-    --accent-30p: rgba(var(--stalux-accent-rgb), 0.3);
-    --accent-20p: rgba(var(--stalux-accent-rgb), 0.2);
-
-    /* 常用过渡和动画 */
-    --transition-fast: 0.18s ease;
-    --transition-medium: 0.2s ease;
-    --transition-normal: 0.25s ease;
-    --transition-slow: 0.3s ease;
-    --transition-slower: 0.5s ease;
-    --transition-slowest: 0.6s ease;
-
-    --easing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-
-    /* 常用间距值 */
-    --space-2xs: 0.25rem;
-    --space-xs: 0.75rem;
-    --space-sm: 0.5rem;
-    --space-md: 1rem;
-    --space-lg: 1.5rem;
-    --space-xl: 2rem;
-    --space-2xl: 3rem;
-    --space-3xl: 4rem;
-
-    /* 常用圆角半径值 */
-    --radius-sm: 4px;
-    --radius-md: 6px;
-    --radius-lg: 8px;
-    --radius-full: 9999px;
-
-    /* 常用阴影 */
-    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.2);
-    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.3);
-    --shadow-xl: 0 12px 26px rgba(0, 0, 0, 0.28);
-    --shadow-sidebar:
-        0 16px 20px -12px rgba(0, 0, 0, 0.84),
-        10px 4px 16px -12px rgba(0, 0, 0, 0.58),
-        -10px 4px 16px -12px rgba(0, 0, 0, 0.58);
-    --shadow-raised-hover:
-        0 20px 24px -13px rgba(0, 0, 0, 0.9),
-        12px 5px 18px -13px rgba(0, 0, 0, 0.68),
-        -12px 5px 18px -13px rgba(0, 0, 0, 0.68);
-    --shadow-dark: rgba(0, 0, 0, 0.753);
-
-    /* 语义化颜色 */
-    --muted-text: #bbb;
-
-    /* 字体族栈 */
-    --font-body: "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
-    /* --font-code 由 Astro Fonts API 提供；构建时将页面 CJK 子集追加为其回退。 */
-
-    /* 字体大小系统 */
-    --font-size-subtitle: 1.35rem;
-    --font-size-base: 1.1rem;
-    --font-size-small: 0.95rem;
-    --font-size-smaller: 0.9rem;
-    --font-size-tiny: 0.85rem;
-
-    /* 边框宽度 */
-    --border-thin: 1px;
-    --border-medium: 2px;
-    --border-thick: 3px;
-}
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: #2a2a2a;
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-    background: #4a4a4a;
-    border-radius: 4px;
-    transition: background 0.3s ease-out;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: #5a5a5a;
-}
-
-::-webkit-scrollbar-corner {
-    background: #2a2a2a;
-}
-
-/* 背景层 - 双层随机背景，在路由切换时交叉淡入淡出 */
-.bg-layer {
-    position: fixed;
-    inset: 0;
-    z-index: -10;
-    background-repeat: repeat;
-    background-size: auto;
-    background-position: center;
-    background-color: var(--stalux-bg-color, transparent);
-    filter: var(--stalux-bg-filter, none);
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 650ms ease-in-out;
-    /* 禁止浏览器强制色彩模式（高对比度/暗黑模式）调整背景图颜色 */
-    forced-color-adjust: none;
-    /* 关键：防止 Safari/WebKit 在暗色模式下自动调整 SVG 背景图颜色 */
-    color-scheme: only light;
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .bg-layer {
-        transition-duration: 0ms;
-    }
-}
-
-/* footer 基础样式，保证页脚始终可见且不覆盖内容 */
-footer {
-    padding: var(--space-lg) var(--space-md);
-    text-align: center;
-    color: var(--muted-text);
-    background: linear-gradient(180deg, rgba(12, 14, 18, 0.18), rgba(12, 14, 18, 0.72));
-    border-top: 1px solid var(--white-10p);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
-}

package/src/styles/components/archives/archivesList.module.css

@@ -1,203 +0,0 @@
-.archivesContainer {
-    max-width: 1000px;
-    margin: 0 auto; /* 水平居中 */
-    padding: var(--space-xl) var(--space-md);
-}
-
-.timelineContainer {
-    position: relative;
-    --tl-line: var(--radius-sm);
-    --tl-pad: var(--space-xl);
-    padding-left: var(--tl-pad);
-}
-
-.timelineContainer::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: var(--tl-line);
-    height: 100%;
-    background: linear-gradient(to bottom, var(--accent-80p), var(--accent-40p), var(--white-20p));
-    border-radius: var(--border-medium);
-}
-
-.yearSection {
-    margin-bottom: var(--space-2xl);
-    position: relative;
-}
-
-.yearHeader {
-    display: flex;
-    align-items: center;
-    margin-bottom: 1.5rem;
-}
-
-.yearTitle {
-    position: relative;
-    --dot: 16px;
-    font-size: 1.8rem;
-    margin: 0;
-    color: var(--accent-90p);
-}
-
-.yearTitle::before {
-    content: "";
-    position: absolute;
-    box-sizing: border-box;
-    width: var(--dot);
-    height: var(--dot);
-    border-radius: 50%;
-    background-color: var(--accent-80p);
-    border: 3px solid var(--white-30p);
-    left: calc(var(--tl-line) / 2 - var(--tl-pad) - var(--dot) / 2);
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 2;
-}
-
-.yearCount {
-    margin-left: 1rem;
-    font-size: 0.9rem;
-    padding: 0.3rem 0.8rem;
-    background-color: var(--accent-20p);
-    border-radius: 1rem;
-    color: var(--white-90p);
-}
-
-.monthSection {
-    content-visibility: auto;
-    contain-intrinsic-block-size: auto var(--archive-estimate, 600px);
-    margin-left: calc(-1 * var(--tl-pad));
-    padding-left: var(--tl-pad);
-    margin-bottom: 2rem;
-    position: relative;
-}
-
-.noPosts {
-    text-align: center;
-    padding: 3rem 1rem;
-    color: var(--white-70p);
-    font-size: 1.2rem;
-    background-color: var(--black-10p);
-    border-radius: 0.5rem;
-    width: 100%;
-}
-
-/* 文章列表和项目样式（静态 DOM）*/
-.postList {
-    content-visibility: auto;
-    contain-intrinsic-block-size: auto var(--archive-group-estimate, 576px);
-    list-style: none;
-    padding: 0 0 0 var(--tl-pad);
-    margin: 0 0 0 calc(-1 * var(--tl-pad));
-}
-
-.postItem {
-    --dot: 6px;
-    margin-bottom: 1rem;
-    position: relative;
-    padding: 0.35rem 0;
-    display: flex;
-    gap: 0.75rem;
-    align-items: center;
-}
-
-@supports not (content-visibility: auto) {
-    .monthSection,
-    .postList {
-        contain-intrinsic-block-size: auto;
-    }
-}
-
-.postItem::before {
-    content: "";
-    position: absolute;
-    box-sizing: border-box;
-    width: var(--dot);
-    height: var(--dot);
-    border-radius: 50%;
-    background-color: var(--white-60p);
-    left: calc(var(--tl-line) / 2 - var(--tl-pad) - var(--dot) / 2);
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-}
-
-.postDate {
-    color: var(--white-60p);
-    font-size: 0.85rem;
-    min-width: 90px;
-}
-
-.postLink {
-    text-decoration: none;
-}
-
-.monthTitle {
-    position: relative;
-    --dot: 10px;
-    font-size: 1rem;
-    margin: 0 0 0.25rem 0;
-}
-
-.monthTitle::before {
-    content: "";
-    position: absolute;
-    box-sizing: border-box;
-    width: var(--dot);
-    height: var(--dot);
-    border-radius: 50%;
-    background-color: rgba(255, 255, 255, 0.6);
-    left: calc(var(--tl-line) / 2 - var(--tl-pad) - var(--dot) / 2);
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-}
-
-@media (max-width: 768px) {
-    .archivesContainer {
-        padding: 1.5rem 0.5rem 2rem 1.5rem;
-    }
-
-    .pageHeader {
-        margin-bottom: 2rem;
-    }
-
-    .timelineContainer {
-        --tl-pad: 1.5rem;
-    }
-
-    .yearSection {
-        margin-bottom: 2rem;
-    }
-
-    .yearTitle {
-        --dot: 14px;
-        font-size: 1.6rem;
-    }
-
-    .monthTitle {
-        font-size: 1.2rem;
-    }
-}
-
-@media (max-width: 480px) {
-    .archivesContainer {
-        padding: 1.5rem 0.5rem 2rem 1.2rem;
-    }
-
-    .timelineContainer {
-        --tl-pad: 1.2rem;
-        --tl-line: 3px;
-    }
-
-    .yearTitle {
-        --dot: 12px;
-        font-size: 1.4rem;
-    }
-
-    .monthTitle {
-        font-size: 1.1rem;
-    }
-}

package/src/styles/components/archives/toArchive.module.css

@@ -1,3 +0,0 @@
-#archs {
-    margin-top: 2em;
-}

package/src/styles/components/categories/categoriesCard.module.css

@@ -1,88 +0,0 @@
-/* 分类卡片（扁平化展示） */
-.categoryCard {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    padding: var(--space-lg);
-    background-color: var(--surface-glass);
-    border-radius: 0.8rem;
-    color: var(--white-full);
-    box-shadow: var(--card-box-shadow);
-    transition:
-        transform 220ms ease,
-        background-color 220ms ease;
-    overflow: hidden;
-    height: fit-content;
-}
-
-.categoryCard::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(
-        120deg,
-        rgba(255, 255, 255, 0),
-        rgba(255, 255, 255, 0.05),
-        rgba(255, 255, 255, 0)
-    );
-    transform: translateX(-100%);
-    transition: transform 360ms ease;
-    z-index: 1;
-}
-
-.categoryCard:hover {
-    transform: translateY(-3px);
-    background-color: var(--white-05p);
-    box-shadow: var(--card-box-shadow-hover);
-}
-
-.categoryCard:hover::before {
-    transform: translateX(100%);
-}
-
-.categoryCard:hover .categoryIcon {
-    transform: rotate(-15deg) translateY(-3px);
-    background: var(--accent-30p);
-    color: var(--white-90p);
-    box-shadow: 0 3px 8px var(--accent-30p);
-    opacity: 1;
-}
-.categoryContent {
-    flex: 1;
-    padding-right: 40px;
-}
-
-.categoryheader {
-    display: flex;
-    text-decoration: none;
-    color: var(--white-full);
-    position: relative;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-}
-
-.categoryIcon {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    width: 28px;
-    height: 28px;
-    color: var(--white-50p);
-    transition:
-        transform 240ms ease,
-        background-color 240ms ease,
-        color 240ms ease;
-    z-index: 2;
-    transform-origin: center center;
-    background: var(--black-15p);
-    padding: 5px;
-    border-radius: var(--radius-md);
-    box-shadow: var(--shadow-sm);
-    opacity: 0.8;
-}
-
-.categoryIcon svg {
-    width: 100%;
-    height: 100%;
-}

package/src/styles/components/categories/categoriesList.module.css

@@ -1,23 +0,0 @@
-/* 分类列表 - 响应式网格布局 */
-
-.categoriesList {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 20px;
-    margin: 30px auto;
-    padding: 0;
-    max-width: 1200px;
-    list-style: none;
-}
-
-.categoriesList > li {
-    content-visibility: auto;
-    contain-intrinsic-block-size: auto 180px;
-    overflow-clip-margin: 30px;
-}
-
-@supports not (content-visibility: auto) {
-    .categoriesList > li {
-        contain-intrinsic-block-size: auto;
-    }
-}

package/src/styles/components/common/author.module.css

@@ -1,72 +0,0 @@
-/* 作者卡片为无边框设计：此处不声明 border */
-.author {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin-top: 4em;
-}
-
-.authorFigure {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    img {
-        border-radius: 50%;
-        transition: transform 1s ease;
-        box-shadow: 0 0 10px var(--stalux-accent-color);
-    }
-
-    img:hover {
-        transform: rotate(360deg);
-    }
-
-    figcaption {
-        margin-left: 1em;
-        font-size: 2.5em;
-        font-weight: bold;
-        text-shadow: var(--stalux-text-shadow);
-        color: var(--white-full);
-    }
-}
-
-.figureColumn {
-    flex-direction: column;
-}
-
-.figureColumn figcaption {
-    margin-left: 0;
-    margin-top: 0.5em;
-    text-align: center;
-}
-
-/* 移动端响应式优化 */
-@media (max-width: 768px) {
-    .author {
-        margin-top: 2em;
-        padding: 1em 0.5em;
-        max-width: 95vw;
-        width: 100%;
-        box-sizing: border-box;
-    }
-    .authorFigure {
-        flex-direction: column !important;
-        gap: 0.5em;
-    }
-    .authorFigure img {
-        width: 64px !important;
-        height: 64px !important;
-        max-width: 20vw;
-        max-height: 20vw;
-    }
-    .authorFigure figcaption {
-        font-size: 1.5em;
-        margin-left: 0;
-        margin-top: 0.5em;
-        text-align: center;
-        word-break: break-all;
-        max-width: 90vw;
-        overflow-wrap: break-word;
-        white-space: normal;
-    }
-}

package/src/styles/components/common/date.module.css

@@ -1,15 +0,0 @@
-#date-time {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 2em;
-    text-shadow: var(--stalux-text-shadow);
-    color: var(--white-full);
-    #date {
-        font-size: 2em;
-        margin-bottom: 0.5em;
-    }
-    #time {
-        font-size: 3em;
-    }
-}

package/src/styles/components/common/textType.module.css

@@ -1,10 +0,0 @@
-.typeWriter {
-    font-size: 2.5em; /* 放大字体 */
-    margin-top: 1.5em;
-    text-shadow: var(--stalux-text-shadow);
-    text-align: center; /* 确保水平居中 */
-    display: flex;
-    justify-content: center; /* 额外确保居中，如果需要 */
-    width: 100%;
-    min-height: 2em;
-}