Skip to content

Commit faba213

Browse files
yamanokuyamanoku
committed
fix style
1 parent 1421428 commit faba213

5 files changed

Lines changed: 81 additions & 85 deletions

File tree

‎app/components/ChronicleView.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ const grouped = computed(() => {
9090
:id="`year-${year}`"
9191
>
9292
<span
93-
class="[font-family:var(--font-display)] font-[500] text-[clamp(72px,8vw,120px)] leading-[0.85] tracking-[-0.04em] tabular-nums text-[var(--ink)]"
93+
class="[font-family:var(--font-display)] font-[500] text-[clamp(72px,8vw,120px)] leading-[0.85] tabular-nums text-[var(--ink)]"
9494
aria-hidden="true"
9595
>{{ year }}</span
9696
>
@@ -107,7 +107,7 @@ const grouped = computed(() => {
107107
</div>
108108

109109
<!-- Rows -->
110-
<ul class="list-none p-0 m-0 border-t border-[var(--rule-soft)]">
110+
<ol class="list-none p-0 m-0 border-t border-[var(--rule-soft)]">
111111
<li
112112
v-for="(s, i) in arr"
113113
:key="`${year}-${i}`"
@@ -148,14 +148,14 @@ const grouped = computed(() => {
148148
:href="s.url"
149149
target="_blank"
150150
rel="noopener noreferrer"
151-
class="text-[var(--ink-2)] no-underline hover:text-[var(--ink)]"
151+
class="text-[var(--ink-2)] no-underline group hover:text-[var(--ink)]"
152152
>
153153
<span
154154
v-if="s.format === 'panel'"
155155
class="relative top-[-1px] inline-flex items-center self-center align-middle [font-family:var(--font-mono)] text-[10px] uppercase tracking-[0.06em] border border-[var(--ink)] text-[var(--ink)] px-[5px] py-[1px] leading-[1.15] mr-[8px]"
156156
>{{ t.session_format_panel }}</span
157157
>
158-
<span class="hover:underline">{{ s.title }}</span>
158+
<span class="group-hover:underline">{{ s.title }}</span>
159159
<span
160160
class="[font-family:var(--font-mono)] text-[10px] text-[var(--ink-2)] ml-[4px]"
161161
>({{ t.external }})</span
@@ -169,7 +169,7 @@ const grouped = computed(() => {
169169
</div>
170170
</div>
171171
</li>
172-
</ul>
172+
</ol>
173173
</li>
174174
</ol>
175175
</section>

‎app/components/DirectoryView.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,7 @@ function toggleRow(name: string) {
234234
>
235235
<div class="flex flex-col gap-y-[8px]">
236236
<a
237-
class="text-[14px] text-[var(--ink)] pb-[1px] leading-[1.45] no-underline"
237+
class="text-[14px] text-[var(--ink)] pb-[1px] leading-[1.45] no-underline group"
238238
:href="talk.url"
239239
target="_blank"
240240
rel="noopener noreferrer"
@@ -244,7 +244,7 @@ function toggleRow(name: string) {
244244
class="relative top-[-1px] inline-flex items-center self-center align-middle [font-family:var(--font-mono)] text-[10px] uppercase tracking-[0.06em] border border-[var(--ink)] text-[var(--ink)] px-[5px] py-[1px] leading-[1.15] mr-[8px]"
245245
>{{ t.session_format_panel }}</span
246246
>
247-
<span class="hover:underline">{{ talk.title || t.tbd }}</span>
247+
<span class="group-hover:underline">{{ talk.title || t.tbd }}</span>
248248
<span
249249
class="[font-family:var(--font-mono)] text-[10px] text-[var(--ink-2)] ml-[4px]"
250250
>({{ t.external }})</span

‎app/composables/useVfjsI18n.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export interface VfjsTranslations {
2525
back_top: string;
2626
official_site: string;
2727
related_talks: string;
28+
all_speakers: string;
2829
year_total_talks: (n: number) => string;
2930
appearance_count: (n: number) => string;
3031
}
@@ -58,6 +59,7 @@ const translations: Record<'ja' | 'en', VfjsTranslations> = {
5859
back_top: 'TOPページに戻る',
5960
official_site: '公式サイト',
6061
related_talks: '発表一覧',
62+
all_speakers: '発表者一覧',
6163
year_total_talks: (n: number) => `全 ${n} 発表`,
6264
appearance_count: (n: number) => `${n}回登壇`,
6365
},
@@ -89,6 +91,7 @@ const translations: Record<'ja' | 'en', VfjsTranslations> = {
8991
back_top: 'Back to top page',
9092
official_site: 'Official site',
9193
related_talks: 'Talks',
94+
all_speakers: 'Speakers',
9295
year_total_talks: (n: number) => `${n} talks total`,
9396
appearance_count: (n: number) => `${n} appearance${n > 1 ? 's' : ''}`,
9497
},

‎app/pages/[year]/index.vue‎

Lines changed: 56 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -26,84 +26,79 @@ useHead({ title: `Vue Fes Japan ${year}` });
2626
class="border-b border-[var(--rule)] pt-[clamp(32px,5vw,72px)] pb-[clamp(24px,4vw,48px)] px-[var(--pad-x)]"
2727
>
2828
<h1
29-
class="[font-family:var(--font-display)] text-[clamp(28px,4.5vw,72px)] font-bold tracking-[-0.04em] leading-[1] mb-[16px]"
29+
class="[font-family:var(--font-display)] text-[clamp(28px,4.5vw,72px)] font-[500] leading-[1] mb-[16px]"
3030
>
3131
Vue Fes Japan <span v-if="year === '2022'">Online </span
3232
><em class="not-italic text-[var(--accent)]">{{ year }}</em>
3333
</h1>
34-
<div class="[font-family:var(--font-mono)] text-[12px] text-[var(--ink-2)]">
34+
<div class="[font-family:var(--font-mono)] text-[var(--ink-3)]">
3535
<div>{{ t.year_total_talks(filterYearSpeaker?.length ?? 0) }}</div>
36-
<div class="mt-[8px]">
36+
<div class="mt-[8px] text-[12px]">
3737
<a
3838
:href="`https://vuefes.jp/${year}/`"
3939
target="_blank"
4040
rel="noopener noreferrer"
41-
class="text-[var(--ink)] no-underline flex items-baseline gap-[4px]"
41+
class="text-[var(--ink-2)] no-underline group flex items-baseline gap-[4px]"
4242
>
43-
<span class="hover:underline">{{ t.official_site }}</span
44-
><span>{{ t.external }}</span>
43+
<span class="group-hover:underline">{{ t.official_site }}</span
44+
><span class="text-[10px]">({{ t.external }})</span>
4545
</a>
4646
</div>
4747
</div>
4848
</header>
4949

50-
<section class="px-[var(--pad-x)] py-[40px]">
50+
<section class="px-[var(--pad-x)] py-[40px] border-b border-[var(--rule-softer)]">
51+
<h2 class="[font-family:var(--font-mono)] tracking-[0.1em] text-[var(--ink-3)] mb-[16px]">
52+
{{ t.all_speakers }}
53+
</h2>
5154
<ol class="list-none p-0 m-0">
52-
<li class="border-b border-[var(--rule)]">
53-
<ul class="list-none p-0 m-0">
54-
<li
55-
v-for="(s, i) in filterYearSpeaker"
56-
:key="i"
57-
class="grid grid-cols-[40px_1fr] border-t border-[var(--rule-softer)] py-[18px]"
58-
>
59-
<div
60-
class="[font-family:var(--font-mono)] text-[12px] text-[var(--ink-2)] pt-[5px] text-center"
61-
aria-hidden="true"
62-
>
63-
<span>{{ String(i + 1).padStart(2, '0') }}</span>
64-
</div>
65-
<div class="pr-[24px]">
66-
<div class="flex flex-wrap gap-x-[8px] gap-y-[4px] mb-[6px] items-center">
67-
<template v-for="(n, ni) in s.name" :key="n">
68-
<span
69-
v-if="ni > 0"
70-
class="text-[var(--ink-2)] text-[12px]"
71-
aria-hidden="true"
72-
>
73-
×
74-
</span>
75-
<NuxtLink
76-
class="text-[18px] [font-family:var(--font-mono)] border-b border-[var(--rule-soft)] pb-[1px] no-underline transition-colors hover:border-[var(--accent)] hover:text-[var(--accent)]"
77-
:to="`/speakers/${encodeURIComponent(n)}`"
78-
>
79-
<ruby v-if="s.nameRuby?.[ni] && lang === 'ja'" lang="ja"
80-
>{{ n }}<rt>{{ s.nameRuby[ni] }}</rt></ruby
81-
>
82-
<span v-else>{{ lang === 'en' && s.nameEn?.[ni] ? s.nameEn[ni] : n }}</span>
83-
</NuxtLink>
84-
</template>
85-
</div>
86-
<div class="text-[14px] text-[var(--ink-2)]">
87-
<a
88-
v-if="s.title"
89-
:href="s.url"
90-
target="_blank"
91-
rel="noopener noreferrer"
92-
class="no-underline"
55+
<li
56+
v-for="(s, i) in filterYearSpeaker"
57+
:key="i"
58+
class="grid grid-cols-[40px_1fr] border-t border-[var(--rule-softer)] py-[18px]"
59+
>
60+
<div
61+
class="[font-family:var(--font-mono)] text-[12px] text-[var(--ink-2)] pt-[5px] text-center"
62+
aria-hidden="true"
63+
>
64+
<span>{{ String(i + 1).padStart(2, '0') }}</span>
65+
</div>
66+
<div class="pr-[24px]">
67+
<div class="flex flex-wrap gap-x-[8px] gap-y-[4px] mb-[6px] items-center">
68+
<template v-for="(n, ni) in s.name" :key="n">
69+
<span v-if="ni > 0" class="text-[var(--ink-2)] text-[12px]" aria-hidden="true">
70+
×
71+
</span>
72+
<NuxtLink
73+
class="text-[18px] [font-family:var(--font-mono)] border-b border-[var(--rule-soft)] pb-[1px] no-underline transition-colors hover:border-[var(--accent)] hover:text-[var(--accent)]"
74+
:to="`/speakers/${encodeURIComponent(n)}`"
75+
>
76+
<ruby v-if="s.nameRuby?.[ni] && lang === 'ja'" lang="ja"
77+
>{{ n }}<rt>{{ s.nameRuby[ni] }}</rt></ruby
9378
>
94-
<span
95-
v-if="s.format === 'panel'"
96-
class="relative top-[-1px] inline-flex items-center self-center align-middle [font-family:var(--font-mono)] text-[10px] uppercase tracking-[0.06em] border border-[var(--ink)] text-[var(--ink)] px-[5px] py-[1px] leading-[1.15] mr-[8px]"
97-
>{{ t.session_format_panel }}</span
98-
>
99-
<span>{{ s.title }}</span>
100-
<span class="text-[10px] ml-[4px]">({{ t.external }})</span>
101-
</a>
102-
<span v-else class="italic text-[var(--ink-2)] no-underline">{{ t.tbd }}</span>
103-
</div>
104-
</div>
105-
</li>
106-
</ul>
79+
<span v-else>{{ lang === 'en' && s.nameEn?.[ni] ? s.nameEn[ni] : n }}</span>
80+
</NuxtLink>
81+
</template>
82+
</div>
83+
<div class="text-[14px] text-[var(--ink-2)]">
84+
<a
85+
v-if="s.title"
86+
:href="s.url"
87+
target="_blank"
88+
rel="noopener noreferrer"
89+
class="no-underline group"
90+
>
91+
<span
92+
v-if="s.format === 'panel'"
93+
class="relative top-[-1px] inline-flex items-center self-center align-middle [font-family:var(--font-mono)] text-[10px] uppercase tracking-[0.06em] border border-[var(--ink)] text-[var(--ink)] px-[5px] py-[1px] leading-[1.15] mr-[8px]"
94+
>{{ t.session_format_panel }}</span
95+
>
96+
<span class="group-hover:underline">{{ s.title }}</span>
97+
<span class="text-[10px] ml-[4px]">({{ t.external }})</span>
98+
</a>
99+
<span v-else class="italic text-[var(--ink-2)] no-underline">{{ t.tbd }}</span>
100+
</div>
101+
</div>
107102
</li>
108103
</ol>
109104
</section>

‎app/pages/speakers/[name]/index.vue‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ useHead({ title: `${speakerName} 発表一覧` });
5353
class="border-b border-[var(--rule)] pt-[clamp(32px,5vw,72px)] pb-[clamp(24px,4vw,48px)] px-[var(--pad-x)]"
5454
>
5555
<h1
56-
class="[font-family:var(--font-display)] text-[clamp(28px,4.5vw,72px)] font-bold tracking-[-0.04em] leading-[1] mb-[16px]"
56+
class="[font-family:var(--font-display)] text-[clamp(28px,4.5vw,72px)] font-bold leading-[1] mb-[16px]"
5757
:lang="hasJapanese(record.name) ? 'ja' : 'en'"
5858
>
5959
<ruby v-if="record.nameRuby && lang === 'ja'"
@@ -63,31 +63,27 @@ useHead({ title: `${speakerName} 発表一覧` });
6363
lang === 'en' && record.nameEn ? record.nameEn : record.name
6464
}}</template>
6565
</h1>
66-
<div class="[font-family:var(--font-mono)] text-[12px] text-[var(--ink-3)]">
66+
<div class="[font-family:var(--font-mono)] text-[var(--ink-3)]">
6767
<div>{{ t.appearance_count(record.talks.length) }}</div>
68-
<div class="mt-[8px]">
68+
<div class="mt-[8px] text-[12px] text-[var(--ink-2)]">
6969
{{ t.years_appeared }}:
7070
<template v-for="(year, i) in record.years" :key="year">
7171
<template v-if="i > 0">, </template>
72-
<NuxtLink :to="`/${year}`" class="text-[var(--ink)] underline hover:no-underline">{{
73-
year
74-
}}</NuxtLink>
72+
<NuxtLink :to="`/${year}`" class="underline hover:no-underline">{{ year }}</NuxtLink>
7573
</template>
7674
</div>
7775
</div>
7876
</header>
7977

8078
<section class="px-[var(--pad-x)] py-[40px]">
81-
<div
82-
class="[font-family:var(--font-mono)] text-[10px] tracking-[0.1em] text-[var(--ink-3)] mb-[16px]"
83-
>
79+
<h2 class="[font-family:var(--font-mono)] tracking-[0.1em] text-[var(--ink-3)] mb-[16px]">
8480
{{ t.related_talks }}
85-
</div>
86-
<ol class="list-none p-0 m-0">
81+
</h2>
82+
<ul class="list-none p-0 m-0">
8783
<li
8884
v-for="(talk, i) in record.talks"
8985
:key="i"
90-
class="grid grid-cols-[60px_1fr] gap-x-[16px] items-baseline py-[14px] border-t border-[var(--rule-softer)]"
86+
class="grid grid-cols-[40px_1fr] gap-x-[16px] items-baseline py-[14px] border-t border-[var(--rule-softer)]"
9187
>
9288
<span class="[font-family:var(--font-mono)] text-[11px] text-[var(--ink-3)]">
9389
<NuxtLink
@@ -98,7 +94,7 @@ useHead({ title: `${speakerName} 発表一覧` });
9894
</span>
9995
<div class="flex flex-col gap-y-[8px]">
10096
<a
101-
class="text-[16px] text-[var(--ink)] no-underline flex flex-wrap items-baseline gap-[4px]"
97+
class="text-[16px] text-[var(--ink)] no-underline group flex flex-wrap items-baseline gap-[4px]"
10298
:href="talk.url"
10399
target="_blank"
104100
rel="noopener noreferrer"
@@ -109,9 +105,11 @@ useHead({ title: `${speakerName} 発表一覧` });
109105
>{{ t.session_format_panel }}</span
110106
>
111107
<span>
112-
<span :lang="hasJapanese(talk.title || '') ? 'ja' : 'en'">{{
113-
talk.title || t.tbd
114-
}}</span>
108+
<span
109+
:lang="hasJapanese(talk.title || '') ? 'ja' : 'en'"
110+
class="group-hover:underline"
111+
>{{ talk.title || t.tbd }}</span
112+
>
115113
<span class="text-[10px] ml-[4px]">({{ t.external }})</span>
116114
</span>
117115
</a>
@@ -131,7 +129,7 @@ useHead({ title: `${speakerName} 発表一覧` });
131129
</span>
132130
</div>
133131
</li>
134-
</ol>
132+
</ul>
135133
</section>
136134

137135
<AppFooter />

0 commit comments

Comments
 (0)