@kids-reporter/routing-ui 0.1.0-alpha.3 → 0.1.0-alpha.4
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.
- package/dist/components/input.js +1 -1
- package/dist/components/input.js.map +1 -1
- package/dist/constants/default-values.js +1 -1
- package/dist/constants/default-values.js.map +1 -1
- package/dist/footer.js +4 -4
- package/dist/footer.js.map +1 -1
- package/dist/header/desktop-header.js +2 -2
- package/dist/header/desktop-header.js.map +1 -1
- package/dist/header/menu/header-menu-item.js +1 -1
- package/dist/header/menu/header-menu-item.js.map +1 -1
- package/dist/header/menu/index.js +1 -1
- package/dist/header/menu/index.js.map +1 -1
- package/dist/header/shared-components.js +3 -3
- package/dist/header/shared-components.js.map +1 -1
- package/dist/styles.css +167 -168
- package/package.json +1 -1
- package/src/components/input.tsx +1 -1
- package/src/constants/default-values.tsx +1 -1
- package/src/footer.tsx +4 -4
- package/src/header/desktop-header.tsx +2 -2
- package/src/header/menu/header-menu-item.tsx +1 -1
- package/src/header/menu/index.tsx +1 -1
- package/src/header/shared-components.tsx +3 -3
- package/src/styles.css +167 -168
package/dist/styles.css
CHANGED
|
@@ -153,209 +153,208 @@
|
|
|
153
153
|
}
|
|
154
154
|
|
|
155
155
|
@layer utilities {
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
font-family: var(--font-family-noto);
|
|
159
|
-
font-size: var(--font-size-h1-large);
|
|
160
|
-
font-weight: 700;
|
|
161
|
-
line-height: var(--line-height-normal);
|
|
162
|
-
letter-spacing: var(--letter-spacing-wide);
|
|
156
|
+
body.no-scroll {
|
|
157
|
+
overflow: hidden;
|
|
163
158
|
}
|
|
159
|
+
}
|
|
164
160
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
161
|
+
/* Typography Utilities - Headlines Large */
|
|
162
|
+
@utility prose-h1-large {
|
|
163
|
+
font-family: var(--font-family-noto);
|
|
164
|
+
font-size: var(--font-size-h1-large);
|
|
165
|
+
font-weight: 700;
|
|
166
|
+
line-height: var(--line-height-normal);
|
|
167
|
+
letter-spacing: 2.4px;
|
|
168
|
+
}
|
|
172
169
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
170
|
+
@utility prose-h2-large {
|
|
171
|
+
font-family: var(--font-family-noto);
|
|
172
|
+
font-size: var(--font-size-h2-large);
|
|
173
|
+
font-weight: 700;
|
|
174
|
+
line-height: var(--line-height-normal);
|
|
175
|
+
letter-spacing: 2px;
|
|
176
|
+
}
|
|
180
177
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
178
|
+
@utility prose-h3-large {
|
|
179
|
+
font-family: var(--font-family-noto);
|
|
180
|
+
font-size: var(--font-size-h3-large);
|
|
181
|
+
font-weight: 700;
|
|
182
|
+
line-height: var(--line-height-normal);
|
|
183
|
+
letter-spacing: 1.6px;
|
|
184
|
+
}
|
|
188
185
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
186
|
+
@utility prose-h4-large {
|
|
187
|
+
font-family: var(--font-family-noto);
|
|
188
|
+
font-size: var(--font-size-h4-large);
|
|
189
|
+
font-weight: 700;
|
|
190
|
+
line-height: var(--line-height-normal);
|
|
191
|
+
letter-spacing: 1.4px;
|
|
192
|
+
}
|
|
196
193
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
194
|
+
@utility prose-h5-large {
|
|
195
|
+
font-family: var(--font-family-noto);
|
|
196
|
+
font-size: var(--font-size-h5-large);
|
|
197
|
+
font-weight: 700;
|
|
198
|
+
line-height: var(--line-height-normal);
|
|
199
|
+
letter-spacing: 1.1px;
|
|
200
|
+
}
|
|
204
201
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
}
|
|
202
|
+
@utility prose-h6-large {
|
|
203
|
+
font-family: var(--font-family-noto);
|
|
204
|
+
font-size: var(--font-size-h6-large);
|
|
205
|
+
font-weight: 700;
|
|
206
|
+
line-height: var(--line-height-normal);
|
|
207
|
+
letter-spacing: 0.9px;
|
|
208
|
+
}
|
|
213
209
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
210
|
+
/* Typography Utilities - Headlines Small */
|
|
211
|
+
@utility prose-h1-small {
|
|
212
|
+
font-family: var(--font-family-noto);
|
|
213
|
+
font-size: var(--font-size-h1-small);
|
|
214
|
+
font-weight: 700;
|
|
215
|
+
line-height: var(--line-height-normal);
|
|
216
|
+
letter-spacing: 1.6px;
|
|
217
|
+
}
|
|
221
218
|
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
219
|
+
@utility prose-h2-small {
|
|
220
|
+
font-family: var(--font-family-noto);
|
|
221
|
+
font-size: var(--font-size-h2-small);
|
|
222
|
+
font-weight: 700;
|
|
223
|
+
line-height: var(--line-height-normal);
|
|
224
|
+
letter-spacing: 1.4px;
|
|
225
|
+
}
|
|
229
226
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
227
|
+
@utility prose-h3-small {
|
|
228
|
+
font-family: var(--font-family-noto);
|
|
229
|
+
font-size: var(--font-size-h3-small);
|
|
230
|
+
font-weight: 700;
|
|
231
|
+
line-height: var(--line-height-normal);
|
|
232
|
+
letter-spacing: 1.2px;
|
|
233
|
+
}
|
|
237
234
|
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
235
|
+
@utility prose-h4-small {
|
|
236
|
+
font-family: var(--font-family-noto);
|
|
237
|
+
font-size: var(--font-size-h4-small);
|
|
238
|
+
font-weight: 700;
|
|
239
|
+
line-height: var(--line-height-normal);
|
|
240
|
+
letter-spacing: 1.1px;
|
|
241
|
+
}
|
|
245
242
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
243
|
+
@utility prose-h5-small {
|
|
244
|
+
font-family: var(--font-family-noto);
|
|
245
|
+
font-size: var(--font-size-h5-small);
|
|
246
|
+
font-weight: 700;
|
|
247
|
+
line-height: var(--line-height-normal);
|
|
248
|
+
letter-spacing: 1px;
|
|
249
|
+
}
|
|
253
250
|
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
}
|
|
251
|
+
@utility prose-h6-small {
|
|
252
|
+
font-family: var(--font-family-noto);
|
|
253
|
+
font-size: var(--font-size-h6-small);
|
|
254
|
+
font-weight: 700;
|
|
255
|
+
line-height: var(--line-height-normal);
|
|
256
|
+
letter-spacing: 0.9px;
|
|
257
|
+
}
|
|
262
258
|
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
259
|
+
/* Typography Utilities - Paragraphs */
|
|
260
|
+
@utility prose-p1 {
|
|
261
|
+
font-family: var(--font-family-noto);
|
|
262
|
+
font-size: var(--font-size-p1);
|
|
263
|
+
font-weight: 500;
|
|
264
|
+
line-height: var(--line-height-normal);
|
|
265
|
+
letter-spacing: 0.8px;
|
|
266
|
+
}
|
|
270
267
|
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
268
|
+
@utility prose-p1-bold {
|
|
269
|
+
font-family: var(--font-family-noto);
|
|
270
|
+
font-size: var(--font-size-p1);
|
|
271
|
+
font-weight: 700;
|
|
272
|
+
line-height: var(--line-height-normal);
|
|
273
|
+
letter-spacing: 0.8px;
|
|
274
|
+
}
|
|
278
275
|
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
276
|
+
@utility prose-p2 {
|
|
277
|
+
font-family: var(--font-family-noto);
|
|
278
|
+
font-size: var(--font-size-p2);
|
|
279
|
+
font-weight: 500;
|
|
280
|
+
line-height: var(--line-height-normal);
|
|
281
|
+
letter-spacing: 0.7px;
|
|
282
|
+
}
|
|
286
283
|
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
284
|
+
@utility prose-p2-bold {
|
|
285
|
+
font-family: var(--font-family-noto);
|
|
286
|
+
font-size: var(--font-size-p2);
|
|
287
|
+
font-weight: 700;
|
|
288
|
+
line-height: var(--line-height-normal);
|
|
289
|
+
letter-spacing: 0.7px;
|
|
290
|
+
}
|
|
294
291
|
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
292
|
+
@utility prose-p3 {
|
|
293
|
+
font-family: var(--font-family-noto);
|
|
294
|
+
font-size: var(--font-size-p3);
|
|
295
|
+
font-weight: 500;
|
|
296
|
+
line-height: var(--line-height-normal);
|
|
297
|
+
letter-spacing: 0.6px;
|
|
298
|
+
}
|
|
302
299
|
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
300
|
+
@utility prose-p3-bold {
|
|
301
|
+
font-family: var(--font-family-noto);
|
|
302
|
+
font-size: var(--font-size-p3);
|
|
303
|
+
font-weight: 700;
|
|
304
|
+
line-height: var(--line-height-normal);
|
|
305
|
+
letter-spacing: 0.6px;
|
|
306
|
+
}
|
|
310
307
|
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
308
|
+
@utility prose-p4 {
|
|
309
|
+
font-family: var(--font-family-noto);
|
|
310
|
+
font-size: var(--font-size-p4);
|
|
311
|
+
font-weight: 500;
|
|
312
|
+
line-height: var(--line-height-normal);
|
|
313
|
+
letter-spacing: 0.5px;
|
|
314
|
+
}
|
|
318
315
|
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
316
|
+
@utility prose-p4-bold {
|
|
317
|
+
font-family: var(--font-family-noto);
|
|
318
|
+
font-size: var(--font-size-p4);
|
|
319
|
+
font-weight: 700;
|
|
320
|
+
line-height: var(--line-height-normal);
|
|
321
|
+
letter-spacing: 0.5px;
|
|
322
|
+
}
|
|
323
323
|
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
.theme-yellow {
|
|
329
|
-
--theme-color: var(--color-yellow-400);
|
|
330
|
-
}
|
|
331
|
-
.theme-blue {
|
|
332
|
-
--theme-color: var(--color-blue-400);
|
|
333
|
-
}
|
|
324
|
+
/* Swei Marker Sans Font Variants */
|
|
325
|
+
@utility font-swei {
|
|
326
|
+
font-family: var(--font-family-swei);
|
|
327
|
+
}
|
|
334
328
|
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
scrollbar-color: var(--color-neutral-gray-300) transparent;
|
|
339
|
-
}
|
|
329
|
+
@utility scrollbar-thin {
|
|
330
|
+
scrollbar-width: thin;
|
|
331
|
+
scrollbar-color: var(--color-neutral-300) transparent;
|
|
340
332
|
|
|
341
|
-
|
|
333
|
+
&::-webkit-scrollbar {
|
|
342
334
|
width: 6px;
|
|
343
335
|
}
|
|
344
336
|
|
|
345
|
-
|
|
337
|
+
&::-webkit-scrollbar-track {
|
|
346
338
|
background: transparent;
|
|
347
339
|
}
|
|
348
340
|
|
|
349
|
-
|
|
341
|
+
&::-webkit-scrollbar-thumb {
|
|
350
342
|
background: transparent;
|
|
351
343
|
border-radius: 3px;
|
|
352
344
|
}
|
|
353
345
|
|
|
354
|
-
|
|
346
|
+
&::-webkit-scrollbar-thumb:hover {
|
|
355
347
|
background: transparent;
|
|
356
348
|
}
|
|
349
|
+
}
|
|
357
350
|
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
351
|
+
/* Theme Color Utilities */
|
|
352
|
+
@utility theme-red {
|
|
353
|
+
--theme-color: var(--color-red-400);
|
|
354
|
+
}
|
|
355
|
+
@utility theme-yellow {
|
|
356
|
+
--theme-color: var(--color-yellow-400);
|
|
357
|
+
}
|
|
358
|
+
@utility theme-blue {
|
|
359
|
+
--theme-color: var(--color-blue-400);
|
|
361
360
|
}
|
package/package.json
CHANGED
package/src/components/input.tsx
CHANGED
|
@@ -29,7 +29,7 @@ const CloseIcon = ({ className }: { className?: string }) => (
|
|
|
29
29
|
|
|
30
30
|
const inputVariants = cva(
|
|
31
31
|
// Base styles
|
|
32
|
-
'
|
|
32
|
+
'desktop:bg-white! px-4 py-1.5 h-11 flex items-center rounded-full border border-transparent bg-neutral-100 prose-p1 transition-colors duration-200 hover:border-neutral-600',
|
|
33
33
|
{
|
|
34
34
|
variants: {
|
|
35
35
|
state: {
|
|
@@ -40,7 +40,7 @@ export const MENU_ITEMS: MenuItem[] = [
|
|
|
40
40
|
},
|
|
41
41
|
{
|
|
42
42
|
label: '校園',
|
|
43
|
-
href: '/category/campus
|
|
43
|
+
href: '/category/campus',
|
|
44
44
|
subItems: [
|
|
45
45
|
{ label: '校園寶可夢', href: '/category/campus/campus-pokemon' },
|
|
46
46
|
{ label: '上課好好玩', href: '/category/campus/teaching' },
|
package/src/footer.tsx
CHANGED
|
@@ -44,7 +44,7 @@ const Footer = ({
|
|
|
44
44
|
/>
|
|
45
45
|
</a>
|
|
46
46
|
</div>
|
|
47
|
-
<p className="prose-p2
|
|
47
|
+
<p className="w-full prose-p2 text-neutral-900">
|
|
48
48
|
《少年報導者》是由非營利媒體《報導者》針對兒少打造的深度新聞報導品牌，與兒童和少年一起理解世界，參與未來。
|
|
49
49
|
</p>
|
|
50
50
|
<Button size={44} variant="secondary" asChild className="w-75">
|
|
@@ -60,7 +60,7 @@ const Footer = ({
|
|
|
60
60
|
<a
|
|
61
61
|
key={link.label}
|
|
62
62
|
href={link.href}
|
|
63
|
-
className="prose-p2-bold
|
|
63
|
+
className="min-w-30 prose-p2-bold text-neutral-900 transition-colors duration-200 hover:text-red-400"
|
|
64
64
|
target={link.external ? '_blank' : undefined}
|
|
65
65
|
rel={link.external ? 'noopener noreferrer' : undefined}
|
|
66
66
|
>
|
|
@@ -73,7 +73,7 @@ const Footer = ({
|
|
|
73
73
|
<a
|
|
74
74
|
key={link.label}
|
|
75
75
|
href={link.href}
|
|
76
|
-
className="prose-p2-bold
|
|
76
|
+
className="min-w-30 prose-p2-bold text-neutral-900 transition-colors duration-200 hover:text-red-400"
|
|
77
77
|
target={link.external ? '_blank' : undefined}
|
|
78
78
|
rel={link.external ? 'noopener noreferrer' : undefined}
|
|
79
79
|
>
|
|
@@ -110,7 +110,7 @@ const Footer = ({
|
|
|
110
110
|
})}
|
|
111
111
|
</div>
|
|
112
112
|
|
|
113
|
-
<div className="prose-p3 text-
|
|
113
|
+
<div className="text-center prose-p3 text-neutral-white desktop:order-1 desktop:text-left">
|
|
114
114
|
<p className="desktop:inline">
|
|
115
115
|
衛部救字第1131363879號｜勸募期間 2025/1/1~12/31
|
|
116
116
|
<span className="hidden desktop:inline">｜</span>
|
|
@@ -70,7 +70,7 @@ export function DesktopHeader({
|
|
|
70
70
|
</div>
|
|
71
71
|
{postTitle && (
|
|
72
72
|
<div className="pr-12 block">
|
|
73
|
-
<p className="
|
|
73
|
+
<p className="font-medium tracking-wide max-w-124 overflow-hidden prose-p2 text-ellipsis whitespace-nowrap text-neutral-900">
|
|
74
74
|
{postTitle}
|
|
75
75
|
</p>
|
|
76
76
|
</div>
|
|
@@ -84,7 +84,7 @@ export function DesktopHeader({
|
|
|
84
84
|
postTitle && compactMode && 'max-w-0'
|
|
85
85
|
)}
|
|
86
86
|
>
|
|
87
|
-
<span className="
|
|
87
|
+
<span className="font-medium translate-y-0 inline-block prose-p2 tracking-[2.2px]! text-nowrap text-neutral-900 opacity-100">
|
|
88
88
|
理解世界 × 參與未來
|
|
89
89
|
</span>
|
|
90
90
|
</div>
|
|
@@ -90,7 +90,7 @@ function HeaderMenuItem({
|
|
|
90
90
|
<a
|
|
91
91
|
key={index}
|
|
92
92
|
href={subItem.href}
|
|
93
|
-
className="px-6 tablet:px-12 py-2 pl-12
|
|
93
|
+
className="px-6 tablet:px-12 py-2 pl-12 font-medium block prose-p2 transition-colors duration-200 hover:bg-neutral-black/5 hover:text-neutral-900 active:bg-neutral-black/10"
|
|
94
94
|
onClick={closeMenu}
|
|
95
95
|
>
|
|
96
96
|
{subItem.label}
|
|
@@ -86,7 +86,7 @@ function Menu({
|
|
|
86
86
|
{/* Menu */}
|
|
87
87
|
<div
|
|
88
88
|
className={cn(
|
|
89
|
-
'top-0 left-0 tablet:w-80 bg-white shadow-2xl ease-in-out
|
|
89
|
+
'top-0 left-0 tablet:w-80 bg-white shadow-2xl ease-in-out tablet:pt-0 fixed z-1001 h-full scrollbar-thin w-full transform pt-(--mobile-header-height) transition-transform duration-300',
|
|
90
90
|
isOpen ? 'translate-x-0' : '-translate-x-full'
|
|
91
91
|
)}
|
|
92
92
|
>
|
|
@@ -173,12 +173,12 @@ export function SearchInputSection(props: SearchInputSectionProps) {
|
|
|
173
173
|
isFocused,
|
|
174
174
|
})}
|
|
175
175
|
>
|
|
176
|
-
<h3 className="
|
|
176
|
+
<h3 className="font-bold mb-3 prose-p3 text-neutral-700">熱門搜尋</h3>
|
|
177
177
|
<div className="gap-2.5 flex flex-wrap">
|
|
178
178
|
{tags.map((keyword) => (
|
|
179
179
|
<a
|
|
180
180
|
key={keyword}
|
|
181
|
-
className="px-3 py-1
|
|
181
|
+
className="px-3 py-1 font-bold cursor-pointer rounded-full bg-neutral-200 prose-p2 text-neutral-900 transition-colors duration-200 hover:bg-red-500 hover:text-neutral-white"
|
|
182
182
|
href={`/search?q=${encodeURIComponent(keyword)}`}
|
|
183
183
|
>
|
|
184
184
|
#{keyword}
|
|
@@ -285,7 +285,7 @@ export function BottomNavigation({
|
|
|
285
285
|
<div key={item.label} className="flex items-center">
|
|
286
286
|
<a
|
|
287
287
|
href={item.href}
|
|
288
|
-
className="py-1
|
|
288
|
+
className="py-1 font-bold! h-6 flex items-center prose-p1 text-neutral-900 transition-colors hover:text-red-400"
|
|
289
289
|
>
|
|
290
290
|
{item.label}
|
|
291
291
|
</a>
|