Skip to content

Commit e1bfabe

Browse files
aster-voidaster-void
committed
feat(home): light theme with brand color and accessibility
- Convert all sections to light theme (bg-white/bg-zinc-50) - Apply brand color #00D372 consistently across all components - Unify max-w-6xl, rounded-lg buttons, backdrop-blur cards - Add focus states for keyboard navigation - Add aria-hidden to decorative elements - Add prefers-reduced-motion support in app.css
1 parent 9923e9c commit e1bfabe

File tree

10 files changed

+175
-253
lines changed

10 files changed

+175
-253
lines changed

‎biome.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@
1919
"enabled": true,
2020
"rules": {
2121
"recommended": true,
22+
"complexity": {
23+
"noImportantStyles": "off"
24+
},
2225
"nursery": {
2326
"noFloatingPromises": "error",
2427
"useSortedClasses": {

‎src/app.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -290,3 +290,18 @@ pre,
290290
background: oklch(76% 0.2 153);
291291
border-radius: 0 2px 2px 0;
292292
}
293+
294+
/* Reduced motion support */
295+
@media (prefers-reduced-motion: reduce) {
296+
.animate-bounce,
297+
.animate-pulse,
298+
.animate-fade-slide-in,
299+
.animate-fade-in,
300+
.animate-scale-in,
301+
.animate-shimmer,
302+
.animate-pulse-glow,
303+
.animate-float,
304+
.animate-gradient {
305+
animation: none !important;
306+
}
307+
}

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,30 @@
1010
const currentYear = new Date().getFullYear();
1111
</script>
1212

13-
<section class="bg-zinc-900 py-32">
14-
<div class="mx-auto max-w-7xl px-6">
13+
<section class="bg-white py-32">
14+
<div class="mx-auto max-w-6xl px-6">
1515
<div class="mb-16 text-center">
16-
<div class="mb-4 font-mono text-sm font-medium text-orange-400">ABOUT US</div>
17-
<h2 class="font-[clash-display,ui-sans-serif,system-ui,sans-serif] text-5xl font-bold text-white lg:text-6xl">
16+
<div class="mb-4 font-mono text-sm font-medium uppercase tracking-widest text-[#00D372]">ABOUT US</div>
17+
<h2 class="text-5xl font-bold text-zinc-900 lg:text-6xl">
1818
団体概要
1919
</h2>
2020
</div>
2121
<div class="mx-auto max-w-4xl">
22-
<div class="divide-y divide-zinc-800 rounded-3xl border border-zinc-800 bg-zinc-950/50 backdrop-blur-sm">
22+
<div class="divide-y divide-zinc-100 rounded-3xl border border-zinc-200/50 bg-white/80 backdrop-blur-md">
2323
{#each [{ label: "団体名", value: "ut.code();" }, { label: "部員", value: `${members}名程度` }, { label: "所属", value: `東京大学工学部丁友会 (${currentYear}年度)` }, { label: "部室", value: "駒場キャンパス学生会館 313B 教室" }, { label: "活動場所", value: "オンライン, 部室, 本郷図書館プロジェクトボックス等" }] as item (item.label)}
2424
<div class="flex flex-col gap-2 px-6 py-5 sm:flex-row sm:gap-0 sm:px-8 sm:py-6">
25-
<span class="w-full shrink-0 font-mono text-sm font-medium text-orange-400 sm:w-36">{item.label}</span>
26-
<span class="text-zinc-300">{item.value}</span>
25+
<span class="w-full shrink-0 font-mono text-sm font-medium text-[#00D372] sm:w-36">{item.label}</span>
26+
<span class="text-zinc-700">{item.value}</span>
2727
</div>
2828
{/each}
2929
<div class="flex flex-col gap-3 px-6 py-5 sm:flex-row sm:items-center sm:gap-0 sm:px-8 sm:py-6">
30-
<span class="w-full shrink-0 font-mono text-sm font-medium text-orange-400 sm:w-36">SNS</span>
30+
<span class="w-full shrink-0 font-mono text-sm font-medium text-[#00D372] sm:w-36">SNS</span>
3131
<div class="flex flex-wrap gap-4">
3232
<a
3333
href="https://github.com/ut-code"
3434
target="_blank"
3535
rel="noopener noreferrer"
36-
class="group flex items-center gap-2 rounded-lg border border-zinc-700 bg-zinc-800/50 px-4 py-2 text-zinc-300 transition-all hover:border-zinc-600 hover:bg-zinc-800 hover:text-white"
36+
class="group flex items-center gap-2 rounded-lg border border-zinc-200/50 bg-white/80 px-4 py-2 text-zinc-700 backdrop-blur-md transition-all hover:border-[#00D372]/30 hover:bg-[#00D372]/5 hover:text-[#00D372] focus:outline-none focus:ring-2 focus:ring-[#00D372] focus:ring-offset-2"
3737
>
3838
<Github class="h-5 w-5" />
3939
<span>ut-code</span>
@@ -42,7 +42,7 @@
4242
href="https://twitter.com/utokyo_code"
4343
target="_blank"
4444
rel="noopener noreferrer"
45-
class="group flex items-center gap-2 rounded-lg border border-zinc-700 bg-zinc-800/50 px-4 py-2 text-zinc-300 transition-all hover:border-zinc-600 hover:bg-zinc-800 hover:text-white"
45+
class="group flex items-center gap-2 rounded-lg border border-zinc-200/50 bg-white/80 px-4 py-2 text-zinc-700 backdrop-blur-md transition-all hover:border-[#00D372]/30 hover:bg-[#00D372]/5 hover:text-[#00D372] focus:outline-none focus:ring-2 focus:ring-[#00D372] focus:ring-offset-2"
4646
>
4747
<Twitter class="h-5 w-5" />
4848
<span>@utokyo_code</span>

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

Lines changed: 16 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,21 @@
33
</script>
44

55
<section class="relative overflow-hidden bg-white py-32">
6-
<!-- Background decoration with more layers -->
7-
<div class="pointer-events-none absolute left-0 top-0 h-full w-1/2 bg-gradient-to-r from-orange-50/80 via-amber-50/40 to-transparent"></div>
8-
<div class="pointer-events-none absolute right-0 top-0 h-full w-1/2 bg-gradient-to-l from-yellow-50/80 via-amber-50/40 to-transparent"></div>
6+
<!-- Background decoration -->
7+
<div class="pointer-events-none absolute left-0 top-0 h-full w-1/2 bg-gradient-to-r from-[#00D372]/5 to-transparent" aria-hidden="true"></div>
8+
<div class="pointer-events-none absolute right-0 top-0 h-full w-1/2 bg-gradient-to-l from-[#00D372]/5 to-transparent" aria-hidden="true"></div>
99

1010
<!-- Subtle dot pattern -->
1111
<div
1212
class="pointer-events-none absolute inset-0 opacity-[0.03]"
1313
style="background-image: radial-gradient(circle, #000 1px, transparent 1px); background-size: 24px 24px;"
14+
aria-hidden="true"
1415
></div>
1516

16-
<div class="relative mx-auto max-w-7xl px-6">
17+
<div class="relative mx-auto max-w-6xl px-6">
1718
<div class="mb-20 text-center">
18-
<div class="mb-4 font-mono text-sm font-medium uppercase tracking-widest text-orange-600">WHAT WE DO</div>
19-
<h2 class="font-[clash-display,ui-sans-serif,system-ui,sans-serif] text-5xl font-bold text-zinc-900 lg:text-6xl">
19+
<div class="mb-4 font-mono text-sm font-medium uppercase tracking-widest text-[#00D372]">WHAT WE DO</div>
20+
<h2 class="text-5xl font-bold text-zinc-900 lg:text-6xl">
2021
活動内容
2122
</h2>
2223
<p class="mx-auto mt-6 max-w-2xl text-lg text-zinc-600">
@@ -26,19 +27,14 @@
2627

2728
<div class="grid gap-8 md:grid-cols-3">
2829
<div class="group relative">
29-
<div class="relative overflow-hidden rounded-3xl border border-zinc-200 bg-white/80 p-8 backdrop-blur-sm transition-all hover:scale-105 hover:border-orange-300 hover:bg-white hover:shadow-2xl hover:shadow-orange-500/10">
30-
<!-- Gradient overlay on hover -->
31-
<div
32-
class="pointer-events-none absolute inset-0 bg-gradient-to-br from-orange-50/0 to-orange-50/0 opacity-0 transition-all duration-500 group-hover:from-orange-50/80 group-hover:to-transparent group-hover:opacity-100"
33-
></div>
34-
30+
<div class="relative overflow-hidden rounded-3xl border border-zinc-200/50 bg-white/80 p-8 backdrop-blur-md transition-all hover:border-[#00D372]/30 hover:bg-[#00D372]/5 hover:shadow-xl hover:shadow-[#00D372]/5">
3531
<div class="relative">
3632
<div
37-
class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-orange-500 to-amber-500 text-white shadow-lg shadow-orange-500/30 transition-all group-hover:scale-110 group-hover:shadow-xl group-hover:shadow-orange-500/50"
33+
class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-[#00D372] text-white shadow-lg shadow-[#00D372]/30 transition-all group-hover:shadow-xl group-hover:shadow-[#00D372]/40"
3834
>
3935
<BookOpen class="h-8 w-8" />
4036
</div>
41-
<h3 class="mb-4 font-[clash-display,ui-sans-serif,system-ui,sans-serif] text-2xl font-bold text-zinc-900 transition-colors group-hover:text-orange-600">
37+
<h3 class="mb-4 text-2xl font-bold text-zinc-900 transition-colors group-hover:text-[#00D372]">
4238
学習・教育
4339
</h3>
4440
<p class="leading-relaxed text-zinc-600">
@@ -49,19 +45,14 @@
4945
</div>
5046

5147
<div class="group relative">
52-
<div class="relative overflow-hidden rounded-3xl border border-zinc-200 bg-white/80 p-8 backdrop-blur-sm transition-all hover:scale-105 hover:border-amber-300 hover:bg-white hover:shadow-2xl hover:shadow-amber-500/10">
53-
<!-- Gradient overlay on hover -->
54-
<div
55-
class="pointer-events-none absolute inset-0 bg-gradient-to-br from-amber-50/0 to-amber-50/0 opacity-0 transition-all duration-500 group-hover:from-amber-50/80 group-hover:to-transparent group-hover:opacity-100"
56-
></div>
57-
48+
<div class="relative overflow-hidden rounded-3xl border border-zinc-200/50 bg-white/80 p-8 backdrop-blur-md transition-all hover:border-[#00D372]/30 hover:bg-[#00D372]/5 hover:shadow-xl hover:shadow-[#00D372]/5">
5849
<div class="relative">
5950
<div
60-
class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-amber-500 to-yellow-500 text-white shadow-lg shadow-amber-500/30 transition-all group-hover:scale-110 group-hover:shadow-xl group-hover:shadow-amber-500/50"
51+
class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-[#00D372] text-white shadow-lg shadow-[#00D372]/30 transition-all group-hover:shadow-xl group-hover:shadow-[#00D372]/40"
6152
>
6253
<Users class="h-8 w-8" />
6354
</div>
64-
<h3 class="mb-4 font-[clash-display,ui-sans-serif,system-ui,sans-serif] text-2xl font-bold text-zinc-900 transition-colors group-hover:text-amber-600">
55+
<h3 class="mb-4 text-2xl font-bold text-zinc-900 transition-colors group-hover:text-[#00D372]">
6556
交流
6657
</h3>
6758
<p class="leading-relaxed text-zinc-600">
@@ -72,19 +63,14 @@
7263
</div>
7364

7465
<div class="group relative">
75-
<div class="relative overflow-hidden rounded-3xl border border-zinc-200 bg-white/80 p-8 backdrop-blur-sm transition-all hover:scale-105 hover:border-yellow-300 hover:bg-white hover:shadow-2xl hover:shadow-yellow-500/10">
76-
<!-- Gradient overlay on hover -->
77-
<div
78-
class="pointer-events-none absolute inset-0 bg-gradient-to-br from-yellow-50/0 to-yellow-50/0 opacity-0 transition-all duration-500 group-hover:from-yellow-50/80 group-hover:to-transparent group-hover:opacity-100"
79-
></div>
80-
66+
<div class="relative overflow-hidden rounded-3xl border border-zinc-200/50 bg-white/80 p-8 backdrop-blur-md transition-all hover:border-[#00D372]/30 hover:bg-[#00D372]/5 hover:shadow-xl hover:shadow-[#00D372]/5">
8167
<div class="relative">
8268
<div
83-
class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-yellow-500 to-orange-500 text-white shadow-lg shadow-yellow-500/30 transition-all group-hover:scale-110 group-hover:shadow-xl group-hover:shadow-yellow-500/50"
69+
class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-[#00D372] text-white shadow-lg shadow-[#00D372]/30 transition-all group-hover:shadow-xl group-hover:shadow-[#00D372]/40"
8470
>
8571
<Code class="h-8 w-8" />
8672
</div>
87-
<h3 class="mb-4 font-[clash-display,ui-sans-serif,system-ui,sans-serif] text-2xl font-bold text-zinc-900 transition-colors group-hover:text-yellow-600">
73+
<h3 class="mb-4 text-2xl font-bold text-zinc-900 transition-colors group-hover:text-[#00D372]">
8874
開発
8975
</h3>
9076
<p class="leading-relaxed text-zinc-600">

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

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,18 @@
99
const { articles }: Props = $props();
1010
</script>
1111

12-
<section class="bg-zinc-900 py-32">
13-
<div class="mx-auto max-w-7xl px-6">
12+
<section class="bg-white py-32">
13+
<div class="mx-auto max-w-6xl px-6">
1414
<div class="mb-16 flex items-end justify-between">
1515
<div>
16-
<div class="mb-4 font-mono text-sm font-medium text-orange-400">NEWS & ARTICLES</div>
17-
<h2 class="font-[clash-display,ui-sans-serif,system-ui,sans-serif] text-5xl font-bold text-white lg:text-6xl">
16+
<div class="mb-4 font-mono text-sm font-medium uppercase tracking-widest text-[#00D372]">NEWS & ARTICLES</div>
17+
<h2 class="text-5xl font-bold text-zinc-900 lg:text-6xl">
1818
最新情報
1919
</h2>
2020
</div>
2121
<a
2222
href="/articles"
23-
class="group hidden items-center gap-2 font-bold text-zinc-400 transition-colors hover:text-white sm:flex"
23+
class="group hidden items-center gap-2 rounded-lg bg-zinc-900 px-6 py-3 font-semibold text-white transition-all hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-[#00D372] focus:ring-offset-2 sm:flex"
2424
>
2525
すべて見る
2626
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
@@ -31,11 +31,8 @@
3131
{#each articles as article (article.id)}
3232
<a
3333
href="/articles/{article.slug}"
34-
class="group relative overflow-hidden rounded-3xl border border-zinc-800 bg-zinc-950/50 backdrop-blur-sm transition-all hover:border-yellow-500/50"
34+
class="group relative overflow-hidden rounded-3xl border border-zinc-200/50 bg-white/80 backdrop-blur-md transition-all hover:border-[#00D372]/30 hover:bg-[#00D372]/5 hover:shadow-lg hover:shadow-[#00D372]/5 focus:outline-none focus:ring-2 focus:ring-[#00D372] focus:ring-offset-2"
3535
>
36-
<div
37-
class="pointer-events-none absolute inset-0 bg-gradient-to-br from-yellow-500/0 to-yellow-500/0 opacity-0 transition-all group-hover:from-yellow-500/10 group-hover:to-transparent group-hover:opacity-100"
38-
></div>
3936
<div class="relative">
4037
{#if article.coverUrl}
4138
<img
@@ -45,11 +42,11 @@
4542
/>
4643
{/if}
4744
<div class="p-6">
48-
<h3 class="mb-3 font-[clash-display,ui-sans-serif,system-ui,sans-serif] text-xl font-bold text-white transition-colors group-hover:text-yellow-400">
45+
<h3 class="mb-3 text-xl font-bold text-zinc-900 transition-colors group-hover:text-[#00D372]">
4946
{article.title}
5047
</h3>
5148
{#if article.excerpt}
52-
<p class="mb-4 line-clamp-2 text-sm leading-relaxed text-zinc-400">{article.excerpt}</p>
49+
<p class="mb-4 line-clamp-2 text-sm leading-relaxed text-zinc-600">{article.excerpt}</p>
5350
{/if}
5451
<div class="flex items-center gap-4 text-xs text-zinc-500">
5552
{#if article.author}
@@ -73,11 +70,11 @@
7370
{/each}
7471
</div>
7572
{:else}
76-
<p class="text-zinc-400">まだ記事がありません。</p>
73+
<p class="text-zinc-600">まだ記事がありません。</p>
7774
{/if}
7875
<a
7976
href="/articles"
80-
class="mt-8 flex items-center justify-center gap-2 font-bold text-zinc-400 transition-colors hover:text-white sm:hidden"
77+
class="mt-8 flex items-center justify-center gap-2 font-bold text-zinc-600 transition-colors hover:text-[#00D372] focus:outline-none focus:ring-2 focus:ring-[#00D372] focus:ring-offset-2 sm:hidden"
8178
>
8279
すべて見る
8380
<ArrowRight class="h-5 w-5" />

0 commit comments

Comments
 (0)