Skip to content

Commit 17340a5

Browse files
tlitfintlitfin
committed
Update style of even tile
1 parent 0781277 commit 17340a5

2 files changed

Lines changed: 292 additions & 1 deletion

File tree

‎_includes/events.html‎

Lines changed: 291 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,291 @@
1+
<div class="events {{ include.event_type }}">
2+
<div class="events-container">
3+
<div class="events-section">
4+
{%- assign current_date = "now" | date: "%s" -%}
5+
<div class="events-category">
6+
{%- if include.event_type == "upcoming_event" -%}
7+
{%- assign events = site.data.events | sort: "startDate" -%}
8+
{%- elsif include.event_type == "past_event" -%}
9+
{%- assign events = site.data.events | sort: "startDate" | reverse -%}
10+
{%- endif -%}
11+
{%- assign count = 0 -%}
12+
<div class="events-list">
13+
{%- for event in events -%}
14+
{%- assign event_timestamp = event.startDate | date: "%s" -%}
15+
{%- if include.event_type == "upcoming_event" and event_timestamp >= current_date -%}
16+
{%- assign valid = "true" -%}
17+
{%- elsif include.event_type == "past_event" and current_date > event_timestamp -%}
18+
{%- assign valid = "true" -%}
19+
{%- else -%}
20+
{%- assign valid = "false" -%}
21+
{%- endif -%}
22+
{%- if valid == "true" -%}
23+
<div class="event-item" onclick="redirectToEvent('{{ event.url }}')">
24+
<div class="event-date-block">
25+
<div class="event-date">
26+
<div class="event-day">{{ event.startDate | date: "%d" | escape }}</div>
27+
<div class="event-month">{{ event.startDate | date: "%b" | escape }}</div>
28+
<div class="event-year">{{ event.startDate | date: "%Y" | escape }}</div>
29+
</div>
30+
<div class="event-content">
31+
<h3 class="event-title">{{ event.name | escape }}</h3>
32+
<p class="event-location">👥 {{ event.location | escape }}</p>
33+
<p class="event-description">{{ event.description | markdownify }}</p>
34+
</div>
35+
<div class="event-arrow">→</div>
36+
</div>
37+
</div>
38+
{%- assign count = count | plus: 1 -%}
39+
{%- if include.limit and count == include.limit -%}
40+
{%- break -%}
41+
{%- endif -%}
42+
{%- endif -%}
43+
{%- endfor -%}
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
49+
<style>
50+
* {
51+
margin: 0;
52+
padding: 0;
53+
box-sizing: border-box;
54+
}
55+
56+
body {
57+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
58+
background: #ffffff;
59+
color: #1a1a1a;
60+
line-height: 1.4;
61+
min-height: 100vh;
62+
}
63+
64+
.events{
65+
display: block;
66+
};
67+
68+
.events-container {
69+
max-width: 800px;
70+
margin: 0 0;
71+
padding: 3px 4px;
72+
}
73+
74+
.events-section {
75+
position: relative;
76+
}
77+
78+
.events-header {
79+
margin-bottom: 30px;
80+
text-align: left;
81+
}
82+
83+
.events-title {
84+
font-size: clamp(2rem, 6vw, 3rem);
85+
font-weight: 300;
86+
letter-spacing: -0.01em;
87+
margin-bottom: 5px;
88+
color: #2d2d2d;
89+
}
90+
91+
.events-subtitle {
92+
font-size: 1rem;
93+
color: #666;
94+
font-weight: 400;
95+
}
96+
97+
.events-category {
98+
margin-bottom: 30px;
99+
}
100+
101+
.events-category:last-child {
102+
margin-bottom: 0;
103+
}
104+
105+
.category-title {
106+
font-size: 1.3rem;
107+
font-weight: 600;
108+
color: #012152;
109+
margin-bottom: 20px;
110+
text-transform: uppercase;
111+
letter-spacing: 0.1em;
112+
position: relative;
113+
padding-left: 20px;
114+
}
115+
116+
.category-title::before {
117+
content: '';
118+
position: absolute;
119+
left: 0;
120+
top: 50%;
121+
transform: translateY(-50%);
122+
width: 4px;
123+
height: 18px;
124+
background: #012152;
125+
border-radius: 2px;
126+
}
127+
128+
.events-list {
129+
display: grid;
130+
grid-template-columns: 1fr 1fr;
131+
gap: 20px;
132+
margin-right: 15px;
133+
}
134+
135+
.event-item {
136+
border: 1px solid #e0e0e0;
137+
border-radius: 12px;
138+
padding: 20px;
139+
transition: all 0.3s ease;
140+
cursor: pointer;
141+
background: #ffffff;
142+
}
143+
144+
.event-item:hover {
145+
background: #f8f8f8;
146+
transform: translateY(-4px);
147+
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
148+
border-color: #012152;
149+
}
150+
151+
.event-date-block {
152+
display: flex;
153+
align-items: flex-start;
154+
gap: 15px;
155+
margin-bottom: 10px;
156+
}
157+
158+
.event-date {
159+
text-align: center;
160+
background: #f8f8f8;
161+
border-radius: 6px;
162+
padding: 8px 6px;
163+
width: 50px;
164+
flex-shrink: 0;
165+
}
166+
167+
.event-day {
168+
font-size: 1.4rem;
169+
font-weight: 700;
170+
line-height: 1;
171+
color: #012152;
172+
}
173+
174+
.event-month {
175+
font-size: 0.7rem;
176+
text-transform: uppercase;
177+
letter-spacing: 0.05em;
178+
color: #666;
179+
font-weight: 600;
180+
margin-top: 1px;
181+
}
182+
183+
.event-year {
184+
font-size: 0.6rem;
185+
color: #999;
186+
font-weight: 400;
187+
}
188+
189+
.past-events .event-item {
190+
opacity: 0.7;
191+
}
192+
193+
.past-events .event-day {
194+
color: #999;
195+
}
196+
197+
.event-content {
198+
flex: 1;
199+
position: relative;
200+
}
201+
202+
.event-title {
203+
font-size: 1.3rem;
204+
font-weight: 600;
205+
margin-bottom: 3px;
206+
color: #2d2d2d;
207+
line-height: 1.2;
208+
}
209+
210+
.event-location {
211+
color: #666;
212+
font-size: 0.85rem;
213+
margin-bottom: 8px;
214+
line-height: 1.2;
215+
}
216+
217+
.event-description {
218+
color: #888;
219+
font-size: 0.85rem;
220+
line-height: 1.4;
221+
display: -webkit-box;
222+
-webkit-line-clamp: 3;
223+
-webkit-box-orient: vertical;
224+
overflow: hidden;
225+
}
226+
227+
.event-arrow {
228+
position: absolute;
229+
top: 15px;
230+
right: 15px;
231+
width: 20px;
232+
height: 20px;
233+
opacity: 0;
234+
transition: opacity 0.3s ease;
235+
color: #012152;
236+
}
237+
238+
.event-item:hover .event-arrow {
239+
opacity: 1;
240+
}
241+
242+
/* Responsive Design */
243+
@media (max-width: 768px) {
244+
.events-container {
245+
padding: 30px 20px;
246+
}
247+
248+
.events-list {
249+
grid-template-columns: 1fr;
250+
gap: 15px;
251+
}
252+
253+
.event-date-block {
254+
flex-direction: row;
255+
align-items: flex-start;
256+
gap: 12px;
257+
}
258+
259+
.event-date {
260+
text-align: center;
261+
width: 45px;
262+
flex-shrink: 0;
263+
}
264+
}
265+
266+
/* Smooth scroll behavior */
267+
html {
268+
scroll-behavior: smooth;
269+
}
270+
271+
/* Custom scrollbar */
272+
::-webkit-scrollbar {
273+
width: 8px;
274+
}
275+
276+
::-webkit-scrollbar-track {
277+
background: #f1f1f1;
278+
}
279+
280+
::-webkit-scrollbar-thumb {
281+
background: #012152;
282+
border-radius: 4px;
283+
}
284+
</style>
285+
286+
<script>
287+
function redirectToEvent(event_url) {
288+
window.open(`${event_url}`, '_blank');
289+
}
290+
</script>
291+
</div>

‎index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ This website is a virtual meeting place and hub for all users of **computing for
1818

1919
## Events
2020

21-
{% include events.html event_type="upcoming_event" limit=3 %}
21+
{% include events.html event_type="upcoming_event" limit=4 %}
2222

2323

2424
## Acknowledgements

0 commit comments

Comments
 (0)