@anglefeint/astro-theme 0.1.26 → 0.1.27

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 (4) 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/blog-list.css +274 -33
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.27",
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/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
  }