Skip to content

Commit 2c03e45

Browse files
ryudoawaruryudoawaru
committed
Fix the layout
1 parent 9a289bf commit 2c03e45

28 files changed

Lines changed: 1067 additions & 566 deletions

‎_data/schedule.yml‎

Lines changed: 523 additions & 0 deletions
Large diffs are not rendered by default.

‎_includes/pc_nav.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<nav
2+
class="hidden md:block transition-opacity duration-100 grow relative top-0 mt-25 w-full"
3+
>
4+
<div
5+
class="flex flex-col space-y-2 w-fit font-extrabold text-2xl"
6+
:class="activeSection === 'top' ? '' : 'fixed left-16 top-20'"
7+
>
8+
<a
9+
href="#speakers"
10+
class="nav-link transition-colors cursor-pointer"
11+
:class="activeSection === 'speakers' ? 'text-red-active' : 'text-red-light hover:text-red-light-active'"
12+
@click.prevent="scrollToSection('speakers')"
13+
>SPEAKERS</a
14+
>
15+
<a
16+
href="#schedule"
17+
class="nav-link transition-colors cursor-pointer"
18+
:class="activeSection === 'schedule' ? 'text-red-active' : 'text-red-light hover:text-red-light-active'"
19+
@click.prevent="scrollToSection('schedule')"
20+
>SCHEDULE</a
21+
>
22+
<a
23+
href="#venue"
24+
class="nav-link transition-colors cursor-pointer"
25+
:class="activeSection === 'venue' ? 'text-red-active' : 'text-red-light hover:text-red-light-active'"
26+
@click.prevent="scrollToSection('venue')"
27+
>VENUE</a
28+
>
29+
<a
30+
href="#party"
31+
class="nav-link transition-colors cursor-pointer"
32+
:class="activeSection === 'party' ? 'text-red-active' : 'text-red-light hover:text-red-light-active'"
33+
@click.prevent="scrollToSection('party')"
34+
>PARTY</a
35+
>
36+
<a
37+
href="#coscup"
38+
class="nav-link transition-colors cursor-pointer"
39+
:class="activeSection === 'coscup' ? 'text-red-active' : 'text-red-light hover:text-red-light-active'"
40+
@click.prevent="scrollToSection('coscup')"
41+
>COSCUP</a
42+
>
43+
</div>
44+
</nav>

‎_includes/schedule.html‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
<section id="day-{{ include.day }}-schedule">
2+
<div
3+
data-aos="fade-up"
4+
data-aos-duration="700"
5+
data-aos-easing="ease-in"
6+
class="mb-5 md:pl-16 pl-5 flex gap-2 md:hidden items-center"
7+
>
8+
<h2 class="md:text-3xl text-xl font-bold text-red-normal-active">
9+
SCHEDULE
10+
</h2>
11+
<div class="mb-3">{% include icons/decorateTitleMobile.svg %}</div>
12+
</div>
13+
14+
<table class="border-collapse w-full">
15+
<thead
16+
class="hidden md:table-header-group bg-blue-normal text-blue-light text-2xl"
17+
>
18+
<tr class="*:py-3 *:border *:border-blue-light">
19+
<th width="30%">Time</th>
20+
<th width="70%">Schedule</th>
21+
</tr>
22+
</thead>
23+
<tbody>
24+
{% assign schedules = site.data.schedule | where: "day", include.day %}
25+
{% for schedule in schedules %}
26+
<tr
27+
class="md:*:py-5 *:border md:*:border-t *:border-t-0 first:*:border-t-1 *:border-white {% if schedule.type != 'break' %} bg-blue-light {% endif %}"
28+
>
29+
<td
30+
class="hidden md:table-cell text-center text-2xl font-bold text-blue-normal"
31+
>
32+
{{ schedule.start_time }}
33+
</td>
34+
<td
35+
class="*:py-5 md:*:py-0 flex flex-col flex-1 gap-3 items-center md:divide-y-0 divide-y-1 divide-blue-light"
36+
>
37+
<div class="flex gap-2 justify-center items-center w-full">
38+
{% if schedule.type == 'break' %}
39+
<span class="w-fit h-fit">
40+
{% include icons/decorateTitleLeftIcon.svg %}
41+
</span>
42+
{% endif %}
43+
<p class="session-subject flex gap-2 text-blue-normal md:text-2xl text-xl font-extrabold px-2 text-center">
44+
<span>
45+
{% if schedule.type == 'session' %}
46+
{{ schedule.subject }} （{{ schedule.track }}）
47+
{% else %}
48+
{{ schedule.subject }}
49+
{% endif %}
50+
</span>
51+
</p>
52+
{% if schedule.type == 'break' %}
53+
<span class="w-fit h-fit">
54+
{% include icons/decorateTitleRightIcon.svg %}
55+
</span>
56+
{% endif %}
57+
</div>
58+
59+
{% if schedule.type == 'session' %}
60+
<div
61+
class="md:mt-4 space-y-6 flex flex-col items-center w-full"
62+
>
63+
<div class="md:hidden flex gap-2 items-center justify-center">
64+
<p
65+
class="text-blue-normal md:text-2xl text-xl font-extrabold"
66+
>
67+
Place
68+
</p>
69+
</div>
70+
<!-- speaker avatar -->
71+
<div
72+
data-aos="fade-up"
73+
data-aos-delay="{{ forloop.index | times: 50 }}"
74+
data-aos-duration="1000"
75+
data-aos-easing="ease-in-out"
76+
@click="open_id = '{{ schedule.speaker_id }}'"
77+
class="px-4 group grow flex lg:flex-row flex-col gap-2 items-center justify-center space-y-2 hover:-translate-y-4 duration-300 cursor-pointer w-full max-w-lg"
78+
>
79+
<div
80+
class="md:w-45 md:h-45 w-40 h-40 border rounded-full relative shrink-0"
81+
>
82+
<div
83+
class="absolute inset-1 rounded-full border border-white z-10"
84+
></div>
85+
<img
86+
class="w-full h-full object-cover group-hover:opacity-80 duration-300 rounded-full relative shrink-0"
87+
src="/assets/images/{{ schedule.speaker_avatar }}"
88+
alt="{{ schedule.speaker_name }}"
89+
/>
90+
</div>
91+
<div class="grow hidden lg:block w-full min-w-0">
92+
<div
93+
class="flex gap-2 items-center text-xs text-green-normal"
94+
>
95+
<div
96+
class="px-3 py-1 text-xs text-green-normal bg-green-light border border-green-normal rounded-lg w-fit"
97+
>
98+
{{ schedule.lang }}
99+
</div>
100+
<p>{{ schedule.subject }}</p>
101+
</div>
102+
<div
103+
class="flex lg:flex-row flex-col gap-2 items-center text-xs text-center w-full text-green-normal divide-x divide-green-normal"
104+
>
105+
<p class="pr-2 truncate">{{ schedule.speaker_name }}</p>
106+
</div>
107+
</div>
108+
<p
109+
class="lg:hidden text-center text-green-normal group-hover:text-green-normal-active duration-300 font-bold text-sm md:text-base truncate w-full px-2"
110+
>
111+
{{ schedule.speaker_name }}
112+
</p>
113+
<div
114+
class="lg:hidden flex gap-2 items-center text-xs md:text-sm text-green-normal group-hover:text-green-normal-active duration-300"
115+
>
116+
<p>{{ schedule.speaker_bio }}</p>
117+
<div
118+
class="px-3 py-1 text-xs text-green-normal group-hover:text-green-normal-active duration-300 bg-green-light hover:bg-green-light-active border border-green-normal rounded-md w-fit"
119+
>
120+
{{ schedule.lang }}
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
{% endif %}
126+
</td>
127+
</tr>
128+
{% endfor %}
129+
</tbody>
130+
</table>
131+
</section>

‎_includes/sp_nav.html‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<div
2+
x-bind:class="{'bg-blue-normal shadow duration-100': !at_top || is_open_mobile_nav}"
3+
class="md:hidden fixed top-0 left-0 right-0 z-30 w-full h-fit px-6 py-2.5 transition-all duration-300"
4+
>
5+
<div
6+
@click="is_open_mobile_nav = true"
7+
x-bind:class="(at_top && !is_open_mobile_nav) ? 'hidden' : 'flex justify-center w-full'"
8+
class="absolute top-0 left-0 pt-2.5 flex justify-center"
9+
>
10+
<span class="w-10 h-10">{% include images/topBgMobile.svg %}</span>
11+
</div>
12+
<button
13+
@click="is_open_mobile_nav = !is_open_mobile_nav"
14+
type="button"
15+
class="rounded-md p-1 text-white text-2xl hover:bg-white/10 transition-colors w-10 h-10"
16+
>
17+
<span class="w-10 h-10 text-white"
18+
>{% include icons/navBarIcon.svg %}</span
19+
>
20+
</button>
21+
22+
<!-- mobile menu -->
23+
<div
24+
x-show="is_open_mobile_nav"
25+
x-transition:enter="transition ease-out duration-100"
26+
x-transition:enter-start="transform opacity-0 scale-95"
27+
x-transition:enter-end="transform opacity-100 scale-100"
28+
x-transition:leave="transition ease-in duration-75"
29+
x-transition:leave-start="transform opacity-100 scale-100"
30+
x-transition:leave-end="transform opacity-0 scale-95"
31+
class="mt-6 flow-root"
32+
@click.away="is_open_mobile_nav = false"
33+
>
34+
<div class="-my-6 divide-y divide-white/10">
35+
<div class="space-y-2 py-6">
36+
<a
37+
href="#speakers"
38+
@click.prevent="scrollToSection('speakers')"
39+
class="-mx-3 block px-3 py-2 font-semibold leading-7 text-white hover:text-red-light transition-colors"
40+
>
41+
SPEAKERS
42+
</a>
43+
<a
44+
href="#schedule"
45+
@click.prevent="scrollToSection('schedule')"
46+
class="-mx-3 block px-3 py-2 font-semibold leading-7 text-white hover:text-red-light transition-colors"
47+
>
48+
SCHEDULE
49+
</a>
50+
<a
51+
href="#venue"
52+
@click.prevent="scrollToSection('venue')"
53+
class="-mx-3 block px-3 py-2 font-semibold leading-7 text-white hover:text-red-light transition-colors"
54+
>
55+
VENUE
56+
</a>
57+
<a
58+
href="#party"
59+
@click.prevent="scrollToSection('party')"
60+
class="-mx-3 block px-3 py-2 font-semibold leading-7 text-white hover:text-red-light transition-colors"
61+
>
62+
PARTY
63+
</a>
64+
<a
65+
href="#coscup"
66+
@click.prevent="scrollToSection('coscup')"
67+
class="-mx-3 block px-3 py-2 font-semibold leading-7 text-white hover:text-red-light transition-colors"
68+
>
69+
COSCUP
70+
</a>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
76+
<div
77+
class="lg:pl-57.5 md:pl-40 w-full h-full flex justify-end-safe items-start md:items-center overflow-hidden"
78+
>
79+
<span class="grow hidden md:block w-screen max-w-[1240px] h-fit"
80+
>{% include images/topBg.svg %}</span
81+
>
82+
<span class="block md:hidden w-screen h-auto"
83+
>{% include images/topBgMobile.svg %}</span
84+
>
85+
</div>
86+
<section
87+
id="top"
88+
class="relative w-fit h-fit py-10 md:absolute z-10 top-0 md:left-16 left-5 md:pr-32 flex flex-col items-center md:gap-7 xl:gap-20 gap-4 md:items-start justify-between overflow-hidden"
89+
data-aos="fade-up"
90+
data-aos-duration="1000"
91+
data-aos-easing="ease-in-out"
92+
data-aos-once="true"
93+
>
94+
<div
95+
class="hidden md:flex flex-col space-y-2 w-fit font-extrabold text-xl"
96+
data-aos="fade-right"
97+
>
98+
<a
99+
href="#speakers"
100+
class="nav-link transition-colors cursor-pointer text-red-light-active hover:text-red-light-hover"
101+
@click.prevent="scrollToSection('speakers')"
102+
>SPEAKERS</a
103+
>
104+
<a
105+
href="#schedule"
106+
class="nav-link transition-colors cursor-pointer text-red-light-active hover:text-red-light-hover"
107+
@click.prevent="scrollToSection('schedule')"
108+
>SCHEDULE</a
109+
>
110+
<a
111+
href="#venue"
112+
class="nav-link transition-colors cursor-pointer text-red-light-active hover:text-red-light-hover"
113+
@click.prevent="scrollToSection('venue')"
114+
>VENUE</a
115+
>
116+
<a
117+
href="#party"
118+
class="nav-link transition-colors cursor-pointer text-red-light-active hover:text-red-light-hover"
119+
@click.prevent="scrollToSection('party')"
120+
>PARTY</a
121+
>
122+
<a
123+
href="#coscup"
124+
class="nav-link transition-colors cursor-pointer text-red-light-active hover:text-red-light-hover"
125+
@click.prevent="scrollToSection('coscup')"
126+
>COSCUP</a
127+
>
128+
</div>
129+
<div class="text-start font-extrabold text-green-darker md:max-w-md">
130+
<p class="lg:text-4xl sm:text-3xl text-xl">2025/08/09-10</p>
131+
<p class="mt-2 md:mt-4 lg:text-4xl sm:text-3xl text-xl">
132+
National Taiwan University <br />
133+
of <br />
134+
Science and Technology
135+
</p>
136+
<p class="mt-2 text-green-normal font-bold">Free Entry</p>
137+
</div>
138+
<a
139+
href="#speakers"
140+
aria-label="scroll down"
141+
@click.prevent="scrollToSection('speakers')"
142+
class="hidden md:block md:w-9 md:h-19 w-6 h-14 animate-bounce cursor-pointer"
143+
data-aos="fade-up"
144+
data-aos-duration="1000"
145+
data-aos-easing="ease-in"
146+
data-aos-delay="1000"
147+
>
148+
{% include icons/arrowDown.svg %}
149+
</a>
150+
</section>

0 commit comments

Comments
 (0)