Skip to content

Commit c3e7a4b

Browse files
aster-voidaster-void
committed
refactor: clean up design system and fix primary color
- Fix primary color to lime green (#00D372) by disabling DaisyUI themes - Replace DaisyUI-specific classes with Tailwind standards - Extract Pagination component to reduce duplication (150 lines) - Centralize constants in src/lib/shared/constants.ts - Simplify HeroSection decorations - Fix Svelte 5 deprecation warnings
1 parent 32d7d46 commit c3e7a4b

File tree

13 files changed

+130
-267
lines changed

13 files changed

+130
-267
lines changed

‎docs/knowledges/ui-design.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,14 @@
3434

3535
| Component | Style |
3636
| ------------------- | ---------------------------------------------------------------------------------------- |
37-
| Buttons (primary) | bg-[#00D372], rounded-lg, font-semibold, shadow-lg |
37+
| Buttons (primary) | bg-primary, rounded-lg, font-semibold, shadow-lg |
3838
| Buttons (secondary) | bg-zinc-900, text-white |
3939
| Cards | bg-white/80, backdrop-blur-md, border border-zinc-200/50, rounded-2xl, hover:shadow |
4040
| Featured card | bg-zinc-900, text-white (inverted) |
41-
| Section labels | Monospace, uppercase, tracking-widest, text-[#00D372] |
41+
| Section labels | Monospace, uppercase, tracking-widest, text-primary |
4242
| Tech tags | Monospace, text-xs, bg-zinc-100/zinc-800, rounded-lg |
4343
| Page headers | border-b, bg-zinc-50/50, py-16 |
44+
| Pagination | `$lib/components/Pagination.svelte` - Reusable component with prev/next buttons, page numbers with ellipsis |
4445

4546
## Interaction Patterns
4647

‎src/app.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@plugin "@tailwindcss/typography";
33
@plugin "daisyui" {
44
logs: false;
5+
themes: false;
56
}
67

78
/* ut.code(); Admin Theme */

‎src/lib/components/Pagination.svelte‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<script lang="ts">
2+
interface Props {
3+
currentPage: number;
4+
totalPages: number;
5+
pageUrl: (page: number) => string;
6+
}
7+
8+
const { currentPage, totalPages, pageUrl }: Props = $props();
9+
</script>
10+
11+
{#if totalPages > 1}
12+
<div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-4">
13+
{#if currentPage > 1}
14+
<a
15+
href={pageUrl(currentPage - 1)}
16+
class="w-full rounded-lg border border-zinc-200 bg-white px-4 py-2 text-center text-sm font-medium transition-colors hover:bg-primary/5 hover:border-primary/30 hover:text-primary focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 sm:w-auto"
17+
>
18+
前へ
19+
</a>
20+
{:else}
21+
<span
22+
class="w-full cursor-not-allowed rounded-lg border border-zinc-200 bg-white px-4 py-2 text-center text-sm font-medium opacity-50 sm:w-auto"
23+
>
24+
前へ
25+
</span>
26+
{/if}
27+
28+
<div class="flex flex-1 flex-wrap items-center justify-center gap-1 sm:flex-initial">
29+
{#each Array.from({ length: totalPages }, (_, i) => i + 1) as pageNum (pageNum)}
30+
{#if totalPages <= 7 || pageNum === 1 || pageNum === totalPages || Math.abs(pageNum - currentPage) <= 1}
31+
<a
32+
href={pageUrl(pageNum)}
33+
class="min-w-[2.5rem] rounded-lg border px-3 py-2 text-center text-sm font-medium transition-colors focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 {currentPage ===
34+
pageNum
35+
? 'border-primary bg-primary text-white'
36+
: 'border-zinc-200 bg-white hover:bg-primary/5 hover:border-primary/30 hover:text-primary'}"
37+
>
38+
{pageNum}
39+
</a>
40+
{:else if pageNum === currentPage - 2 || pageNum === currentPage + 2}
41+
<span class="px-1 text-zinc-500">...</span>
42+
{/if}
43+
{/each}
44+
</div>
45+
46+
{#if currentPage < totalPages}
47+
<a
48+
href={pageUrl(currentPage + 1)}
49+
class="w-full rounded-lg border border-zinc-200 bg-white px-4 py-2 text-center text-sm font-medium transition-colors hover:bg-primary/5 hover:border-primary/30 hover:text-primary focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 sm:w-auto"
50+
>
51+
次へ
52+
</a>
53+
{:else}
54+
<span
55+
class="w-full cursor-not-allowed rounded-lg border border-zinc-200 bg-white px-4 py-2 text-center text-sm font-medium opacity-50 sm:w-auto"
56+
>
57+
次へ
58+
</span>
59+
{/if}
60+
</div>
61+
{/if}

‎src/lib/components/admin-dashboard/StatCard.svelte‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
stagger: number;
1515
}
1616
17-
const { label, value, sublabel, href, icon, iconColor, accentColor, stagger }: Props = $props();
17+
const { label, value, sublabel, href, icon: IconComponent, iconColor, accentColor, stagger }: Props = $props();
1818
1919
const iconColorClasses = {
2020
success: "bg-success/10 text-success group-hover:bg-success/20",
@@ -36,8 +36,7 @@
3636
iconColor
3737
]}"
3838
>
39-
<!-- svelte-ignore svelte_component_deprecated -->
40-
<svelte:component this={icon} class="h-5 w-5" />
39+
<IconComponent class="h-5 w-5" />
4140
</div>
4241
</div>
4342
<p class="mt-3 font-mono text-4xl font-bold text-base-content">

‎src/lib/components/home/HeroSection.svelte‎

Lines changed: 27 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,24 @@
77
<div class="pointer-events-none absolute inset-0" aria-hidden="true">
88
<!-- Primary gradient mesh -->
99
<div
10-
class="absolute right-0 top-0 h-[800px] w-[800px] rounded-full bg-[#00D372]/[0.08] blur-3xl"
10+
class="absolute right-0 top-0 h-[800px] w-[800px] rounded-full bg-primary/[0.08] blur-3xl"
1111
style="transform: translate(30%, -20%);"
1212
></div>
1313
<!-- Secondary accent -->
1414
<div
15-
class="absolute bottom-0 left-0 h-[600px] w-[600px] rounded-full bg-[#00D372]/[0.04] blur-3xl"
15+
class="absolute bottom-0 left-0 h-[600px] w-[600px] rounded-full bg-primary/[0.04] blur-3xl"
1616
style="transform: translate(-40%, 20%);"
1717
></div>
18-
<!-- Subtle grid overlay -->
19-
<div
20-
class="absolute inset-0 opacity-[0.015]"
21-
style="background-image: linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px); background-size: 64px 64px;"
22-
></div>
2318
</div>
2419

2520
<div class="relative z-10 mx-auto flex min-h-screen max-w-7xl flex-col justify-center px-6 py-20 lg:px-12">
2621
<!-- Mobile: centered layout -->
2722
<div class="lg:hidden mx-auto max-w-xl text-center">
2823
<div class="mb-8 flex flex-wrap items-center justify-center gap-3">
2924
<div
30-
class="flex items-center gap-2 rounded-full border border-[#00D372]/30 bg-[#00D372]/10 px-4 py-2"
25+
class="flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-2"
3126
>
32-
<div class="h-2 w-2 rounded-full bg-[#00D372] shadow-[0_0_8px_rgba(0,211,114,0.6)]"></div>
27+
<div class="h-2 w-2 rounded-full bg-primary shadow-primary/60 shadow-[0_0_8px]"></div>
3328
<span class="font-mono text-xs font-medium text-zinc-700">SINCE 2019</span>
3429
</div>
3530
<div
@@ -43,8 +38,8 @@
4338
<h1 class="mb-10 text-5xl font-bold leading-[1.1] tracking-tight text-zinc-900 sm:text-6xl">
4439
Build<br />
4540
<span class="text-zinc-400">the</span>
46-
<span class="text-[#00D372]">Future</span><br />
47-
<span class="text-zinc-400">with</span> Code<span class="text-[#00D372]">;</span>
41+
<span class="text-primary">Future</span><br />
42+
<span class="text-zinc-400">with</span> Code<span class="text-primary">;</span>
4843
</h1>
4944

5045
<p class="mb-10 mx-auto max-w-md text-lg leading-relaxed text-zinc-600">
@@ -55,14 +50,14 @@
5550
<div class="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
5651
<a
5752
href="/join"
58-
class="group inline-flex w-full sm:w-auto items-center justify-center gap-2 rounded-lg bg-[#00D372] px-8 py-4 font-semibold text-white shadow-lg shadow-[#00D372]/30 transition-all hover:shadow-xl hover:shadow-[#00D372]/40 focus:outline-none focus:ring-2 focus:ring-[#00D372] focus:ring-offset-2"
53+
class="group inline-flex w-full sm:w-auto items-center justify-center gap-2 rounded-lg bg-primary px-8 py-4 font-semibold text-white shadow-lg shadow-primary/30 transition-all hover:shadow-xl hover:shadow-primary/40 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
5954
>
6055
<span>参加する</span>
6156
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
6257
</a>
6358
<a
6459
href="/projects"
65-
class="group inline-flex w-full sm:w-auto items-center justify-center gap-2 rounded-lg bg-zinc-900 px-8 py-4 font-semibold text-white transition-all hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-[#00D372] focus:ring-offset-2"
60+
class="group inline-flex w-full sm:w-auto items-center justify-center gap-2 rounded-lg bg-zinc-900 px-8 py-4 font-semibold text-white transition-all hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
6661
>
6762
プロジェクトを見る
6863
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
@@ -77,9 +72,9 @@
7772
<!-- Meta badges -->
7873
<div class="flex flex-wrap items-center gap-3">
7974
<div
80-
class="flex items-center gap-2.5 rounded-full border border-[#00D372]/30 bg-[#00D372]/[0.08] px-5 py-2.5 backdrop-blur-sm"
75+
class="flex items-center gap-2.5 rounded-full border border-primary/30 bg-primary/[0.08] px-5 py-2.5 backdrop-blur-sm"
8176
>
82-
<div class="h-2 w-2 rounded-full bg-[#00D372] shadow-[0_0_10px_rgba(0,211,114,0.7)] animate-pulse-glow"></div>
77+
<div class="h-2 w-2 rounded-full bg-primary shadow-primary/70 shadow-[0_0_10px]"></div>
8378
<span class="font-mono text-sm font-medium text-zinc-700 tracking-wide">SINCE 2019</span>
8479
</div>
8580
<div
@@ -93,8 +88,8 @@
9388
<!-- Headline -->
9489
<div class="space-y-4">
9590
<h1 class="text-6xl xl:text-7xl font-bold leading-[1.05] tracking-tight text-zinc-900">
96-
Build the <span class="text-[#00D372]">Future</span><br />
97-
with Code<span class="text-[#00D372]">;</span>
91+
Build the <span class="text-primary">Future</span><br />
92+
with Code<span class="text-primary">;</span>
9893
</h1>
9994
</div>
10095

@@ -112,14 +107,14 @@
112107
<div class="flex flex-wrap items-center gap-4 pt-4">
113108
<a
114109
href="/join"
115-
class="group inline-flex items-center gap-2.5 rounded-lg bg-[#00D372] px-8 py-4 font-semibold text-white shadow-lg shadow-[#00D372]/30 transition-all hover:shadow-xl hover:shadow-[#00D372]/40 hover:translate-y-[-2px] focus:outline-none focus:ring-2 focus:ring-[#00D372] focus:ring-offset-2"
110+
class="group inline-flex items-center gap-2.5 rounded-lg bg-primary px-8 py-4 font-semibold text-white shadow-lg shadow-primary/30 transition-all hover:shadow-xl hover:shadow-primary/40 hover:translate-y-[-2px] focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
116111
>
117112
<span>参加する</span>
118113
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
119114
</a>
120115
<a
121116
href="/projects"
122-
class="group inline-flex items-center gap-2.5 rounded-lg border border-zinc-900 bg-zinc-900 px-8 py-4 font-semibold text-white transition-all hover:bg-zinc-800 hover:border-zinc-800 focus:outline-none focus:ring-2 focus:ring-[#00D372] focus:ring-offset-2"
117+
class="group inline-flex items-center gap-2.5 rounded-lg border border-zinc-900 bg-zinc-900 px-8 py-4 font-semibold text-white transition-all hover:bg-zinc-800 hover:border-zinc-800 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
123118
>
124119
<span>プロジェクトを見る</span>
125120
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
@@ -133,7 +128,7 @@
133128
<div class="relative h-[600px]">
134129
<!-- Card 1: Code snippet -->
135130
<div
136-
class="absolute left-0 top-0 w-full rounded-2xl border border-zinc-200/80 bg-white/80 p-8 shadow-2xl shadow-zinc-900/5 backdrop-blur-sm animate-float-1"
131+
class="absolute left-0 top-0 w-full rounded-2xl border border-zinc-200/80 bg-white/80 p-8 shadow-2xl shadow-zinc-900/5 backdrop-blur-sm animate-float"
137132
>
138133
<div class="flex items-center justify-between mb-6">
139134
<div class="flex items-center gap-2">
@@ -144,23 +139,23 @@
144139
<span class="font-mono text-xs text-zinc-400">main.ts</span>
145140
</div>
146141
<pre class="font-mono text-sm leading-relaxed text-zinc-700"><code>{@html `<span class="text-zinc-500">const</span> <span class="text-zinc-900">mission</span> = {
147-
<span class="text-[#00D372]">learn</span>: <span class="text-zinc-600">"最新技術"</span>,
148-
<span class="text-[#00D372]">build</span>: <span class="text-zinc-600">"実用プロダクト"</span>,
149-
<span class="text-[#00D372]">share</span>: <span class="text-zinc-600">"知見と経験"</span>
142+
<span class="text-primary">learn</span>: <span class="text-zinc-600">"最新技術"</span>,
143+
<span class="text-primary">build</span>: <span class="text-zinc-600">"実用プロダクト"</span>,
144+
<span class="text-primary">share</span>: <span class="text-zinc-600">"知見と経験"</span>
150145
};`}</code></pre>
151146
</div>
152147

153148
<!-- Card 2: Stats -->
154149
<div
155-
class="absolute right-0 top-48 w-80 rounded-2xl border border-zinc-200/80 bg-white/90 p-6 shadow-xl shadow-zinc-900/5 backdrop-blur-sm animate-float-2"
150+
class="absolute right-0 top-48 w-80 rounded-2xl border border-zinc-200/80 bg-white/90 p-6 shadow-xl shadow-zinc-900/5 backdrop-blur-sm animate-float"
156151
>
157152
<div class="space-y-4">
158153
<div class="flex items-baseline gap-3">
159154
<div class="text-4xl font-bold text-zinc-900">100+</div>
160155
<div class="font-mono text-sm text-zinc-500">メンバー</div>
161156
</div>
162157
<div class="flex items-baseline gap-3">
163-
<div class="text-4xl font-bold text-[#00D372]">50+</div>
158+
<div class="text-4xl font-bold text-primary">50+</div>
164159
<div class="font-mono text-sm text-zinc-500">プロジェクト</div>
165160
</div>
166161
<div class="flex items-baseline gap-3">
@@ -172,15 +167,15 @@
172167

173168
<!-- Card 3: Tech tags -->
174169
<div
175-
class="absolute left-12 bottom-0 rounded-2xl border border-zinc-200/80 bg-white/80 p-6 shadow-xl shadow-zinc-900/5 backdrop-blur-sm animate-float-3"
170+
class="absolute left-12 bottom-0 rounded-2xl border border-zinc-200/80 bg-white/80 p-6 shadow-xl shadow-zinc-900/5 backdrop-blur-sm animate-float"
176171
>
177172
<div class="flex flex-wrap gap-2">
178173
<span class="rounded-lg bg-zinc-100 px-3 py-1.5 font-mono text-xs text-zinc-700">TypeScript</span>
179174
<span class="rounded-lg bg-zinc-100 px-3 py-1.5 font-mono text-xs text-zinc-700">React</span>
180175
<span class="rounded-lg bg-zinc-100 px-3 py-1.5 font-mono text-xs text-zinc-700">Svelte</span>
181176
<span class="rounded-lg bg-zinc-100 px-3 py-1.5 font-mono text-xs text-zinc-700">Python</span>
182177
<span class="rounded-lg bg-zinc-100 px-3 py-1.5 font-mono text-xs text-zinc-700">Go</span>
183-
<span class="rounded-lg bg-[#00D372]/10 px-3 py-1.5 font-mono text-xs text-[#00D372] font-medium">+More</span>
178+
<span class="rounded-lg bg-primary/10 px-3 py-1.5 font-mono text-xs text-primary font-medium">+More</span>
184179
</div>
185180
</div>
186181
</div>
@@ -223,56 +218,16 @@
223218
}
224219
225220
/* Floating cards */
226-
@keyframes float-1 {
227-
0%, 100% {
228-
transform: translateY(0px) rotate(0deg);
229-
}
230-
50% {
231-
transform: translateY(-12px) rotate(-1deg);
232-
}
233-
}
234-
235-
@keyframes float-2 {
236-
0%, 100% {
237-
transform: translateY(0px) rotate(0deg);
238-
}
239-
50% {
240-
transform: translateY(-16px) rotate(1deg);
241-
}
242-
}
243-
244-
@keyframes float-3 {
245-
0%, 100% {
246-
transform: translateY(0px) rotate(0deg);
247-
}
248-
50% {
249-
transform: translateY(-10px) rotate(-0.5deg);
250-
}
251-
}
252-
253-
.animate-float-1 {
254-
animation: float-1 8s ease-in-out infinite;
255-
}
256-
257-
.animate-float-2 {
258-
animation: float-2 7s ease-in-out infinite 0.5s;
259-
}
260-
261-
.animate-float-3 {
262-
animation: float-3 9s ease-in-out infinite 1s;
263-
}
264-
265-
/* Pulse glow effect */
266-
@keyframes pulse-glow {
221+
@keyframes float {
267222
0%, 100% {
268-
box-shadow: 0 0 10px rgba(0, 211, 114, 0.7);
223+
transform: translateY(0px);
269224
}
270225
50% {
271-
box-shadow: 0 0 20px rgba(0, 211, 114, 0.9);
226+
transform: translateY(-12px);
272227
}
273228
}
274229
275-
.animate-pulse-glow {
276-
animation: pulse-glow 2s ease-in-out infinite;
230+
.animate-float {
231+
animation: float 8s ease-in-out infinite;
277232
}
278233
</style>

‎src/lib/shared/constants.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import type { ProjectCategory } from "./models/schema";
2+
3+
export const ITEMS_PER_PAGE = 12;
4+
5+
export const CATEGORY_COLORS: Record<ProjectCategory, string> = {
6+
active: "bg-emerald-100 text-emerald-700 border-emerald-200",
7+
ended: "bg-zinc-100 text-zinc-600 border-zinc-200",
8+
hackathon: "bg-purple-100 text-purple-700 border-purple-200",
9+
festival: "bg-pink-100 text-pink-700 border-pink-200",
10+
personal: "bg-amber-100 text-amber-700 border-amber-200",
11+
};

‎src/routes/(site)/about/faq/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@
126126
<div class="flex flex-wrap justify-center gap-4">
127127
<a
128128
href="/join"
129-
class="inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 font-semibold text-zinc-900 transition-all hover:bg-primary-focus"
129+
class="inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 font-semibold text-zinc-900 transition-all hover:bg-primary/90"
130130
>
131131
入部案内を見る
132132
</a>

0 commit comments

Comments
 (0)