@anglefeint/astro-theme 0.1.26 → 0.1.28

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/config/theme.ts +26 -10
  3. package/src/i18n/messages.ts +245 -226
  4. package/src/styles/ai/prose.css +19 -11
  5. package/src/styles/blog-list.css +274 -33
  6. package/src/styles/theme-cyber.css +74 -108
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anglefeint/astro-theme",
3
- "version": "0.1.26",
3
+ "version": "0.1.28",
4
4
  "type": "module",
5
5
  "description": "Anglefeint core theme package for Astro",
6
6
  "keywords": [
package/src/config/theme.ts CHANGED
@@ -2,14 +2,30 @@
2
2
  * Theme behavior config.
3
3
  */
4
4
  export const THEME = {
5
- /** Posts per page on blog list */
6
- BLOG_PAGE_SIZE: 9,
7
- /** Number of latest posts shown on home page */
8
- HOME_LATEST_COUNT: 3,
9
- /** Whether to enable the About page (disable to hide from nav/routes if needed) */
10
- ENABLE_ABOUT_PAGE: true,
11
- /** Optional visual effects switches */
12
- EFFECTS: {
13
- ENABLE_RED_QUEEN: true,
14
- },
5
+ /** Posts per page on blog list */
6
+ BLOG_PAGE_SIZE: 9,
7
+ /** Number of latest posts shown on home page */
8
+ HOME_LATEST_COUNT: 3,
9
+ /** Whether to enable the About page (disable to hide from nav/routes if needed) */
10
+ ENABLE_ABOUT_PAGE: true,
11
+ /** Pagination behavior and style strategy for blog list */
12
+ PAGINATION: {
13
+ WINDOW_SIZE: 7,
14
+ SHOW_JUMP_THRESHOLD: 12,
15
+ JUMP: {
16
+ ENABLED: true,
17
+ ENTER_TO_GO: true,
18
+ },
19
+ STYLE: {
20
+ ENABLED: true,
21
+ MODE: 'random',
22
+ VARIANTS: 9,
23
+ FIXED_VARIANT: 1,
24
+ STABLE_BY: 'page',
25
+ },
26
+ },
27
+ /** Optional visual effects switches */
28
+ EFFECTS: {
29
+ ENABLE_RED_QUEEN: true,
30
+ },
15
31
  } as const;
package/src/i18n/messages.ts CHANGED
@@ -1,236 +1,255 @@
1
1
  import type { Locale } from './config';
2
2
 
3
3
  export type Messages = {
4
- siteTitle: string;
5
- siteDescription: string;
6
- langLabel: string;
7
- nav: {
8
- home: string;
9
- blog: string;
10
- about: string;
11
- status: string;
12
- };
13
- home: {
14
- hero: string;
15
- latest: string;
16
- viewAll: string;
17
- noPosts: string;
18
- };
19
- about: {
20
- title: string;
21
- description: string;
22
- who: string;
23
- what: string;
24
- ethos: string;
25
- now: string;
26
- contact: string;
27
- regenerate: string;
28
- };
29
- blog: {
30
- title: string;
31
- pageTitle: string;
32
- archiveDescription: string;
33
- pageDescription: string;
34
- previous: string;
35
- next: string;
36
- backToBlog: string;
37
- related: string;
38
- regenerate: string;
39
- toastP10: string;
40
- toastP30: string;
41
- toastP60: string;
42
- toastDone: string;
43
- };
4
+ siteTitle: string;
5
+ siteDescription: string;
6
+ langLabel: string;
7
+ nav: {
8
+ home: string;
9
+ blog: string;
10
+ about: string;
11
+ status: string;
12
+ };
13
+ home: {
14
+ hero: string;
15
+ latest: string;
16
+ viewAll: string;
17
+ noPosts: string;
18
+ };
19
+ about: {
20
+ title: string;
21
+ description: string;
22
+ who: string;
23
+ what: string;
24
+ ethos: string;
25
+ now: string;
26
+ contact: string;
27
+ regenerate: string;
28
+ };
29
+ blog: {
30
+ title: string;
31
+ pageTitle: string;
32
+ archiveDescription: string;
33
+ pageDescription: string;
34
+ previous: string;
35
+ next: string;
36
+ jumpTo: string;
37
+ jumpGo: string;
38
+ jumpInputLabel: string;
39
+ backToBlog: string;
40
+ related: string;
41
+ regenerate: string;
42
+ toastP10: string;
43
+ toastP30: string;
44
+ toastP60: string;
45
+ toastDone: string;
46
+ };
44
47
  };
45
48
 
46
49
  export const DEFAULT_MESSAGES: Record<Locale, Messages> = {
47
- en: {
48
- siteTitle: 'Angle Feint',
49
- siteDescription: 'Cinematic web interfaces and AI-era engineering essays.',
50
- langLabel: 'Language',
51
- nav: { home: 'Home', blog: 'Blog', about: 'About', status: 'system: online' },
52
- home: {
53
- hero: 'Write a short introduction for your site and what readers can expect from your posts.',
54
- latest: 'Latest Posts',
55
- viewAll: 'View all posts',
56
- noPosts: 'No posts available in this language yet.',
57
- },
58
- about: {
59
- title: 'About — Hacker Ethos',
60
- description: 'Who I am, what I build, and the hacker ethos behind my work.',
61
- who: 'Who I Am',
62
- what: 'What I Build',
63
- ethos: 'Hacker Ethos',
64
- now: 'Now',
65
- contact: 'Contact',
66
- regenerate: 'Regenerate',
67
- },
68
- blog: {
69
- title: 'Blog',
70
- pageTitle: 'Blog - Page',
71
- archiveDescription: 'Essays on AI-era craft, web engineering, and system architecture.',
72
- pageDescription: 'Blog archive page',
73
- previous: 'Previous',
74
- next: 'Next',
75
- backToBlog: 'Back to blog',
76
- related: 'Related',
77
- regenerate: 'Regenerate',
78
- toastP10: 'context parsed 10%',
79
- toastP30: 'context parsed 30%',
80
- toastP60: 'inference stable 60%',
81
- toastDone: 'output finalized',
82
- },
83
- },
84
- ja: {
85
- siteTitle: 'Angle Feint',
86
- siteDescription: '映画的なWebインターフェースとAI時代のエンジニアリング考察。',
87
- langLabel: '言語',
88
- nav: { home: 'ホーム', blog: 'ブログ', about: 'プロフィール', status: 'system: online' },
89
- home: {
90
- hero: 'このサイトの紹介文と、読者がどんな記事を期待できるかを書いてください。',
91
- latest: '最新記事',
92
- viewAll: 'すべての記事を見る',
93
- noPosts: 'この言語の記事はまだありません。',
94
- },
95
- about: {
96
- title: 'About — Hacker Ethos',
97
- description: '私について、作るもの、そしてハッカー精神。',
98
- who: '私について',
99
- what: '作るもの',
100
- ethos: 'ハッカー精神',
101
- now: '現在',
102
- contact: '連絡先',
103
- regenerate: '再生成',
104
- },
105
- blog: {
106
- title: 'ブログ',
107
- pageTitle: 'ブログ - ページ',
108
- archiveDescription: 'AI時代のクラフト、Web開発、システム設計に関する記事。',
109
- pageDescription: 'ブログ一覧ページ',
110
- previous: '前へ',
111
- next: '次へ',
112
- backToBlog: 'ブログへ戻る',
113
- related: '関連記事',
114
- regenerate: '再生成',
115
- toastP10: '文脈解析 10%',
116
- toastP30: '文脈解析 30%',
117
- toastP60: '推論安定 60%',
118
- toastDone: '出力確定',
119
- },
120
- },
121
- ko: {
122
- siteTitle: 'Angle Feint',
123
- siteDescription: '시네마틱 웹 인터페이스와 AI 시대 엔지니어링 에세이.',
124
- langLabel: '언어',
125
- nav: { home: '홈', blog: '블로그', about: '소개', status: 'system: online' },
126
- home: {
127
- hero: '사이트 소개와 방문자가 어떤 글을 기대할 수 있는지 간단히 작성하세요.',
128
- latest: '최신 글',
129
- viewAll: '모든 글 보기',
130
- noPosts: '이 언어에는 아직 게시물이 없습니다.',
131
- },
132
- about: {
133
- title: 'About — Hacker Ethos',
134
- description: '나와 내가 만드는 것, 그리고 해커 정신.',
135
- who: '나는 누구인가',
136
- what: '무엇을 만드는가',
137
- ethos: '해커 정신',
138
- now: '지금',
139
- contact: '연락처',
140
- regenerate: '재생성',
141
- },
142
- blog: {
143
- title: '블로그',
144
- pageTitle: '블로그 - 페이지',
145
- archiveDescription: 'AI 시대의 개발 감각, 웹 엔지니어링, 시스템 아키텍처 에세이.',
146
- pageDescription: '블로그 아카이브 페이지',
147
- previous: '이전',
148
- next: '다음',
149
- backToBlog: '블로그로 돌아가기',
150
- related: '관련 글',
151
- regenerate: '재생성',
152
- toastP10: '컨텍스트 파싱 10%',
153
- toastP30: '컨텍스트 파싱 30%',
154
- toastP60: '추론 안정화 60%',
155
- toastDone: '출력 완료',
156
- },
157
- },
158
- es: {
159
- siteTitle: 'Angle Feint',
160
- siteDescription: 'Interfaces web cinematográficas y ensayos de ingeniería en la era de IA.',
161
- langLabel: 'Idioma',
162
- nav: { home: 'Inicio', blog: 'Blog', about: 'Sobre mí', status: 'system: online' },
163
- home: {
164
- hero: 'Escribe una breve presentación del sitio y qué tipo de contenido encontrarán tus lectores.',
165
- latest: 'Últimas publicaciones',
166
- viewAll: 'Ver todas las publicaciones',
167
- noPosts: 'Aún no hay publicaciones en este idioma.',
168
- },
169
- about: {
170
- title: 'About — Hacker Ethos',
171
- description: 'Quién soy, qué construyo y el ethos hacker detrás de mi trabajo.',
172
- who: 'Quién soy',
173
- what: 'Qué construyo',
174
- ethos: 'Ethos hacker',
175
- now: 'Ahora',
176
- contact: 'Contacto',
177
- regenerate: 'Regenerar',
178
- },
179
- blog: {
180
- title: 'Blog',
181
- pageTitle: 'Blog - Página',
182
- archiveDescription: 'Ensayos sobre oficio en la era de IA, ingeniería web y arquitectura de sistemas.',
183
- pageDescription: 'Página del archivo del blog',
184
- previous: 'Anterior',
185
- next: 'Siguiente',
186
- backToBlog: 'Volver al blog',
187
- related: 'Relacionados',
188
- regenerate: 'Regenerar',
189
- toastP10: 'contexto analizado 10%',
190
- toastP30: 'contexto analizado 30%',
191
- toastP60: 'inferencia estable 60%',
192
- toastDone: 'salida finalizada',
193
- },
194
- },
195
- zh: {
196
- siteTitle: 'Angle Feint',
197
- siteDescription: '电影感网页界面与 AI 时代工程实践文章。',
198
- langLabel: '语言',
199
- nav: { home: '首页', blog: '博客', about: '关于', status: 'system: online' },
200
- home: {
201
- hero: '在这里写一段站点简介，并告诉读者你将发布什么类型的内容。',
202
- latest: '最新文章',
203
- viewAll: '查看全部文章',
204
- noPosts: '该语言暂时没有文章。',
205
- },
206
- about: {
207
- title: 'About — Hacker Ethos',
208
- description: '我是谁、我在做什么，以及背后的黑客精神。',
209
- who: '我是谁',
210
- what: '我在构建什么',
211
- ethos: '黑客精神',
212
- now: '现在',
213
- contact: '联系',
214
- regenerate: '重新生成',
215
- },
216
- blog: {
217
- title: '博客',
218
- pageTitle: '博客 - 第',
219
- archiveDescription: '关于 AI 时代开发、Web 工程与系统架构的文章。',
220
- pageDescription: '博客归档页',
221
- previous: '上一页',
222
- next: '下一页',
223
- backToBlog: '返回博客',
224
- related: '相关文章',
225
- regenerate: '重新生成',
226
- toastP10: '语境解析 10%',
227
- toastP30: '语境解析 30%',
228
- toastP60: '推理稳定 60%',
229
- toastDone: '输出完成',
230
- },
231
- },
50
+ en: {
51
+ siteTitle: 'Angle Feint',
52
+ siteDescription: 'Cinematic web interfaces and AI-era engineering essays.',
53
+ langLabel: 'Language',
54
+ nav: { home: 'Home', blog: 'Blog', about: 'About', status: 'system: online' },
55
+ home: {
56
+ hero: 'Write a short introduction for your site and what readers can expect from your posts.',
57
+ latest: 'Latest Posts',
58
+ viewAll: 'View all posts',
59
+ noPosts: 'No posts available in this language yet.',
60
+ },
61
+ about: {
62
+ title: 'About — Hacker Ethos',
63
+ description: 'Who I am, what I build, and the hacker ethos behind my work.',
64
+ who: 'Who I Am',
65
+ what: 'What I Build',
66
+ ethos: 'Hacker Ethos',
67
+ now: 'Now',
68
+ contact: 'Contact',
69
+ regenerate: 'Regenerate',
70
+ },
71
+ blog: {
72
+ title: 'Blog',
73
+ pageTitle: 'Blog - Page',
74
+ archiveDescription: 'Essays on AI-era craft, web engineering, and system architecture.',
75
+ pageDescription: 'Blog archive page',
76
+ previous: 'Previous',
77
+ next: 'Next',
78
+ jumpTo: 'Jump to page',
79
+ jumpGo: 'Go',
80
+ jumpInputLabel: 'Page number',
81
+ backToBlog: 'Back to blog',
82
+ related: 'Related',
83
+ regenerate: 'Regenerate',
84
+ toastP10: 'context parsed 10%',
85
+ toastP30: 'context parsed 30%',
86
+ toastP60: 'inference stable 60%',
87
+ toastDone: 'output finalized',
88
+ },
89
+ },
90
+ ja: {
91
+ siteTitle: 'Angle Feint',
92
+ siteDescription: '映画的なWebインターフェースとAI時代のエンジニアリング考察。',
93
+ langLabel: '言語',
94
+ nav: { home: 'ホーム', blog: 'ブログ', about: 'プロフィール', status: 'system: online' },
95
+ home: {
96
+ hero: 'このサイトの紹介文と、読者がどんな記事を期待できるかを書いてください。',
97
+ latest: '最新記事',
98
+ viewAll: 'すべての記事を見る',
99
+ noPosts: 'この言語の記事はまだありません。',
100
+ },
101
+ about: {
102
+ title: 'About — Hacker Ethos',
103
+ description: '私について、作るもの、そしてハッカー精神。',
104
+ who: '私について',
105
+ what: '作るもの',
106
+ ethos: 'ハッカー精神',
107
+ now: '現在',
108
+ contact: '連絡先',
109
+ regenerate: '再生成',
110
+ },
111
+ blog: {
112
+ title: 'ブログ',
113
+ pageTitle: 'ブログ - ページ',
114
+ archiveDescription: 'AI時代のクラフト、Web開発、システム設計に関する記事。',
115
+ pageDescription: 'ブログ一覧ページ',
116
+ previous: '前へ',
117
+ next: '次へ',
118
+ jumpTo: 'ページ移動',
119
+ jumpGo: '移動',
120
+ jumpInputLabel: 'ページ番号',
121
+ backToBlog: 'ブログへ戻る',
122
+ related: '関連記事',
123
+ regenerate: '再生成',
124
+ toastP10: '文脈解析 10%',
125
+ toastP30: '文脈解析 30%',
126
+ toastP60: '推論安定 60%',
127
+ toastDone: '出力確定',
128
+ },
129
+ },
130
+ ko: {
131
+ siteTitle: 'Angle Feint',
132
+ siteDescription: '시네마틱 웹 인터페이스와 AI 시대 엔지니어링 에세이.',
133
+ langLabel: '언어',
134
+ nav: { home: '홈', blog: '블로그', about: '소개', status: 'system: online' },
135
+ home: {
136
+ hero: '사이트 소개와 방문자가 어떤 글을 기대할 수 있는지 간단히 작성하세요.',
137
+ latest: '최신 글',
138
+ viewAll: '모든 글 보기',
139
+ noPosts: '이 언어에는 아직 게시물이 없습니다.',
140
+ },
141
+ about: {
142
+ title: 'About — Hacker Ethos',
143
+ description: '나와 내가 만드는 것, 그리고 해커 정신.',
144
+ who: '나는 누구인가',
145
+ what: '무엇을 만드는가',
146
+ ethos: '해커 정신',
147
+ now: '지금',
148
+ contact: '연락처',
149
+ regenerate: '재생성',
150
+ },
151
+ blog: {
152
+ title: '블로그',
153
+ pageTitle: '블로그 - 페이지',
154
+ archiveDescription: 'AI 시대의 개발 감각, 웹 엔지니어링, 시스템 아키텍처 에세이.',
155
+ pageDescription: '블로그 아카이브 페이지',
156
+ previous: '이전',
157
+ next: '다음',
158
+ jumpTo: '페이지 이동',
159
+ jumpGo: '이동',
160
+ jumpInputLabel: '페이지 번호',
161
+ backToBlog: '블로그로 돌아가기',
162
+ related: '관련 글',
163
+ regenerate: '재생성',
164
+ toastP10: '컨텍스트 파싱 10%',
165
+ toastP30: '컨텍스트 파싱 30%',
166
+ toastP60: '추론 안정화 60%',
167
+ toastDone: '출력 완료',
168
+ },
169
+ },
170
+ es: {
171
+ siteTitle: 'Angle Feint',
172
+ siteDescription: 'Interfaces web cinematográficas y ensayos de ingeniería en la era de IA.',
173
+ langLabel: 'Idioma',
174
+ nav: { home: 'Inicio', blog: 'Blog', about: 'Sobre mí', status: 'system: online' },
175
+ home: {
176
+ hero: 'Escribe una breve presentación del sitio y qué tipo de contenido encontrarán tus lectores.',
177
+ latest: 'Últimas publicaciones',
178
+ viewAll: 'Ver todas las publicaciones',
179
+ noPosts: 'Aún no hay publicaciones en este idioma.',
180
+ },
181
+ about: {
182
+ title: 'About — Hacker Ethos',
183
+ description: 'Quién soy, qué construyo y el ethos hacker detrás de mi trabajo.',
184
+ who: 'Quién soy',
185
+ what: 'Qué construyo',
186
+ ethos: 'Ethos hacker',
187
+ now: 'Ahora',
188
+ contact: 'Contacto',
189
+ regenerate: 'Regenerar',
190
+ },
191
+ blog: {
192
+ title: 'Blog',
193
+ pageTitle: 'Blog - Página',
194
+ archiveDescription:
195
+ 'Ensayos sobre oficio en la era de IA, ingeniería web y arquitectura de sistemas.',
196
+ pageDescription: 'Página del archivo del blog',
197
+ previous: 'Anterior',
198
+ next: 'Siguiente',
199
+ jumpTo: 'Ir a página',
200
+ jumpGo: 'Ir',
201
+ jumpInputLabel: 'Número de página',
202
+ backToBlog: 'Volver al blog',
203
+ related: 'Relacionados',
204
+ regenerate: 'Regenerar',
205
+ toastP10: 'contexto analizado 10%',
206
+ toastP30: 'contexto analizado 30%',
207
+ toastP60: 'inferencia estable 60%',
208
+ toastDone: 'salida finalizada',
209
+ },
210
+ },
211
+ zh: {
212
+ siteTitle: 'Angle Feint',
213
+ siteDescription: '电影感网页界面与 AI 时代工程实践文章。',
214
+ langLabel: '语言',
215
+ nav: { home: '首页', blog: '博客', about: '关于', status: 'system: online' },
216
+ home: {
217
+ hero: '在这里写一段站点简介，并告诉读者你将发布什么类型的内容。',
218
+ latest: '最新文章',
219
+ viewAll: '查看全部文章',
220
+ noPosts: '该语言暂时没有文章。',
221
+ },
222
+ about: {
223
+ title: 'About — Hacker Ethos',
224
+ description: '我是谁、我在做什么，以及背后的黑客精神。',
225
+ who: '我是谁',
226
+ what: '我在构建什么',
227
+ ethos: '黑客精神',
228
+ now: '现在',
229
+ contact: '联系',
230
+ regenerate: '重新生成',
231
+ },
232
+ blog: {
233
+ title: '博客',
234
+ pageTitle: '博客 - 第',
235
+ archiveDescription: '关于 AI 时代开发、Web 工程与系统架构的文章。',
236
+ pageDescription: '博客归档页',
237
+ previous: '上一页',
238
+ next: '下一页',
239
+ jumpTo: '跳转到页',
240
+ jumpGo: '跳转',
241
+ jumpInputLabel: '页码',
242
+ backToBlog: '返回博客',
243
+ related: '相关文章',
244
+ regenerate: '重新生成',
245
+ toastP10: '语境解析 10%',
246
+ toastP30: '语境解析 30%',
247
+ toastP60: '推理稳定 60%',
248
+ toastDone: '输出完成',
249
+ },
250
+ },
232
251
  };
233
252
 
234
253
  export function getMessages(locale: Locale): Messages {
235
- return DEFAULT_MESSAGES[locale];
254
+ return DEFAULT_MESSAGES[locale];
236
255
  }
package/src/styles/ai/prose.css CHANGED
@@ -17,12 +17,13 @@ body.ai-page .ai-content .prose {
17
17
  rgba(55, 65, 80, 0.14) 2px,
18
18
  rgba(55, 65, 80, 0.14) 4px
19
19
  ),
20
- linear-gradient(135deg, rgba(14, 18, 24, 0.97) 0%, rgba(10, 14, 20, 0.95) 50%, rgba(6, 10, 16, 0.97) 100%),
21
- radial-gradient(
22
- ellipse 80% 50% at 50% 0%,
23
- rgba(70, 110, 150, 0.06),
24
- transparent 60%
25
- );
20
+ linear-gradient(
21
+ 135deg,
22
+ rgba(14, 18, 24, 0.97) 0%,
23
+ rgba(10, 14, 20, 0.95) 50%,
24
+ rgba(6, 10, 16, 0.97) 100%
25
+ ),
26
+ radial-gradient(ellipse 80% 50% at 50% 0%, rgba(70, 110, 150, 0.06), transparent 60%);
26
27
  backdrop-filter: blur(16px) saturate(1.1);
27
28
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
28
29
  border-radius: 8px;
@@ -116,7 +117,7 @@ body.ai-page .ai-content .prose .ai-prose-body {
116
117
  }
117
118
  /* GPU 金属边框：铝银质感 */
118
119
  body.ai-page .ai-content .prose::before {
119
- content: "";
120
+ content: '';
120
121
  position: absolute;
121
122
  inset: -1px;
122
123
  border-radius: inherit;
@@ -145,14 +146,21 @@ body.ai-page .ai-content .prose:hover::before {
145
146
  }
146
147
  /* 链接 hover 光晕/脉冲 */
147
148
  body.ai-page .ai-content .prose a {
149
+ color: rgba(142, 220, 248, 0.96);
148
150
  text-decoration: none;
149
151
  padding: 0 2px;
150
152
  border-radius: 2px;
153
+ text-shadow:
154
+ 0 0 8px rgba(110, 198, 238, 0.24),
155
+ 0 0 16px rgba(95, 184, 226, 0.14);
151
156
  transition:
152
157
  box-shadow 0.25s ease,
153
158
  text-shadow 0.25s ease,
154
159
  color 0.25s ease;
155
160
  }
161
+ body.ai-page .ai-content .prose a:visited {
162
+ color: rgba(156, 210, 255, 0.94);
163
+ }
156
164
  body.ai-page .ai-content .prose a:hover {
157
165
  box-shadow:
158
166
  0 0 12px rgba(140, 210, 242, 0.4),
@@ -196,7 +204,7 @@ body.ai-page .ai-content .prose blockquote {
196
204
  inset 0 0 20px rgba(8, 28, 44, 0.26);
197
205
  }
198
206
  body.ai-page .ai-content .prose blockquote::before {
199
- content: ">";
207
+ content: '>';
200
208
  position: absolute;
201
209
  left: 0.6em;
202
210
  top: 1em;
@@ -211,7 +219,7 @@ body.ai-page .ai-content .prose pre {
211
219
  padding-top: 2.2em;
212
220
  }
213
221
  body.ai-page .ai-content .prose pre::before {
214
- content: "● ● ● runtime";
222
+ content: '● ● ● runtime';
215
223
  position: absolute;
216
224
  left: 1em;
217
225
  top: 0.9em;
@@ -223,7 +231,7 @@ body.ai-page .ai-content .prose pre::before {
223
231
  text-shadow: 0 0 8px rgba(124, 206, 246, 0.28);
224
232
  }
225
233
  body.ai-page .ai-content .prose pre::after {
226
- content: "";
234
+ content: '';
227
235
  position: absolute;
228
236
  inset: 0;
229
237
  pointer-events: none;
@@ -240,7 +248,7 @@ body.ai-page .ai-content .prose pre:hover::after {
240
248
  transform: translateX(130%);
241
249
  }
242
250
  body.ai-page .ai-content .prose blockquote::after {
243
- content: "reference";
251
+ content: 'reference';
244
252
  position: absolute;
245
253
  right: 1em;
246
254
  top: 0.9em;
package/src/styles/blog-list.css CHANGED
@@ -1,35 +1,276 @@
1
- /* Pagination styles for cyber blog list pages */
1
+ /* Cyber pagination system: base + variant styles */
2
+ body.cyber-page .pagination-wrap {
3
+ --pg-accent: rgba(224, 170, 236, 0.95);
4
+ --pg-border: rgba(198, 156, 224, 0.42);
5
+ --pg-fg: rgb(212, 196, 232);
6
+ --pg-bg: rgba(126, 67, 142, 0.12);
7
+ --pg-glow: rgba(226, 166, 236, 0.45);
8
+ margin-top: 2.4rem;
9
+ display: grid;
10
+ gap: 0.8rem;
11
+ justify-items: center;
12
+ }
13
+
2
14
  body.cyber-page .pagination {
3
- display: flex;
4
- justify-content: center;
5
- align-items: center;
6
- gap: 0.5rem;
7
- margin-top: 2.5rem;
8
- padding: 1.5rem 0;
9
- }
10
-
11
- body.cyber-page .pagination a {
12
- padding: 0.5rem 1rem;
13
- color: rgb(212, 196, 232);
14
- text-decoration: none;
15
- border: 1px solid rgba(198, 156, 224, 0.42);
16
- border-radius: 4px;
17
- transition: 0.25s ease;
18
- text-shadow: 0 0 10px rgba(214, 152, 226, 0.2);
19
- }
20
-
21
- body.cyber-page .pagination a:hover {
22
- border-color: rgba(226, 166, 236, 0.88);
23
- text-shadow: 0 0 15px rgba(232, 174, 242, 0.5);
24
- box-shadow: 0 0 15px rgba(222, 154, 228, 0.26);
25
- }
26
-
27
- body.cyber-page .pagination a.current {
28
- background: rgba(188, 122, 214, 0.2);
29
- border-color: rgb(224, 170, 236);
30
- color: rgb(244, 224, 252);
31
- text-shadow: 0 0 15px rgba(232, 174, 242, 0.48);
32
- box-shadow:
33
- 0 0 20px rgba(118, 198, 255, 0.24),
34
- 0 0 12px rgba(220, 152, 230, 0.22);
15
+ display: flex;
16
+ flex-wrap: wrap;
17
+ justify-content: center;
18
+ align-items: center;
19
+ gap: 0.5rem;
20
+ }
21
+
22
+ body.cyber-page .pagination .pg-item {
23
+ display: inline-flex;
24
+ align-items: center;
25
+ justify-content: center;
26
+ min-width: 2.4rem;
27
+ padding: 0.52rem 0.82rem;
28
+ text-decoration: none;
29
+ color: var(--pg-fg);
30
+ border: 1px solid var(--pg-border);
31
+ background: rgba(9, 8, 16, 0.58);
32
+ border-radius: 6px;
33
+ text-shadow: 0 0 10px rgba(214, 152, 226, 0.2);
34
+ transition:
35
+ transform 0.2s ease,
36
+ box-shadow 0.25s ease,
37
+ border-color 0.25s ease,
38
+ background 0.25s ease;
39
+ --item-accent: var(--pg-accent);
40
+ --item-border: var(--pg-border);
41
+ --item-bg: var(--pg-bg);
42
+ --item-glow: var(--pg-glow);
43
+ border-color: var(--item-border);
44
+ }
45
+
46
+ body.cyber-page .pagination .pg-item:hover {
47
+ transform: translateY(-1px);
48
+ border-color: var(--item-accent);
49
+ box-shadow: 0 0 15px var(--item-glow);
50
+ }
51
+
52
+ body.cyber-page .pagination .pg-item.current {
53
+ background: var(--item-bg);
54
+ border-color: var(--item-accent);
55
+ color: rgb(246, 229, 252);
56
+ box-shadow:
57
+ 0 0 18px rgba(118, 198, 255, 0.22),
58
+ 0 0 12px var(--item-glow);
59
+ }
60
+
61
+ body.cyber-page .pagination .pg-item.pg-nav {
62
+ padding-inline: 0.92rem;
63
+ }
64
+
65
+ body.cyber-page .pagination .pg-item.pg-ellipsis {
66
+ border-style: dashed;
67
+ pointer-events: none;
68
+ opacity: 0.72;
69
+ }
70
+
71
+ body.cyber-page .pagination-jump {
72
+ display: inline-flex;
73
+ align-items: center;
74
+ gap: 0.52rem;
75
+ padding: 0.42rem 0.56rem;
76
+ border: 1px solid rgba(198, 156, 224, 0.32);
77
+ border-radius: 8px;
78
+ background: rgba(8, 8, 14, 0.62);
79
+ }
80
+
81
+ body.cyber-page .pagination-jump-label {
82
+ font-size: 0.86rem;
83
+ letter-spacing: 0.02em;
84
+ color: rgb(176, 152, 201);
85
+ }
86
+
87
+ body.cyber-page .pagination-jump-input {
88
+ width: 4.2rem;
89
+ padding: 0.32rem 0.4rem;
90
+ border: 1px solid rgba(198, 156, 224, 0.42);
91
+ border-radius: 5px;
92
+ background: rgba(16, 14, 24, 0.9);
93
+ color: rgb(230, 219, 241);
94
+ font-size: 0.94rem;
95
+ }
96
+
97
+ body.cyber-page .pagination-jump-input:focus {
98
+ outline: none;
99
+ border-color: var(--pg-accent);
100
+ box-shadow: 0 0 10px var(--pg-glow);
101
+ }
102
+
103
+ body.cyber-page .pagination-jump-btn {
104
+ display: inline-flex;
105
+ align-items: center;
106
+ justify-content: center;
107
+ min-width: 2.7rem;
108
+ padding: 0.34rem 0.62rem;
109
+ border: 1px solid rgba(198, 156, 224, 0.5);
110
+ border-radius: 5px;
111
+ background: rgba(122, 69, 144, 0.25);
112
+ color: rgb(239, 227, 248);
113
+ font-size: 0.88rem;
114
+ font-weight: 600;
115
+ line-height: 1;
116
+ white-space: nowrap;
117
+ cursor: pointer;
118
+ }
119
+
120
+ body.cyber-page .pagination-jump-btn:hover {
121
+ border-color: var(--pg-accent);
122
+ box-shadow: 0 0 12px var(--pg-glow);
123
+ }
124
+
125
+ /* v1: soft neon default */
126
+ body.cyber-page .pagination-wrap.cyber-pg-v1 {
127
+ --pg-accent: rgba(224, 170, 236, 0.95);
128
+ --pg-border: rgba(198, 156, 224, 0.42);
129
+ --pg-bg: rgba(126, 67, 142, 0.12);
130
+ --pg-glow: rgba(226, 166, 236, 0.45);
131
+ }
132
+
133
+ /* v2: cyan edge */
134
+ body.cyber-page .pagination-wrap.cyber-pg-v2 {
135
+ --pg-accent: rgba(144, 237, 255, 0.95);
136
+ --pg-border: rgba(117, 210, 255, 0.52);
137
+ --pg-bg: rgba(54, 114, 134, 0.2);
138
+ --pg-glow: rgba(127, 221, 255, 0.5);
139
+ }
140
+
141
+ /* v3: magenta pulse */
142
+ body.cyber-page .pagination-wrap.cyber-pg-v3 {
143
+ --pg-accent: rgba(247, 132, 214, 0.95);
144
+ --pg-border: rgba(231, 116, 201, 0.58);
145
+ --pg-bg: rgba(140, 40, 110, 0.23);
146
+ --pg-glow: rgba(244, 126, 210, 0.58);
147
+ }
148
+
149
+ /* v4: electric violet */
150
+ body.cyber-page .pagination-wrap.cyber-pg-v4 {
151
+ --pg-accent: rgba(183, 139, 255, 0.95);
152
+ --pg-border: rgba(168, 123, 245, 0.55);
153
+ --pg-bg: rgba(95, 61, 173, 0.23);
154
+ --pg-glow: rgba(185, 140, 255, 0.54);
155
+ }
156
+
157
+ /* v5: acid green */
158
+ body.cyber-page .pagination-wrap.cyber-pg-v5 {
159
+ --pg-accent: rgba(157, 255, 168, 0.95);
160
+ --pg-border: rgba(125, 240, 144, 0.55);
161
+ --pg-bg: rgba(44, 118, 56, 0.26);
162
+ --pg-glow: rgba(145, 252, 167, 0.48);
163
+ }
164
+
165
+ /* v6: amber warning */
166
+ body.cyber-page .pagination-wrap.cyber-pg-v6 {
167
+ --pg-accent: rgba(255, 194, 120, 0.95);
168
+ --pg-border: rgba(241, 176, 96, 0.56);
169
+ --pg-bg: rgba(123, 75, 20, 0.26);
170
+ --pg-glow: rgba(255, 188, 110, 0.45);
171
+ }
172
+
173
+ /* v7: frosted blue */
174
+ body.cyber-page .pagination-wrap.cyber-pg-v7 {
175
+ --pg-accent: rgba(162, 214, 255, 0.95);
176
+ --pg-border: rgba(131, 189, 238, 0.58);
177
+ --pg-bg: rgba(54, 89, 133, 0.24);
178
+ --pg-glow: rgba(160, 211, 255, 0.52);
179
+ }
180
+
181
+ /* v8: hot pink grid */
182
+ body.cyber-page .pagination-wrap.cyber-pg-v8 {
183
+ --pg-accent: rgba(255, 132, 189, 0.95);
184
+ --pg-border: rgba(239, 107, 172, 0.58);
185
+ --pg-bg: rgba(132, 42, 90, 0.25);
186
+ --pg-glow: rgba(255, 130, 185, 0.56);
187
+ }
188
+
189
+ /* v9: ghost white phosphor */
190
+ body.cyber-page .pagination-wrap.cyber-pg-v9 {
191
+ --pg-accent: rgba(243, 244, 250, 0.92);
192
+ --pg-border: rgba(210, 214, 232, 0.58);
193
+ --pg-bg: rgba(113, 125, 164, 0.22);
194
+ --pg-glow: rgba(223, 229, 255, 0.56);
195
+ }
196
+
197
+ /* Per-item variant map: each pagination button can use a different neon style */
198
+ body.cyber-page .pagination .pg-item.pg-var-1 {
199
+ --item-accent: rgba(224, 170, 236, 0.95);
200
+ --item-border: rgba(198, 156, 224, 0.42);
201
+ --item-bg: rgba(126, 67, 142, 0.12);
202
+ --item-glow: rgba(226, 166, 236, 0.45);
203
+ }
204
+ body.cyber-page .pagination .pg-item.pg-var-2 {
205
+ --item-accent: rgba(144, 237, 255, 0.95);
206
+ --item-border: rgba(117, 210, 255, 0.52);
207
+ --item-bg: rgba(54, 114, 134, 0.2);
208
+ --item-glow: rgba(127, 221, 255, 0.5);
209
+ }
210
+ body.cyber-page .pagination .pg-item.pg-var-3 {
211
+ --item-accent: rgba(247, 132, 214, 0.95);
212
+ --item-border: rgba(231, 116, 201, 0.58);
213
+ --item-bg: rgba(140, 40, 110, 0.23);
214
+ --item-glow: rgba(244, 126, 210, 0.58);
215
+ }
216
+ body.cyber-page .pagination .pg-item.pg-var-4 {
217
+ --item-accent: rgba(183, 139, 255, 0.95);
218
+ --item-border: rgba(168, 123, 245, 0.55);
219
+ --item-bg: rgba(95, 61, 173, 0.23);
220
+ --item-glow: rgba(185, 140, 255, 0.54);
221
+ }
222
+ body.cyber-page .pagination .pg-item.pg-var-5 {
223
+ --item-accent: rgba(157, 255, 168, 0.95);
224
+ --item-border: rgba(125, 240, 144, 0.55);
225
+ --item-bg: rgba(44, 118, 56, 0.26);
226
+ --item-glow: rgba(145, 252, 167, 0.48);
227
+ }
228
+ body.cyber-page .pagination .pg-item.pg-var-6 {
229
+ --item-accent: rgba(255, 194, 120, 0.95);
230
+ --item-border: rgba(241, 176, 96, 0.56);
231
+ --item-bg: rgba(123, 75, 20, 0.26);
232
+ --item-glow: rgba(255, 188, 110, 0.45);
233
+ }
234
+ body.cyber-page .pagination .pg-item.pg-var-7 {
235
+ --item-accent: rgba(162, 214, 255, 0.95);
236
+ --item-border: rgba(131, 189, 238, 0.58);
237
+ --item-bg: rgba(54, 89, 133, 0.24);
238
+ --item-glow: rgba(160, 211, 255, 0.52);
239
+ }
240
+ body.cyber-page .pagination .pg-item.pg-var-8 {
241
+ --item-accent: rgba(255, 132, 189, 0.95);
242
+ --item-border: rgba(239, 107, 172, 0.58);
243
+ --item-bg: rgba(132, 42, 90, 0.25);
244
+ --item-glow: rgba(255, 130, 185, 0.56);
245
+ }
246
+ body.cyber-page .pagination .pg-item.pg-var-9 {
247
+ --item-accent: rgba(243, 244, 250, 0.92);
248
+ --item-border: rgba(210, 214, 232, 0.58);
249
+ --item-bg: rgba(113, 125, 164, 0.22);
250
+ --item-glow: rgba(223, 229, 255, 0.56);
251
+ }
252
+
253
+ @media (max-width: 720px) {
254
+ body.cyber-page .pagination {
255
+ gap: 0.36rem;
256
+ }
257
+
258
+ body.cyber-page .pagination .pg-item {
259
+ min-width: 2rem;
260
+ padding: 0.42rem 0.62rem;
261
+ font-size: 0.86rem;
262
+ }
263
+
264
+ body.cyber-page .pagination-jump {
265
+ gap: 0.42rem;
266
+ }
267
+
268
+ body.cyber-page .pagination-jump-label {
269
+ font-size: 0.78rem;
270
+ }
271
+
272
+ body.cyber-page .pagination-jump-input {
273
+ width: 3.5rem;
274
+ font-size: 0.84rem;
275
+ }
35
276
  }
package/src/styles/theme-cyber.css CHANGED
@@ -2,9 +2,9 @@
2
2
  /* ========== Blade Runner 博客列表页 (body.cyber-page) ========== */
3
3
  body.cyber-page {
4
4
  background: #090b12 !important;
5
- background-image: none !important;
6
- background-size: auto !important;
7
- min-height: 100vh !important;
5
+ background-image: none !important;
6
+ background-size: auto !important;
7
+ min-height: 100vh !important;
8
8
  --chrome-bg: rgba(7, 13, 24, 0.72);
9
9
  --chrome-border: rgba(112, 196, 255, 0.2);
10
10
  --chrome-link: rgba(196, 226, 255, 0.92);
@@ -13,10 +13,10 @@ body.cyber-page {
13
13
  --chrome-text-muted: rgba(156, 188, 224, 0.76);
14
14
  }
15
15
  body.cyber-page::before {
16
- content: "";
17
- position: fixed;
18
- inset: 0;
19
- z-index: -1;
16
+ content: '';
17
+ position: fixed;
18
+ inset: 0;
19
+ z-index: -1;
20
20
  background: linear-gradient(
21
21
  180deg,
22
22
  #05070b 0%,
@@ -27,28 +27,16 @@ body.cyber-page::before {
27
27
  );
28
28
  }
29
29
  body.cyber-page::after {
30
- content: "";
31
- position: fixed;
32
- inset: 0;
33
- z-index: -1;
30
+ content: '';
31
+ position: fixed;
32
+ inset: 0;
33
+ z-index: -1;
34
34
  background:
35
- radial-gradient(
36
- ellipse 82% 52% at 50% 18%,
37
- rgba(110, 186, 255, 0.14) 0%,
38
- transparent 50%
39
- ),
40
- radial-gradient(
41
- ellipse 62% 42% at 82% 78%,
42
- rgba(255, 132, 88, 0.06) 0%,
43
- transparent 40%
44
- ),
45
- radial-gradient(
46
- ellipse 52% 37% at 20% 62%,
47
- rgba(226, 150, 214, 0.06) 0%,
48
- transparent 45%
49
- );
35
+ radial-gradient(ellipse 82% 52% at 50% 18%, rgba(110, 186, 255, 0.14) 0%, transparent 50%),
36
+ radial-gradient(ellipse 62% 42% at 82% 78%, rgba(255, 132, 88, 0.06) 0%, transparent 40%),
37
+ radial-gradient(ellipse 52% 37% at 20% 62%, rgba(226, 150, 214, 0.06) 0%, transparent 45%);
50
38
  animation: cyber-fog-drift 20s ease-in-out infinite alternate;
51
- pointer-events: none;
39
+ pointer-events: none;
52
40
  }
53
41
  @keyframes cyber-fog-drift {
54
42
  0% {
@@ -61,17 +49,17 @@ body.cyber-page::after {
61
49
  }
62
50
  }
63
51
  body.cyber-page .cyber-rain {
64
- position: fixed;
65
- inset: 0;
66
- pointer-events: none;
52
+ position: fixed;
53
+ inset: 0;
54
+ pointer-events: none;
67
55
  z-index: 6;
68
- overflow: hidden;
56
+ overflow: hidden;
69
57
  contain: layout paint;
70
58
  }
71
59
  /* Blade Runner: 雨滴 - 白色中脏脏的感觉，非琥珀也非冷青 */
72
60
  body.cyber-page .cyber-rain-drop {
73
- position: absolute;
74
- top: -20px;
61
+ position: absolute;
62
+ top: -20px;
75
63
  width: 6px;
76
64
  height: 38px;
77
65
  clip-path: polygon(1.5px 0, 4.5px 0, 6px 100%, 0 100%);
@@ -83,7 +71,7 @@ body.cyber-page .cyber-rain-drop {
83
71
  rgba(195, 190, 182, 0.52) 70%,
84
72
  transparent 100%
85
73
  );
86
- animation: cyber-rain-fall linear infinite;
74
+ animation: cyber-rain-fall linear infinite;
87
75
  }
88
76
  @keyframes cyber-rain-fall {
89
77
  to {
@@ -92,7 +80,7 @@ body.cyber-page .cyber-rain-drop {
92
80
  }
93
81
  /* AI page: scanlines only on header and footer; fade on hover */
94
82
  body.cyber-page .cyber-spotlight {
95
- position: fixed;
83
+ position: fixed;
96
84
  top: 0;
97
85
  left: 0;
98
86
  width: calc(hypot(100vw, 100vh) * 1.3 / 1.41421356);
@@ -103,7 +91,7 @@ body.cyber-page .cyber-spotlight {
103
91
  }
104
92
  body.cyber-page .cyber-spotlight-tl {
105
93
  position: absolute;
106
- inset: 0;
94
+ inset: 0;
107
95
  transform-origin: 0 0;
108
96
  background: conic-gradient(
109
97
  from 180deg at 0 0,
@@ -159,21 +147,9 @@ body.cyber-page .cyber-flicker {
159
147
  inset: 0;
160
148
  contain: layout paint;
161
149
  background:
162
- radial-gradient(
163
- ellipse 25% 30% at 85% 20%,
164
- rgba(255, 146, 96, 0.18) 0%,
165
- transparent 55%
166
- ),
167
- radial-gradient(
168
- ellipse 20% 24% at 20% 68%,
169
- rgba(96, 182, 255, 0.28) 0%,
170
- transparent 55%
171
- ),
172
- radial-gradient(
173
- ellipse 28% 35% at 70% 85%,
174
- rgba(224, 146, 212, 0.2) 0%,
175
- transparent 55%
176
- );
150
+ radial-gradient(ellipse 25% 30% at 85% 20%, rgba(255, 146, 96, 0.18) 0%, transparent 55%),
151
+ radial-gradient(ellipse 20% 24% at 20% 68%, rgba(96, 182, 255, 0.28) 0%, transparent 55%),
152
+ radial-gradient(ellipse 28% 35% at 70% 85%, rgba(224, 146, 212, 0.2) 0%, transparent 55%);
177
153
  animation: cyber-neon-flicker-glow 6s ease-in-out infinite;
178
154
  pointer-events: none;
179
155
  z-index: 0;
@@ -198,21 +174,9 @@ body.cyber-page .cyber-haze {
198
174
  inset: 0;
199
175
  contain: layout paint;
200
176
  background:
201
- radial-gradient(
202
- ellipse 100% 80% at 50% 50%,
203
- rgba(52, 84, 128, 0.08) 0%,
204
- transparent 60%
205
- ),
206
- radial-gradient(
207
- ellipse 40% 30% at 30% 30%,
208
- rgba(224, 144, 208, 0.05) 0%,
209
- transparent 50%
210
- ),
211
- radial-gradient(
212
- ellipse 35% 25% at 70% 70%,
213
- rgba(255, 134, 92, 0.04) 0%,
214
- transparent 50%
215
- );
177
+ radial-gradient(ellipse 100% 80% at 50% 50%, rgba(52, 84, 128, 0.08) 0%, transparent 60%),
178
+ radial-gradient(ellipse 40% 30% at 30% 30%, rgba(224, 144, 208, 0.05) 0%, transparent 50%),
179
+ radial-gradient(ellipse 35% 25% at 70% 70%, rgba(255, 134, 92, 0.04) 0%, transparent 50%);
216
180
  animation: cyber-haze-drift 20s ease-in-out infinite alternate;
217
181
  pointer-events: none;
218
182
  z-index: 1;
@@ -231,13 +195,9 @@ body.cyber-page .cyber-vignette {
231
195
  position: fixed;
232
196
  inset: 0;
233
197
  contain: layout paint;
234
- background: radial-gradient(
235
- ellipse 80% 80% at 50% 50%,
236
- transparent 40%,
237
- rgba(0, 0, 0, 0.4) 100%
238
- );
239
- pointer-events: none;
240
- z-index: 3;
198
+ background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
199
+ pointer-events: none;
200
+ z-index: 3;
241
201
  }
242
202
  body.cyber-page .cyber-rain-drop--thin {
243
203
  width: 4px;
@@ -306,10 +266,10 @@ body.cyber-page header {
306
266
  -webkit-backdrop-filter: blur(3px);
307
267
  }
308
268
  body.cyber-page main {
309
- position: relative;
269
+ position: relative;
310
270
  z-index: 5;
311
- width: 960px;
312
- padding-top: calc(3em + 56px);
271
+ width: 960px;
272
+ padding-top: calc(3em + 56px);
313
273
  }
314
274
  body.cyber-page .title,
315
275
  body.cyber-page .date {
@@ -319,23 +279,23 @@ body.cyber-page .date {
319
279
  color: rgba(150, 186, 228, 0.68);
320
280
  }
321
281
  body.cyber-page ul {
322
- display: flex;
323
- flex-wrap: wrap;
324
- gap: 2rem;
325
- list-style: none;
326
- margin: 0;
327
- padding: 0;
282
+ display: flex;
283
+ flex-wrap: wrap;
284
+ gap: 2rem;
285
+ list-style: none;
286
+ margin: 0;
287
+ padding: 0;
328
288
  }
329
289
  body.cyber-page ul li {
330
- width: calc(50% - 1rem);
290
+ width: calc(50% - 1rem);
331
291
  }
332
292
  body.cyber-page ul li * {
333
- text-decoration: none;
293
+ text-decoration: none;
334
294
  }
335
295
  body.cyber-page ul li:first-child {
336
- width: 100%;
337
- margin-bottom: 1rem;
338
- text-align: center;
296
+ width: 100%;
297
+ margin-bottom: 1rem;
298
+ text-align: center;
339
299
  }
340
300
  body.cyber-page ul li:first-child img {
341
301
  width: 100%;
@@ -344,9 +304,9 @@ body.cyber-page ul li:first-child .title {
344
304
  font-size: 2.369rem;
345
305
  }
346
306
  body.cyber-page ul li a {
347
- display: block;
348
- position: relative;
349
- padding: 1rem;
307
+ display: block;
308
+ position: relative;
309
+ padding: 1rem;
350
310
  border-radius: 4px;
351
311
  border: 1px solid rgba(116, 194, 255, 0.24);
352
312
  box-shadow:
@@ -423,18 +383,18 @@ body.cyber-page ul li a:hover .date {
423
383
  0 0 20px rgba(218, 148, 210, 0.26);
424
384
  }
425
385
  body.cyber-page .img-wrapper {
426
- position: relative;
386
+ position: relative;
427
387
  margin-bottom: 0.5rem;
428
388
  border-radius: 4px;
429
- overflow: hidden;
389
+ overflow: hidden;
430
390
  }
431
391
  /* 水平扫线 - 日式樱花+赛博蓝 */
432
392
  body.cyber-page .img-wrapper::before {
433
- content: "";
434
- position: absolute;
435
- left: 0;
436
- right: 0;
437
- top: -20px;
393
+ content: '';
394
+ position: absolute;
395
+ left: 0;
396
+ right: 0;
397
+ top: -20px;
438
398
  height: 10px;
439
399
  z-index: 3;
440
400
  background: linear-gradient(
@@ -457,14 +417,14 @@ body.cyber-page ul li a:hover .img-wrapper::before {
457
417
  top: 100%;
458
418
  }
459
419
  body.cyber-page .img-wrapper::after {
460
- content: "";
420
+ content: '';
461
421
  position: absolute;
462
422
  inset: 0;
463
- z-index: 2;
423
+ z-index: 2;
464
424
  box-shadow:
465
425
  inset 0 0 25px rgba(108, 190, 255, 0.16),
466
426
  inset 0 0 50px rgba(224, 148, 212, 0.1);
467
- pointer-events: none;
427
+ pointer-events: none;
468
428
  opacity: 0;
469
429
  transition: opacity 0.4s ease;
470
430
  }
@@ -472,18 +432,16 @@ body.cyber-page ul li a:hover .img-wrapper::after {
472
432
  opacity: 1;
473
433
  }
474
434
  body.cyber-page ul li img {
475
- display: block;
476
- width: 100%;
477
- height: auto;
478
- filter: saturate(0.75) contrast(1.05) brightness(0.88) sepia(0.15)
479
- hue-rotate(-2deg);
435
+ display: block;
436
+ width: 100%;
437
+ height: auto;
438
+ filter: saturate(0.75) contrast(1.05) brightness(0.88) sepia(0.15) hue-rotate(-2deg);
480
439
  transition:
481
440
  filter 0.3s,
482
441
  box-shadow 0.3s;
483
442
  }
484
443
  body.cyber-page ul li a:hover img {
485
- filter: saturate(0.88) contrast(1.11) brightness(0.94) sepia(0.08)
486
- hue-rotate(-6deg);
444
+ filter: saturate(0.88) contrast(1.11) brightness(0.94) sepia(0.08) hue-rotate(-6deg);
487
445
  box-shadow:
488
446
  0 0 15px rgba(116, 194, 255, 0.22),
489
447
  0 0 30px rgba(224, 148, 212, 0.2);
@@ -491,7 +449,15 @@ body.cyber-page ul li a:hover img {
491
449
  body.cyber-page .title {
492
450
  margin: 0;
493
451
  font-size: 1.2rem;
494
- line-height: 1;
452
+ line-height: 1.2;
453
+ min-height: calc(1.2em * 2);
454
+ display: -webkit-box;
455
+ -webkit-line-clamp: 2;
456
+ line-clamp: 2;
457
+ -webkit-box-orient: vertical;
458
+ overflow: hidden;
459
+ text-overflow: ellipsis;
460
+ word-break: break-word;
495
461
  transition:
496
462
  color 0.2s,
497
463
  text-shadow 0.2s;