@xingwangzhe/stalux 1.30.0 → 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 (54) hide show
  1. package/package.json +1 -1
  2. package/src/components/stalux/common/author.astro +7 -2
  3. package/src/components/stalux/common/textType.astro +6 -1
  4. package/src/components/stalux/footer/FooterBadges.astro +4 -4
  5. package/src/components/stalux/footer/FooterBeian.astro +2 -2
  6. package/src/components/stalux/footer/FooterCopyright.astro +1 -1
  7. package/src/components/stalux/footer/FooterStats.astro +2 -2
  8. package/src/components/stalux/footer/FooterThemeInfo.astro +1 -1
  9. package/src/components/stalux/layout/footer.astro +2 -2
  10. package/src/components/stalux/layout/listPage.astro +2 -2
  11. package/src/components/stalux/layout/navs.astro +10 -7
  12. package/src/components/stalux/posts/postCard.astro +11 -7
  13. package/src/pages/404.astro +4 -1
  14. package/src/pages/archives.astro +2 -2
  15. package/src/pages/categories/index.astro +2 -2
  16. package/src/pages/index.astro +5 -3
  17. package/src/pages/tags/index.astro +2 -2
  18. package/src/pages/words.astro +2 -2
  19. package/src/styles/archives.css +1 -2
  20. package/src/styles/article.css +1 -2
  21. package/src/styles/{theme/base.css → base.css} +4 -7
  22. package/src/styles/categories.css +1 -2
  23. package/src/styles/{theme/prose.css → content.css} +0 -7
  24. package/src/styles/generated-archives.css +1 -1
  25. package/src/styles/generated-article.css +1 -1
  26. package/src/styles/generated-categories.css +1 -1
  27. package/src/styles/generated-links.css +1 -1
  28. package/src/styles/generated-prose.css +1 -1
  29. package/src/styles/generated-tags.css +1 -1
  30. package/src/styles/generated-words.css +1 -1
  31. package/src/styles/generated.css +1 -1
  32. package/src/styles/links.css +1 -2
  33. package/src/styles/{shared/view-transitions.css → motion.css} +96 -0
  34. package/src/styles/prose.css +1 -3
  35. package/src/styles/tags.css +1 -2
  36. package/src/styles/theme.css +1 -12
  37. package/src/styles/words.css +1 -2
  38. package/src/styles/shared/animations.css +0 -87
  39. package/src/styles/shared/stagger.css +0 -20
  40. package/src/styles/theme/archives.css +0 -138
  41. package/src/styles/theme/article.css +0 -562
  42. package/src/styles/theme/categories.css +0 -54
  43. package/src/styles/theme/common.css +0 -79
  44. package/src/styles/theme/footer.css +0 -26
  45. package/src/styles/theme/inline.css +0 -153
  46. package/src/styles/theme/layout.css +0 -143
  47. package/src/styles/theme/link-cards.css +0 -114
  48. package/src/styles/theme/links.css +0 -69
  49. package/src/styles/theme/pages.css +0 -35
  50. package/src/styles/theme/posts.css +0 -79
  51. package/src/styles/theme/tags.css +0 -130
  52. package/src/styles/theme/words.css +0 -84
  53. /package/src/styles/{components/posts/waline.css → integrations.css} +0 -0
  54. /package/src/styles/{base/math.css → math.css} +0 -0
@@ -1,562 +0,0 @@
1
- @layer components {
2
- /* randomPost */
3
-
4
- .stalux-random-refresh:hover {
5
- color: var(--accent-60p, #0066cc);
6
- }
7
-
8
- .stalux-random-refresh:active {
9
- opacity: 0.7;
10
- }
11
-
12
- .stalux-random-refresh svg {
13
- width: 1em;
14
- height: 1em;
15
- }
16
-
17
- .stalux-random-refresh.stalux-random-rotating svg {
18
- animation: stalux-random-spin 0.6s linear;
19
- }
20
-
21
- @keyframes stalux-random-spin {
22
- from {
23
- transform: rotate(0deg);
24
- }
25
- to {
26
- transform: rotate(360deg);
27
- }
28
- }
29
-
30
- .stalux-random-loading,
31
- .stalux-random-error,
32
- .stalux-random-no-more {
33
- @apply text-center;
34
- padding: 1em;
35
- color: var(--foreground-60p, #666);
36
- font-size: 0.95em;
37
- }
38
-
39
- .stalux-random-list > li > a {
40
- @apply block no-underline;
41
- padding: 0.75em 1em;
42
- border-radius: 0.375em;
43
- background: transparent;
44
- color: var(--foreground-60p, #333);
45
- transition:
46
- color 0.2s ease,
47
- transform 0.2s ease;
48
- word-break: break-word;
49
- }
50
-
51
- .stalux-random-list > li > a:hover {
52
- transform: translateX(0.25em);
53
- }
54
-
55
- .stalux-random-list > li > a:active {
56
- transform: translateX(0.125em);
57
- }
58
- @media (prefers-color-scheme: dark) {
59
- .stalux-random-header {
60
- border-bottom-color: rgba(255, 255, 255, 0.1);
61
- }
62
-
63
- .stalux-random-title {
64
- color: var(--foreground-60p, #e0e0e0);
65
- }
66
-
67
- .stalux-random-refresh {
68
- color: var(--foreground-60p, #e0e0e0);
69
- }
70
-
71
- .stalux-random-loading,
72
- .stalux-random-error,
73
- .stalux-random-no-more {
74
- color: var(--foreground-60p, #b0b0b0);
75
- }
76
-
77
- .stalux-random-list > li > a {
78
- color: var(--foreground-60p, #e0e0e0);
79
- }
80
- }
81
-
82
- /* postToc */
83
-
84
- .stalux-toc-item:hover {
85
- transform: translateX(calc(-1 * var(--space-sm)));
86
- }
87
-
88
- .stalux-toc-item:active,
89
- .stalux-toc-item.stalux-toc-active {
90
- color: var(--accent-90p);
91
- background-color: var(--accent-20p);
92
- border-left-color: var(--accent-80p);
93
- font-weight: 500;
94
- }
95
-
96
- .stalux-toc-depth-1 {
97
- @apply [padding-left:var(--space-xs)];
98
- }
99
-
100
- .stalux-toc-depth-2 {
101
- @apply [padding-left:var(--space-lg)] [font-size:var(--font-size-smaller)];
102
- }
103
-
104
- .stalux-toc-depth-3 {
105
- @apply [padding-left:2.25rem] [font-size:var(--font-size-tiny)];
106
- }
107
-
108
- .stalux-toc-depth-4,
109
- .stalux-toc-depth-5,
110
- .stalux-toc-depth-6 {
111
- padding-left: var(--space-2xl);
112
- font-size: 0.75rem;
113
- color: var(--white-60p);
114
- }
115
-
116
- /* postTaxonomy */
117
-
118
- :is(
119
- .stalux-post-taxonomy-list,
120
- .stalux-post-taxonomy-list-column,
121
- .stalux-post-taxonomy-list-wrap
122
- ) {
123
- @apply flex;
124
- gap: var(--space-sm);
125
- }
126
-
127
- .stalux-post-taxonomy-item-column:hover {
128
- transform: translateX(4px);
129
- }
130
-
131
- .stalux-post-taxonomy-item-column:active {
132
- transform: translateX(2px);
133
- }
134
-
135
- .stalux-post-taxonomy-item-pill:hover {
136
- transform: translateY(-2px);
137
- }
138
-
139
- .stalux-post-taxonomy-item-pill:active {
140
- transform: translateY(-1px);
141
- }
142
-
143
- /* postSidebar */
144
- :is(.stalux-sidebar, .stalux-sidebar-right) {
145
- @apply sticky w-full h-fit overflow-y-auto stalux-stack;
146
- top: 20px;
147
- max-height: calc(100vh - 40px);
148
- gap: var(--space-lg);
149
- padding: var(--space-lg) 0;
150
- scrollbar-width: none;
151
- -ms-overflow-style: none;
152
- }
153
-
154
- :is(.stalux-sidebar, .stalux-sidebar-right)::-webkit-scrollbar {
155
- @apply hidden;
156
- }
157
-
158
- @media (max-width: 1400px) {
159
- .stalux-sidebar-right {
160
- width: 240px;
161
- }
162
- }
163
-
164
- @media (max-width: 1200px) {
165
- :is(.stalux-sidebar, .stalux-sidebar-right) {
166
- @apply hidden;
167
- }
168
- }
169
-
170
- @media (max-width: 768px) {
171
- :is(.stalux-sidebar, .stalux-sidebar-right),
172
- .stalux-sidebar-right {
173
- @apply hidden;
174
- }
175
- }
176
-
177
- /* postNavigation */
178
-
179
- .stalux-pagination-link::before {
180
- @apply absolute w-full h-full pointer-events-none;
181
- content: "";
182
- top: 0;
183
- left: 0;
184
- background: linear-gradient(120deg, transparent, var(--accent-20p), transparent);
185
- transition: transform var(--transition-slow);
186
- transform: scaleX(0);
187
- transform-origin: left;
188
- }
189
-
190
- .stalux-pagination-link:hover {
191
- transform: translateY(-3px);
192
- box-shadow: var(--shadow-raised-hover);
193
- }
194
-
195
- .stalux-pagination-link:hover::before {
196
- transform: scaleX(1);
197
- }
198
-
199
- .stalux-pagination-link.stalux-pagination-disabled {
200
- @apply pointer-events-none;
201
- opacity: 0.5;
202
- cursor: not-allowed;
203
- background: var(--black-15p);
204
- }
205
-
206
- .stalux-pagination-link.stalux-pagination-prev-post {
207
- @apply text-left;
208
- margin-left: var(--space-xs);
209
- }
210
-
211
- .stalux-pagination-link.stalux-pagination-next-post {
212
- @apply text-right;
213
- justify-content: flex-end;
214
- margin-right: var(--space-xs);
215
- }
216
- @media (max-width: 768px) {
217
- .stalux-pagination {
218
- margin: var(--space-md) 0;
219
- }
220
-
221
- .stalux-pagination-inner {
222
- gap: var(--space-sm);
223
- }
224
-
225
- .stalux-pagination-link {
226
- @apply flex-col items-start justify-center;
227
- padding: var(--space-sm) var(--space-md);
228
- min-height: 120px;
229
- }
230
-
231
- .stalux-pagination-link.stalux-pagination-next-post {
232
- @apply items-end;
233
- }
234
-
235
- .stalux-pagination-arrow {
236
- transform: scale(0.85);
237
- }
238
-
239
- .stalux-pagination-label {
240
- font-size: 0.75rem;
241
- margin-bottom: var(--space-xs);
242
- }
243
-
244
- .stalux-pagination-title {
245
- @apply max-w-full;
246
- font-size: var(--font-size-small);
247
- white-space: normal;
248
- }
249
- }
250
- @media (max-width: 480px) {
251
- .stalux-pagination {
252
- margin: var(--space-md) 0;
253
- }
254
-
255
- .stalux-pagination-inner {
256
- @apply flex-col;
257
- gap: var(--space-sm);
258
- }
259
-
260
- .stalux-pagination-link {
261
- @apply w-full flex-row items-center justify-start;
262
- padding: var(--space-sm) var(--space-md);
263
- min-height: 100px;
264
- gap: var(--space-md);
265
- }
266
-
267
- .stalux-pagination-link.stalux-pagination-prev-post,
268
- .stalux-pagination-link.stalux-pagination-next-post {
269
- @apply text-left items-center;
270
- margin-left: 0;
271
- margin-right: 0;
272
- }
273
-
274
- .stalux-pagination-link.stalux-pagination-next-post {
275
- @apply justify-start;
276
- }
277
-
278
- .stalux-pagination-title {
279
- white-space: normal;
280
- }
281
- }
282
-
283
- /* postLayout */
284
- .stalux-post-layout > :nth-child(1) {
285
- @apply m-0;
286
- }
287
-
288
- .stalux-post-layout > :nth-child(2) {
289
- @apply min-w-0 m-0;
290
- }
291
-
292
- .stalux-post-layout > :nth-child(3) {
293
- @apply m-0;
294
- }
295
- @media (min-width: 1600px) {
296
- .stalux-post-layout {
297
- grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(240px, 280px);
298
- gap: 4rem;
299
- padding: 2rem 1.5rem;
300
- }
301
- }
302
- @media (max-width: 1400px) {
303
- .stalux-post-layout {
304
- grid-template-columns: 260px 1fr 260px;
305
- gap: 3.5rem;
306
- padding: 1.5rem 1rem;
307
- }
308
- }
309
- @media (max-width: 1200px) {
310
- .stalux-post-layout {
311
- grid-template-columns: 1fr;
312
- gap: 2rem;
313
- padding: 1rem 0.75rem;
314
- }
315
- }
316
- @media (max-width: 768px) {
317
- .stalux-post-page {
318
- @apply p-0;
319
- }
320
-
321
- .stalux-post-layout {
322
- @apply stalux-stack p-0 m-0;
323
- gap: 2rem;
324
- }
325
- .stalux-post-layout > :nth-child(2) {
326
- order: 1;
327
- }
328
-
329
- .stalux-post-layout > :nth-child(1) {
330
- order: 2;
331
- }
332
-
333
- .stalux-post-layout > :nth-child(3) {
334
- order: 3;
335
- }
336
- }
337
- @media (max-width: 480px) {
338
- .stalux-post-layout {
339
- @apply p-0;
340
- gap: 1.25rem;
341
- }
342
- }
343
- @media print {
344
- .stalux-post-layout {
345
- grid-template-columns: 1fr;
346
- gap: 2rem;
347
- }
348
-
349
- .stalux-post-layout > :nth-child(1),
350
- .stalux-post-layout > :nth-child(3) {
351
- @apply hidden;
352
- }
353
- }
354
- @media (prefers-reduced-motion: reduce) {
355
- .stalux-post-page * {
356
- animation-duration: 0.01ms !important;
357
- animation-iteration-count: 1 !important;
358
- transition-duration: 0.01ms !important;
359
- }
360
- }
361
- @media (prefers-contrast: more) {
362
- .stalux-post-layout {
363
- gap: 2rem;
364
- }
365
- }
366
- .stalux-post-layout :focus-visible {
367
- outline: 2px solid var(--accent-80p);
368
- outline-offset: 2px;
369
- }
370
-
371
- /* postContent */
372
-
373
- .stalux-post-page-stats span {
374
- @apply inline-flex items-center;
375
- gap: 0.3rem;
376
- }
377
-
378
- #stalux-post-vercount_value_page_pv {
379
- @apply font-semibold;
380
- color: #ffffffb3;
381
- }
382
-
383
- #stalux-post-vercount_container_page_pv {
384
- transition: opacity 0.3s ease;
385
- }
386
-
387
- .stalux-post-source-link:hover,
388
- .stalux-post-source-link:focus,
389
- .stalux-post-source-link:active {
390
- @apply no-underline;
391
- background: var(--accent, #ffffff22);
392
- border-top-color: var(--accent, #ffffff44);
393
- border-right-color: var(--accent, #ffffff44);
394
- border-left-color: var(--accent, #ffffff44);
395
- transform: translateY(-1px);
396
- }
397
- .stalux-post-source-link::after {
398
- display: none !important;
399
- }
400
-
401
- @keyframes stalux-post-content-reveal {
402
- from {
403
- opacity: 0;
404
- }
405
- to {
406
- opacity: 1;
407
- }
408
- }
409
-
410
- @media (max-width: 1024px) {
411
- .stalux-post-title {
412
- font-size: 2rem;
413
- }
414
-
415
- .stalux-post-metadata {
416
- gap: 1rem;
417
- }
418
- }
419
-
420
- @media (max-width: 768px) {
421
- .stalux-article {
422
- @apply m-0 w-full p-0 box-border;
423
- background: transparent;
424
- box-shadow: none;
425
- }
426
-
427
- .stalux-post-body {
428
- @apply w-full m-0;
429
- padding: 0 0.75rem;
430
- }
431
-
432
- .stalux-post-article-header {
433
- margin-bottom: 2rem;
434
- padding: 1rem 1rem 0;
435
- }
436
-
437
- .stalux-post-title {
438
- font-size: 1.75rem;
439
- }
440
-
441
- .stalux-post-metadata {
442
- @apply flex-col;
443
- gap: 0.75rem;
444
- font-size: 0.85rem;
445
- }
446
-
447
- .stalux-post-article-footer {
448
- margin-top: 2rem;
449
- padding-top: 1.5rem;
450
- }
451
- .stalux-post-page-stats {
452
- font-size: 0.85rem;
453
- margin-top: 0.8rem;
454
- padding-top: 0.6rem;
455
- }
456
- }
457
-
458
- @keyframes stalux-post-fade-in-up {
459
- from {
460
- opacity: 0;
461
- transform: translateY(20px);
462
- }
463
- to {
464
- opacity: 1;
465
- transform: translateY(0);
466
- }
467
- }
468
-
469
- /* postCC */
470
-
471
- .stalux-license-author,
472
- .stalux-license-url,
473
- .stalux-license-license {
474
- margin: var(--space-sm) 0;
475
- font-size: var(--font-size-small);
476
- color: var(--white-80p);
477
- line-height: 1.6;
478
- }
479
-
480
- .stalux-license-box a {
481
- @apply no-underline relative;
482
- color: var(--accent-90p);
483
- transition:
484
- color var(--transition-normal),
485
- border-bottom-color var(--transition-normal);
486
- border-bottom: 1px dashed var(--accent-50p);
487
- padding-bottom: 1px;
488
- }
489
-
490
- .stalux-license-box a:hover {
491
- color: var(--stalux-accent-color);
492
- border-bottom-color: var(--accent-80p);
493
- }
494
-
495
- .stalux-license-box a:active {
496
- color: var(--accent-70p);
497
- }
498
-
499
- .stalux-license-box:hover .stalux-license-watermark {
500
- opacity: 0.25;
501
- }
502
-
503
- .stalux-license-icon svg {
504
- @apply w-full h-full block;
505
- }
506
-
507
- .stalux-license-icon path {
508
- fill: currentColor;
509
- color: var(--white-full);
510
- }
511
- @media (max-width: 768px) {
512
- .stalux-license-box {
513
- max-width: 95%;
514
- padding: var(--space-md);
515
- margin: var(--space-md) auto;
516
- }
517
-
518
- .stalux-license-title {
519
- font-size: var(--font-size-base);
520
- margin-bottom: var(--space-xs);
521
- }
522
-
523
- .stalux-license-author,
524
- .stalux-license-url,
525
- .stalux-license-license {
526
- margin: var(--space-xs) 0;
527
- font-size: 0.85rem;
528
- }
529
-
530
- .stalux-license-icon {
531
- width: 80px;
532
- height: 80px;
533
- }
534
- }
535
-
536
- @media (max-width: 480px) {
537
- .stalux-license-box {
538
- @apply max-w-full;
539
- padding: var(--space-sm);
540
- margin: var(--space-md) 0;
541
- }
542
-
543
- .stalux-license-title {
544
- font-size: var(--font-size-small);
545
- margin-bottom: var(--space-2xs);
546
- }
547
-
548
- .stalux-license-author,
549
- .stalux-license-url,
550
- .stalux-license-license {
551
- margin: var(--space-2xs) 0;
552
- font-size: 0.8rem;
553
- }
554
-
555
- .stalux-license-icon {
556
- width: 60px;
557
- height: 60px;
558
- }
559
- }
560
-
561
- /* postAuthor */
562
- }
@@ -1,54 +0,0 @@
1
- @layer components {
2
- /* categoriesList */
3
-
4
- .stalux-categories > li {
5
- content-visibility: auto;
6
- contain-intrinsic-block-size: auto 180px;
7
- overflow-clip-margin: 30px;
8
- }
9
-
10
- @supports not (content-visibility: auto) {
11
- .stalux-categories > li {
12
- contain-intrinsic-block-size: auto;
13
- }
14
- }
15
-
16
- /* categoriesCard */
17
-
18
- .stalux-category-card::before {
19
- @apply absolute;
20
- content: "";
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
- .stalux-category-card:hover {
34
- transform: translateY(-3px);
35
- background-color: var(--white-05p);
36
- box-shadow: var(--card-box-shadow-hover);
37
- }
38
-
39
- .stalux-category-card:hover::before {
40
- transform: translateX(100%);
41
- }
42
-
43
- .stalux-category-card:hover .stalux-category-icon {
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
-
51
- .stalux-category-icon svg {
52
- @apply w-full h-full;
53
- }
54
- }
@@ -1,79 +0,0 @@
1
- @layer components {
2
- #stalux-to-archive-archs {
3
- margin-top: 2em;
4
- }
5
- /* textType */
6
-
7
- /* date */
8
- #stalux-date-date-time {
9
- @apply stalux-stack items-center;
10
- margin-top: 2em;
11
- @apply stalux-glow;
12
- color: var(--white-full);
13
- #stalux-date-date {
14
- font-size: 2em;
15
- margin-bottom: 0.5em;
16
- }
17
- #stalux-date-time {
18
- font-size: 3em;
19
- }
20
- }
21
-
22
- /* author */
23
-
24
- .stalux-author-figure {
25
- @apply stalux-flex-center;
26
-
27
- img {
28
- @apply rounded-full;
29
- transition: transform 1s ease;
30
- box-shadow: 0 0 10px var(--stalux-accent-color);
31
- }
32
-
33
- img:hover {
34
- transform: rotate(360deg);
35
- }
36
-
37
- figcaption {
38
- @apply font-bold;
39
- margin-left: 1em;
40
- font-size: 2.5em;
41
- @apply stalux-glow;
42
- color: var(--white-full);
43
- }
44
- }
45
-
46
- .stalux-author-figure-column figcaption {
47
- @apply text-center;
48
- margin-left: 0;
49
- margin-top: 0.5em;
50
- }
51
- @media (max-width: 768px) {
52
- .stalux-author {
53
- @apply w-full box-border;
54
- margin-top: 2em;
55
- padding: 1em 0.5em;
56
- max-width: 95vw;
57
- }
58
- .stalux-author-figure {
59
- flex-direction: column !important;
60
- gap: 0.5em;
61
- }
62
- .stalux-author-figure img {
63
- width: 64px !important;
64
- height: 64px !important;
65
- max-width: 20vw;
66
- max-height: 20vw;
67
- }
68
- .stalux-author-figure figcaption {
69
- @apply text-center;
70
- font-size: 1.5em;
71
- margin-left: 0;
72
- margin-top: 0.5em;
73
- word-break: break-all;
74
- max-width: 90vw;
75
- overflow-wrap: break-word;
76
- white-space: normal;
77
- }
78
- }
79
- }
@@ -1,26 +0,0 @@
1
- @layer components {
2
- /* footer */
3
- @media (max-width: 768px) {
4
- .stalux-footer {
5
- padding: 1.2rem 0;
6
- font-size: 0.8rem;
7
- }
8
-
9
- .stalux-footer-content {
10
- gap: 0.6rem;
11
- padding: 0 0.8rem;
12
- }
13
- }
14
-
15
- @media (max-width: 480px) {
16
- .stalux-footer {
17
- padding: 1rem 0;
18
- font-size: 0.8rem;
19
- }
20
-
21
- .stalux-footer-content {
22
- gap: 0.6rem;
23
- padding: 0 0.8rem;
24
- }
25
- }
26
- }