Skip to content

Commit e21f7dd

Browse files
ubugeeeiubugeeei
committed
migrate: components
1 parent 5dbd451 commit e21f7dd

34 files changed

+4224
-2
lines changed

‎app/components/AboutDescription.vue

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<script setup lang="ts">
2+
import StyleMount from "./StyleMount.vue";
3+
</script>
4+
5+
<template>
6+
<StyleMount
7+
class="AboutDescription u-wrapper"
8+
tag="section"
9+
>
10+
<div class="u-container">
11+
<h2 class="title u-nowrap">
12+
{{ $t('vuejs-jp-ug') }}
13+
</h2>
14+
15+
<div class="row">
16+
<div class="column">
17+
<p class="body">
18+
{{ $t('components.AboutDescription.message1') }}
19+
</p>
20+
<p class="body">
21+
{{ $t('components.AboutDescription.message2') }}
22+
</p>
23+
</div>
24+
25+
<div class="column">
26+
<p class="body">
27+
{{ $t('components.AboutDescription.message3') }}
28+
</p>
29+
<p class="body">
30+
{{ $t('components.AboutDescription.message4') }}
31+
</p>
32+
</div>
33+
</div>
34+
</div>
35+
</StyleMount>
36+
</template>
37+
38+
<style lang="postcss" scoped>
39+
@import '@/assets/styles/variables';
40+
41+
.AboutDescription {
42+
padding-bottom: 128px;
43+
44+
@media (min-width: 768px) {
45+
padding-bottom: 192px;
46+
}
47+
}
48+
49+
.AboutDescription.mount-active {
50+
transition: opacity 0.5s, transform 0.5s;
51+
transition-delay: 0.75s;
52+
}
53+
54+
.AboutDescription.mount {
55+
opacity: 0;
56+
transform: translateY(8px);
57+
}
58+
59+
.title {
60+
padding-bottom: 32px;
61+
font-size: 20px;
62+
font-weight: 700;
63+
64+
@media (min-width: 375px) {
65+
font-size: 24px;
66+
line-height: 32px;
67+
}
68+
69+
@media (min-width: 768px) {
70+
font-size: 32px;
71+
line-height: 40px;
72+
}
73+
}
74+
75+
.row {
76+
@media (min-width: 768px) {
77+
display: flex;
78+
}
79+
}
80+
81+
.column {
82+
& + & {
83+
padding-top: 28px;
84+
}
85+
86+
@media (min-width: 768px) {
87+
width: 50%;
88+
89+
&:nth-child(1) { padding-right: 16px; }
90+
&:nth-child(2) { padding-left: 16px; }
91+
92+
& + & {
93+
padding-top: 0;
94+
}
95+
}
96+
97+
@media (min-width: 1056px) {
98+
&:nth-child(1) { padding-right: 32px; }
99+
&:nth-child(2) { padding-left: 32px; }
100+
}
101+
}
102+
103+
.body {
104+
line-height: 28px;
105+
106+
& + & {
107+
padding-top: 28px;
108+
}
109+
}
110+
</style>

‎app/components/AboutHero.vue

+184
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
<script setup lang="ts">
2+
import StyleMount from "./StyleMount.vue";
3+
import ImageStack from "./ImageStack.vue";
4+
5+
const images = [
6+
{
7+
src: "/img/about/vue-fes-japan-2018-memory.jpg",
8+
alt: "Vue Fes Japan 2018 – Getting signature from Evan You."
9+
},
10+
{
11+
src: "/img/about/vue-fes-japan-2018-peace.jpg",
12+
alt: "Vue Fes Japan 2018 – Working as a team."
13+
},
14+
{
15+
src: "/img/about/v-meetup-tokyo-10-showtime.jpg",
16+
alt: "Vue.js v-tokyo Meetup #10 – Audiences."
17+
},
18+
{
19+
src: "/img/about/vue-fes-japan-2018-after-party.jpg",
20+
alt: "Vue Fes Japan 2018 – After party."
21+
},
22+
{
23+
src: "/img/about/v-meetup-tokyo-10-reception.jpg",
24+
alt: "Vue.js v-tokyo Meetup #10 – Reception."
25+
},
26+
{
27+
src: "/img/about/vue-fes-japan-2018-talks.jpg",
28+
alt: "Vue Fes Japan 2018 – Having a nice talk."
29+
}
30+
];
31+
</script>
32+
33+
<template>
34+
<StyleMount class="AboutHero u-wrapper">
35+
<div class="u-relative u-container">
36+
<div class="content">
37+
<i18n
38+
tag="h1"
39+
path="components.AboutHero.title"
40+
class="title"
41+
>
42+
<template #newline>
43+
<br>
44+
</template>
45+
<template #vuejs>
46+
<span class="u-nowrap">{{ $t('components.AboutHero.vuejs') }}</span>
47+
</template>
48+
</i18n>
49+
<i18n
50+
tag="p"
51+
path="components.AboutHero.text"
52+
class="text"
53+
>
54+
<template #newline>
55+
<br>
56+
</template>
57+
</i18n>
58+
</div>
59+
60+
<div class="image">
61+
<div class="image-container">
62+
<ImageStack
63+
:images="images"
64+
:aspect-ratio="1136 / 2016 * 100"
65+
to="bottom"
66+
/>
67+
</div>
68+
</div>
69+
</div>
70+
</StyleMount>
71+
</template>
72+
73+
<style lang="postcss" scoped>
74+
@import '@/assets/styles/variables';
75+
76+
.AboutHero {
77+
padding-top: 32px;
78+
padding-bottom: 96px;
79+
80+
@media (min-width: 560px) {
81+
padding-top: 0;
82+
}
83+
84+
@media (min-width: 768px) {
85+
padding-top: 32px;
86+
padding-bottom: 128px;
87+
}
88+
89+
@media (min-width: 1056px) {
90+
padding-bottom: 160px;
91+
}
92+
}
93+
94+
.AboutHero.mount-active {
95+
.title,
96+
.text,
97+
.image {
98+
transition: opacity 0.5s, transform 0.5s;
99+
}
100+
101+
.title { transition-delay: 0.1s; }
102+
.text { transition-delay: 0.2s; }
103+
.image { transition-delay: 0.5s; }
104+
}
105+
106+
.AboutHero.mount {
107+
.title,
108+
.text,
109+
.image {
110+
opacity: 0;
111+
transform: translateY(8px);
112+
}
113+
}
114+
115+
.content {
116+
text-align: center;
117+
118+
@media (min-width: 560px) {
119+
padding: 32px 0 0;
120+
}
121+
122+
@media (min-width: 768px) {
123+
padding: 64px 0 0;
124+
}
125+
}
126+
127+
.title {
128+
margin: 0 auto;
129+
font-family: var(--font-family-en);
130+
font-size: 32px;
131+
font-weight: 600;
132+
line-height: 36px;
133+
letter-spacing: -0.4px;
134+
135+
@media (min-width: 375px) {
136+
font-size: 40px;
137+
line-height: 44px;
138+
}
139+
140+
@media (min-width: 560px) {
141+
font-size: 48px;
142+
line-height: 56px;
143+
}
144+
145+
@media (min-width: 768px) {
146+
width: 100%;
147+
font-size: 64px;
148+
line-height: 68px;
149+
}
150+
}
151+
152+
.text {
153+
max-width: 768px;
154+
padding-top: 16px;
155+
margin: 0 auto;
156+
line-height: 28px;
157+
letter-spacing: -0.4px;
158+
159+
br { display: none; }
160+
161+
@media (min-width: 768px) {
162+
font-size: 20px;
163+
line-height: 36px;
164+
165+
br { display: block; }
166+
}
167+
}
168+
169+
.image {
170+
padding-top: 32px;
171+
172+
@media (min-width: 768px) {
173+
padding-top: 64px;
174+
}
175+
}
176+
177+
.image-container {
178+
margin: 0 -16px;
179+
180+
@media (min-width: 768px) {
181+
margin: 0 -24px;
182+
}
183+
}
184+
</style>

0 commit comments

Comments
 (0)