@xingwangzhe/stalux 1.29.8 → 1.30.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/README.md +5 -1
  2. package/package.json +10 -6
  3. package/src/components/stalux/archives/archivesList.astro +19 -15
  4. package/src/components/stalux/archives/toArchive.astro +2 -2
  5. package/src/components/stalux/categories/categoriesCard.astro +8 -7
  6. package/src/components/stalux/categories/categoriesList.astro +3 -2
  7. package/src/components/stalux/common/author.astro +8 -3
  8. package/src/components/stalux/common/date.astro +3 -4
  9. package/src/components/stalux/common/textType.astro +7 -2
  10. package/src/components/stalux/footer/FooterBadges.astro +9 -97
  11. package/src/components/stalux/footer/FooterBeian.astro +2 -44
  12. package/src/components/stalux/footer/FooterCopyright.astro +1 -16
  13. package/src/components/stalux/footer/FooterStats.astro +4 -25
  14. package/src/components/stalux/footer/FooterThemeInfo.astro +1 -28
  15. package/src/components/stalux/layout/footer.astro +3 -3
  16. package/src/components/stalux/layout/listPage.astro +3 -3
  17. package/src/components/stalux/layout/navs.astro +16 -13
  18. package/src/components/stalux/links/linkCard.astro +7 -6
  19. package/src/components/stalux/links/linkList.astro +4 -3
  20. package/src/components/stalux/links/socialMedia.astro +2 -2
  21. package/src/components/stalux/posts/PostTaxonomy.astro +13 -8
  22. package/src/components/stalux/posts/postAuthor.astro +6 -5
  23. package/src/components/stalux/posts/postCC.astro +10 -9
  24. package/src/components/stalux/posts/postCard.astro +19 -15
  25. package/src/components/stalux/posts/postContent.astro +22 -14
  26. package/src/components/stalux/posts/postLeft.astro +5 -4
  27. package/src/components/stalux/posts/postList.astro +2 -3
  28. package/src/components/stalux/posts/postNavigation.astro +24 -23
  29. package/src/components/stalux/posts/postRight.astro +7 -6
  30. package/src/components/stalux/posts/postToc.astro +7 -19
  31. package/src/components/stalux/posts/randomPost.astro +8 -7
  32. package/src/components/stalux/tags/tagHeader.astro +10 -6
  33. package/src/components/stalux/tags/tagsCloud.astro +10 -9
  34. package/src/components/stalux/words/wordCard.astro +11 -10
  35. package/src/components/stalux/words/wordList.astro +4 -3
  36. package/src/index.ts +5 -4
  37. package/src/internal/runtime-cache-key.ts +13 -1
  38. package/src/layouts/PostLayout.astro +3 -4
  39. package/src/layouts/Stalux.astro +0 -17
  40. package/src/pages/404.astro +9 -77
  41. package/src/pages/archives.astro +3 -3
  42. package/src/pages/categories/index.astro +3 -3
  43. package/src/pages/index.astro +6 -18
  44. package/src/pages/tags/index.astro +3 -3
  45. package/src/pages/words.astro +3 -3
  46. package/src/scripts/waline-client.ts +1 -1
  47. package/src/styles/archives.css +1 -0
  48. package/src/styles/article.css +1 -0
  49. package/src/styles/base.css +287 -0
  50. package/src/styles/categories.css +1 -0
  51. package/src/styles/content.css +471 -0
  52. package/src/styles/generated-archives.css +3 -0
  53. package/src/styles/generated-article.css +3 -0
  54. package/src/styles/generated-categories.css +3 -0
  55. package/src/styles/generated-links.css +3 -0
  56. package/src/styles/generated-prose.css +2 -0
  57. package/src/styles/generated-tags.css +3 -0
  58. package/src/styles/generated-waline.css +2 -0
  59. package/src/styles/generated-words.css +3 -0
  60. package/src/styles/generated.css +3 -0
  61. package/src/styles/{components/posts/waline.css → integrations.css} +19 -23
  62. package/src/styles/links.css +1 -0
  63. package/src/styles/{shared/view-transitions.css → motion.css} +96 -0
  64. package/src/styles/prose.css +1 -0
  65. package/src/styles/tags.css +1 -0
  66. package/src/styles/theme.css +1 -0
  67. package/src/styles/words.css +1 -0
  68. package/src/styles/base/init.css +0 -287
  69. package/src/styles/components/archives/archivesList.module.css +0 -203
  70. package/src/styles/components/archives/toArchive.module.css +0 -3
  71. package/src/styles/components/categories/categoriesCard.module.css +0 -88
  72. package/src/styles/components/categories/categoriesList.module.css +0 -23
  73. package/src/styles/components/common/author.module.css +0 -72
  74. package/src/styles/components/common/date.module.css +0 -15
  75. package/src/styles/components/common/textType.module.css +0 -10
  76. package/src/styles/components/footer/footer.module.css +0 -44
  77. package/src/styles/components/layout/navs.module.css +0 -261
  78. package/src/styles/components/links/linkCard.module.css +0 -116
  79. package/src/styles/components/links/linkList.module.css +0 -54
  80. package/src/styles/components/links/socialLinks.module.css +0 -80
  81. package/src/styles/components/markdown.css +0 -523
  82. package/src/styles/components/posts/postAuthor.module.css +0 -31
  83. package/src/styles/components/posts/postCC.module.css +0 -138
  84. package/src/styles/components/posts/postCard.module.css +0 -167
  85. package/src/styles/components/posts/postContent.module.css +0 -238
  86. package/src/styles/components/posts/postLayout.module.css +0 -138
  87. package/src/styles/components/posts/postList.module.css +0 -25
  88. package/src/styles/components/posts/postNavigation.module.css +0 -186
  89. package/src/styles/components/posts/postSidebar.module.css +0 -59
  90. package/src/styles/components/posts/postTaxonomy.module.css +0 -87
  91. package/src/styles/components/posts/postToc.module.css +0 -74
  92. package/src/styles/components/posts/randomPost.module.css +0 -131
  93. package/src/styles/components/tags/tagHeader.module.css +0 -44
  94. package/src/styles/components/tags/tagsCloud.module.css +0 -155
  95. package/src/styles/components/words/wordCard.module.css +0 -136
  96. package/src/styles/components/words/wordList.module.css +0 -26
  97. package/src/styles/pages/archives.module.css +0 -22
  98. package/src/styles/pages/categories.module.css +0 -17
  99. package/src/styles/pages/home.module.css +0 -61
  100. package/src/styles/pages/listPage.module.css +0 -16
  101. package/src/styles/pages/tags.module.css +0 -16
  102. package/src/styles/pages/words.module.css +0 -16
  103. package/src/styles/shared/animations.css +0 -87
  104. package/src/styles/shared/stagger.css +0 -20
  105. /package/src/styles/{base/math.css → math.css} +0 -0
@@ -1,203 +0,0 @@
1
- .archivesContainer {
2
- max-width: 1000px;
3
- margin: 0 auto; /* 水平居中 */
4
- padding: var(--space-xl) var(--space-md);
5
- }
6
-
7
- .timelineContainer {
8
- position: relative;
9
- --tl-line: var(--radius-sm);
10
- --tl-pad: var(--space-xl);
11
- padding-left: var(--tl-pad);
12
- }
13
-
14
- .timelineContainer::before {
15
- content: "";
16
- position: absolute;
17
- left: 0;
18
- top: 0;
19
- width: var(--tl-line);
20
- height: 100%;
21
- background: linear-gradient(to bottom, var(--accent-80p), var(--accent-40p), var(--white-20p));
22
- border-radius: var(--border-medium);
23
- }
24
-
25
- .yearSection {
26
- margin-bottom: var(--space-2xl);
27
- position: relative;
28
- }
29
-
30
- .yearHeader {
31
- display: flex;
32
- align-items: center;
33
- margin-bottom: 1.5rem;
34
- }
35
-
36
- .yearTitle {
37
- position: relative;
38
- --dot: 16px;
39
- font-size: 1.8rem;
40
- margin: 0;
41
- color: var(--accent-90p);
42
- }
43
-
44
- .yearTitle::before {
45
- content: "";
46
- position: absolute;
47
- box-sizing: border-box;
48
- width: var(--dot);
49
- height: var(--dot);
50
- border-radius: 50%;
51
- background-color: var(--accent-80p);
52
- border: 3px solid var(--white-30p);
53
- left: calc(var(--tl-line) / 2 - var(--tl-pad) - var(--dot) / 2);
54
- top: 50%;
55
- transform: translateY(-50%);
56
- z-index: 2;
57
- }
58
-
59
- .yearCount {
60
- margin-left: 1rem;
61
- font-size: 0.9rem;
62
- padding: 0.3rem 0.8rem;
63
- background-color: var(--accent-20p);
64
- border-radius: 1rem;
65
- color: var(--white-90p);
66
- }
67
-
68
- .monthSection {
69
- content-visibility: auto;
70
- contain-intrinsic-block-size: auto var(--archive-estimate, 600px);
71
- margin-left: calc(-1 * var(--tl-pad));
72
- padding-left: var(--tl-pad);
73
- margin-bottom: 2rem;
74
- position: relative;
75
- }
76
-
77
- .noPosts {
78
- text-align: center;
79
- padding: 3rem 1rem;
80
- color: var(--white-70p);
81
- font-size: 1.2rem;
82
- background-color: var(--black-10p);
83
- border-radius: 0.5rem;
84
- width: 100%;
85
- }
86
-
87
- /* 文章列表和项目样式(静态 DOM)*/
88
- .postList {
89
- content-visibility: auto;
90
- contain-intrinsic-block-size: auto var(--archive-group-estimate, 576px);
91
- list-style: none;
92
- padding: 0 0 0 var(--tl-pad);
93
- margin: 0 0 0 calc(-1 * var(--tl-pad));
94
- }
95
-
96
- .postItem {
97
- --dot: 6px;
98
- margin-bottom: 1rem;
99
- position: relative;
100
- padding: 0.35rem 0;
101
- display: flex;
102
- gap: 0.75rem;
103
- align-items: center;
104
- }
105
-
106
- @supports not (content-visibility: auto) {
107
- .monthSection,
108
- .postList {
109
- contain-intrinsic-block-size: auto;
110
- }
111
- }
112
-
113
- .postItem::before {
114
- content: "";
115
- position: absolute;
116
- box-sizing: border-box;
117
- width: var(--dot);
118
- height: var(--dot);
119
- border-radius: 50%;
120
- background-color: var(--white-60p);
121
- left: calc(var(--tl-line) / 2 - var(--tl-pad) - var(--dot) / 2);
122
- top: 50%;
123
- transform: translateY(-50%);
124
- z-index: 1;
125
- }
126
-
127
- .postDate {
128
- color: var(--white-60p);
129
- font-size: 0.85rem;
130
- min-width: 90px;
131
- }
132
-
133
- .postLink {
134
- text-decoration: none;
135
- }
136
-
137
- .monthTitle {
138
- position: relative;
139
- --dot: 10px;
140
- font-size: 1rem;
141
- margin: 0 0 0.25rem 0;
142
- }
143
-
144
- .monthTitle::before {
145
- content: "";
146
- position: absolute;
147
- box-sizing: border-box;
148
- width: var(--dot);
149
- height: var(--dot);
150
- border-radius: 50%;
151
- background-color: rgba(255, 255, 255, 0.6);
152
- left: calc(var(--tl-line) / 2 - var(--tl-pad) - var(--dot) / 2);
153
- top: 50%;
154
- transform: translateY(-50%);
155
- z-index: 1;
156
- }
157
-
158
- @media (max-width: 768px) {
159
- .archivesContainer {
160
- padding: 1.5rem 0.5rem 2rem 1.5rem;
161
- }
162
-
163
- .pageHeader {
164
- margin-bottom: 2rem;
165
- }
166
-
167
- .timelineContainer {
168
- --tl-pad: 1.5rem;
169
- }
170
-
171
- .yearSection {
172
- margin-bottom: 2rem;
173
- }
174
-
175
- .yearTitle {
176
- --dot: 14px;
177
- font-size: 1.6rem;
178
- }
179
-
180
- .monthTitle {
181
- font-size: 1.2rem;
182
- }
183
- }
184
-
185
- @media (max-width: 480px) {
186
- .archivesContainer {
187
- padding: 1.5rem 0.5rem 2rem 1.2rem;
188
- }
189
-
190
- .timelineContainer {
191
- --tl-pad: 1.2rem;
192
- --tl-line: 3px;
193
- }
194
-
195
- .yearTitle {
196
- --dot: 12px;
197
- font-size: 1.4rem;
198
- }
199
-
200
- .monthTitle {
201
- font-size: 1.1rem;
202
- }
203
- }
@@ -1,3 +0,0 @@
1
- #archs {
2
- margin-top: 2em;
3
- }
@@ -1,88 +0,0 @@
1
- /* 分类卡片(扁平化展示) */
2
- .categoryCard {
3
- position: relative;
4
- display: flex;
5
- flex-direction: column;
6
- padding: var(--space-lg);
7
- background-color: var(--surface-glass);
8
- border-radius: 0.8rem;
9
- color: var(--white-full);
10
- box-shadow: var(--card-box-shadow);
11
- transition:
12
- transform 220ms ease,
13
- background-color 220ms ease;
14
- overflow: hidden;
15
- height: fit-content;
16
- }
17
-
18
- .categoryCard::before {
19
- content: "";
20
- position: absolute;
21
- inset: 0;
22
- background: linear-gradient(
23
- 120deg,
24
- rgba(255, 255, 255, 0),
25
- rgba(255, 255, 255, 0.05),
26
- rgba(255, 255, 255, 0)
27
- );
28
- transform: translateX(-100%);
29
- transition: transform 360ms ease;
30
- z-index: 1;
31
- }
32
-
33
- .categoryCard:hover {
34
- transform: translateY(-3px);
35
- background-color: var(--white-05p);
36
- box-shadow: var(--card-box-shadow-hover);
37
- }
38
-
39
- .categoryCard:hover::before {
40
- transform: translateX(100%);
41
- }
42
-
43
- .categoryCard:hover .categoryIcon {
44
- transform: rotate(-15deg) translateY(-3px);
45
- background: var(--accent-30p);
46
- color: var(--white-90p);
47
- box-shadow: 0 3px 8px var(--accent-30p);
48
- opacity: 1;
49
- }
50
- .categoryContent {
51
- flex: 1;
52
- padding-right: 40px;
53
- }
54
-
55
- .categoryheader {
56
- display: flex;
57
- text-decoration: none;
58
- color: var(--white-full);
59
- position: relative;
60
- align-items: center;
61
- width: 100%;
62
- height: 100%;
63
- }
64
-
65
- .categoryIcon {
66
- position: absolute;
67
- top: 10px;
68
- right: 10px;
69
- width: 28px;
70
- height: 28px;
71
- color: var(--white-50p);
72
- transition:
73
- transform 240ms ease,
74
- background-color 240ms ease,
75
- color 240ms ease;
76
- z-index: 2;
77
- transform-origin: center center;
78
- background: var(--black-15p);
79
- padding: 5px;
80
- border-radius: var(--radius-md);
81
- box-shadow: var(--shadow-sm);
82
- opacity: 0.8;
83
- }
84
-
85
- .categoryIcon svg {
86
- width: 100%;
87
- height: 100%;
88
- }
@@ -1,23 +0,0 @@
1
- /* 分类列表 - 响应式网格布局 */
2
-
3
- .categoriesList {
4
- display: grid;
5
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
6
- gap: 20px;
7
- margin: 30px auto;
8
- padding: 0;
9
- max-width: 1200px;
10
- list-style: none;
11
- }
12
-
13
- .categoriesList > li {
14
- content-visibility: auto;
15
- contain-intrinsic-block-size: auto 180px;
16
- overflow-clip-margin: 30px;
17
- }
18
-
19
- @supports not (content-visibility: auto) {
20
- .categoriesList > li {
21
- contain-intrinsic-block-size: auto;
22
- }
23
- }
@@ -1,72 +0,0 @@
1
- /* 作者卡片为无边框设计:此处不声明 border */
2
- .author {
3
- display: flex;
4
- flex-direction: column;
5
- justify-content: center;
6
- margin-top: 4em;
7
- }
8
-
9
- .authorFigure {
10
- display: flex;
11
- align-items: center;
12
- justify-content: center;
13
-
14
- img {
15
- border-radius: 50%;
16
- transition: transform 1s ease;
17
- box-shadow: 0 0 10px var(--stalux-accent-color);
18
- }
19
-
20
- img:hover {
21
- transform: rotate(360deg);
22
- }
23
-
24
- figcaption {
25
- margin-left: 1em;
26
- font-size: 2.5em;
27
- font-weight: bold;
28
- text-shadow: var(--stalux-text-shadow);
29
- color: var(--white-full);
30
- }
31
- }
32
-
33
- .figureColumn {
34
- flex-direction: column;
35
- }
36
-
37
- .figureColumn figcaption {
38
- margin-left: 0;
39
- margin-top: 0.5em;
40
- text-align: center;
41
- }
42
-
43
- /* 移动端响应式优化 */
44
- @media (max-width: 768px) {
45
- .author {
46
- margin-top: 2em;
47
- padding: 1em 0.5em;
48
- max-width: 95vw;
49
- width: 100%;
50
- box-sizing: border-box;
51
- }
52
- .authorFigure {
53
- flex-direction: column !important;
54
- gap: 0.5em;
55
- }
56
- .authorFigure img {
57
- width: 64px !important;
58
- height: 64px !important;
59
- max-width: 20vw;
60
- max-height: 20vw;
61
- }
62
- .authorFigure figcaption {
63
- font-size: 1.5em;
64
- margin-left: 0;
65
- margin-top: 0.5em;
66
- text-align: center;
67
- word-break: break-all;
68
- max-width: 90vw;
69
- overflow-wrap: break-word;
70
- white-space: normal;
71
- }
72
- }
@@ -1,15 +0,0 @@
1
- #date-time {
2
- display: flex;
3
- flex-direction: column;
4
- align-items: center;
5
- margin-top: 2em;
6
- text-shadow: var(--stalux-text-shadow);
7
- color: var(--white-full);
8
- #date {
9
- font-size: 2em;
10
- margin-bottom: 0.5em;
11
- }
12
- #time {
13
- font-size: 3em;
14
- }
15
- }
@@ -1,10 +0,0 @@
1
- .typeWriter {
2
- font-size: 2.5em; /* 放大字体 */
3
- margin-top: 1.5em;
4
- text-shadow: var(--stalux-text-shadow);
5
- text-align: center; /* 确保水平居中 */
6
- display: flex;
7
- justify-content: center; /* 额外确保居中,如果需要 */
8
- width: 100%;
9
- min-height: 2em;
10
- }
@@ -1,44 +0,0 @@
1
- .siteFooter {
2
- width: 100%;
3
- padding: 1.5rem 0;
4
- text-align: center;
5
- margin-top: auto;
6
- font-size: 0.9rem;
7
- color: var(--white-full);
8
- background-color: rgba(0, 0, 0, 0.1);
9
- backdrop-filter: blur(10px);
10
- }
11
-
12
- .footerContent {
13
- display: flex;
14
- flex-direction: column;
15
- gap: 0.8rem;
16
- max-width: 1200px;
17
- margin: 0 auto;
18
- padding: 0 1rem;
19
- }
20
-
21
- /* 响应式设计 */
22
- @media (max-width: 768px) {
23
- .siteFooter {
24
- padding: 1.2rem 0;
25
- font-size: 0.8rem;
26
- }
27
-
28
- .footerContent {
29
- gap: 0.6rem;
30
- padding: 0 0.8rem;
31
- }
32
- }
33
-
34
- @media (max-width: 480px) {
35
- .siteFooter {
36
- padding: 1rem 0;
37
- font-size: 0.8rem;
38
- }
39
-
40
- .footerContent {
41
- gap: 0.6rem;
42
- padding: 0 0.8rem;
43
- }
44
- }
@@ -1,261 +0,0 @@
1
- /* 导航容器 — 相对定位,为滚动按钮提供锚点 */
2
- nav {
3
- width: 100%;
4
- min-width: 0;
5
- max-width: 100%;
6
- }
7
-
8
- .navContainer {
9
- position: relative;
10
- width: 100%;
11
- min-width: 0;
12
- max-width: 100%;
13
- overflow: hidden;
14
- box-sizing: border-box;
15
- }
16
-
17
- .navList {
18
- display: flex;
19
- gap: 2rem;
20
- align-items: center;
21
- justify-content: center;
22
- transform: scale(var(--nav-scale, 1));
23
- transform-origin: center;
24
- min-width: 0;
25
- max-width: 100%;
26
- box-sizing: border-box;
27
- transition: transform 220ms cubic-bezier(0.22, 0.72, 0.22, 1);
28
- /* 当导航项总宽度超过视口时允许横向滚动,防止右侧项被裁剪 */
29
- flex-wrap: wrap;
30
- width: 100%;
31
- overflow: visible;
32
- }
33
-
34
- /* 滚动按钮 — 仅当内容溢出时显示 */
35
- .scrollBtn {
36
- display: none;
37
- position: absolute;
38
- top: 50%;
39
- transform: translateY(-50%);
40
- z-index: 10;
41
- width: 36px;
42
- height: 36px;
43
- border-radius: 50%;
44
- border: none;
45
- background: var(--black-30p);
46
- backdrop-filter: blur(8px);
47
- color: var(--white-full);
48
- cursor: pointer;
49
- align-items: center;
50
- justify-content: center;
51
- opacity: 0;
52
- pointer-events: none;
53
- transition: opacity 0.25s ease;
54
- padding: 0;
55
- box-shadow: var(--shadow-md);
56
- }
57
-
58
- /* 维持既有渲染:未定义的 --black-50p 使 hover 背景解析为透明 */
59
- .scrollBtn:hover {
60
- background: transparent;
61
- }
62
-
63
- .scrollBtn[data-visible] {
64
- opacity: 1;
65
- pointer-events: auto;
66
- }
67
-
68
- .scrollBtn[data-side="left"] {
69
- left: 4px;
70
- }
71
-
72
- .scrollBtn[data-side="right"] {
73
- right: 4px;
74
- }
75
-
76
- /* 导航容器 hover 时显示滚动按钮 */
77
- .navContainer:hover .scrollBtn[data-visible] {
78
- opacity: 1;
79
- }
80
-
81
- /* 按钮图标 */
82
- .scrollBtn svg {
83
- width: 20px;
84
- height: 20px;
85
- stroke: currentColor;
86
- stroke-width: 2;
87
- fill: none;
88
- }
89
-
90
- .navLink,
91
- .navLink:visited {
92
- color: inherit;
93
- text-decoration: none;
94
- background: none;
95
- border: none;
96
- cursor: pointer;
97
- font: inherit;
98
- padding: 0.5rem 0.75rem;
99
- display: flex;
100
- align-items: center;
101
- gap: 0.5rem;
102
- width: 100%;
103
- min-height: 44px;
104
- }
105
-
106
- .navLink :global(.nav-icon) {
107
- stroke: var(--white-full);
108
- }
109
-
110
- .navLink:hover :global(.nav-icon),
111
- .navLink:hover .navText {
112
- stroke: var(--stalux-accent-color);
113
- color: var(--stalux-accent-color);
114
- }
115
-
116
- .navItem {
117
- font-size: 1.3em;
118
- margin-right: 1em;
119
- margin-left: 1em;
120
- text-shadow: var(--stalux-text-shadow);
121
- display: flex;
122
- align-items: center;
123
- flex-shrink: 0;
124
- }
125
-
126
- .navText {
127
- white-space: nowrap;
128
- color: var(--white-full);
129
- }
130
-
131
- /* 汉堡菜单按钮 */
132
- .navToggle {
133
- display: none;
134
- background: none;
135
- border: none;
136
- color: inherit;
137
- cursor: pointer;
138
- padding: 0.75rem;
139
- z-index: 1001;
140
- min-width: 48px;
141
- min-height: 48px;
142
- }
143
-
144
- .navToggle :global(svg) {
145
- width: 32px;
146
- height: 32px;
147
- }
148
-
149
- /* 遮罩层 */
150
- .navOverlay {
151
- display: none;
152
- position: fixed;
153
- top: 0;
154
- left: 0;
155
- width: 100%;
156
- height: 100%;
157
- background: rgba(0, 0, 0, 0.6);
158
- z-index: 999;
159
- opacity: 0;
160
- transition: opacity 0.3s ease;
161
- pointer-events: none;
162
- }
163
-
164
- .navOverlay[data-state="show"] {
165
- display: block;
166
- opacity: 1;
167
- pointer-events: auto;
168
- }
169
-
170
- /* 中等屏幕:缩小间距和字号 */
171
- @media (max-width: 1100px) {
172
- .navList {
173
- gap: 1rem;
174
- }
175
-
176
- .navItem {
177
- font-size: 1em;
178
- margin-right: 0.6em;
179
- margin-left: 0.6em;
180
- }
181
- }
182
-
183
- /* 中小屏幕:保留文字,通过横向滚动展示完整导航 */
184
- @media (max-width: 900px) {
185
- .navItem {
186
- font-size: 0.95em;
187
- margin-right: 0.25em;
188
- margin-left: 0.25em;
189
- }
190
-
191
- .navList {
192
- gap: 0.5rem;
193
- }
194
- }
195
-
196
- /* 窄屏:改为侧边栏 */
197
- @media (max-width: 600px) {
198
- .navToggle {
199
- display: block;
200
- position: fixed;
201
- top: 0.75rem;
202
- left: 0.75rem;
203
- }
204
-
205
- .navContainer {
206
- overflow: visible;
207
- }
208
-
209
- nav {
210
- width: auto;
211
- }
212
-
213
- .navList {
214
- position: fixed;
215
- top: 0;
216
- left: 0;
217
- right: auto;
218
- width: min(220px, calc(100vw - 1rem));
219
- height: 100vh;
220
- background: var(--black-20p);
221
- backdrop-filter: blur(20px);
222
- flex-direction: column;
223
- align-items: flex-start;
224
- justify-content: flex-start;
225
- gap: 0;
226
- padding: 0.5rem 1rem 2rem 1rem;
227
- transform: translateX(-100%);
228
- z-index: 1000;
229
- overflow-y: auto;
230
- pointer-events: none;
231
- }
232
-
233
- .navList[data-state="open"] {
234
- transform: translateX(0);
235
- pointer-events: auto;
236
- }
237
-
238
- .navItem {
239
- width: 100%;
240
- margin: 0;
241
- border-bottom: 1px solid var(--white-10p);
242
- font-size: 0.9em;
243
- flex-shrink: 0;
244
- }
245
-
246
- .navText {
247
- display: inline;
248
- }
249
-
250
- .navLink {
251
- width: 100%;
252
- padding: 0.45rem 0.75rem;
253
- min-height: 44px;
254
- font-size: inherit;
255
- }
256
-
257
- .navLink :global(.nav-icon) {
258
- width: 18px;
259
- height: 18px;
260
- }
261
- }