Skip to content

Commit 83fde4a

Browse files
henryiiihenryiii
committed
feat: events on homepage
Assisted-by: OpenCode:Kimi-K2.6 Signed-off-by: Henry Schreiner <henryfs@princeton.edu>
1 parent 0278f5e commit 83fde4a

2 files changed

Lines changed: 224 additions & 20 deletions

File tree

‎assets/css/extended/homepage.css‎

Lines changed: 183 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
/* ── Hero section ────────────────────────────────────────────────────────── */
22
.home-hero {
33
text-align: center;
4-
padding: 3.5rem 1rem 3rem;
4+
padding: 1.5rem 1rem 1.75rem;
55
border-bottom: 1px solid var(--border);
6-
margin-bottom: 3rem;
6+
margin-bottom: 1.5rem;
77
}
88

99
.home-hero-logo {
10-
max-width: 420px;
10+
max-width: 360px;
1111
width: 100%;
1212
height: auto;
13-
margin: 0 auto 1.5rem;
13+
margin: 0 auto 1rem;
1414
display: block;
1515
}
1616

@@ -20,27 +20,27 @@
2020
}
2121

2222
.home-hero-subtitle {
23-
font-size: 1.15rem;
23+
font-size: 1.05rem;
2424
color: var(--secondary);
25-
max-width: 560px;
26-
margin: 0 auto 2rem;
27-
line-height: 1.6;
25+
max-width: 540px;
26+
margin: 0 auto 1.25rem;
27+
line-height: 1.5;
2828
}
2929

3030
.home-hero-links {
3131
display: flex;
32-
gap: 0.75rem;
32+
gap: 0.6rem;
3333
justify-content: center;
3434
flex-wrap: wrap;
3535
}
3636

3737
.home-btn {
3838
display: inline-flex;
3939
align-items: center;
40-
gap: 0.4rem;
41-
padding: 0.55rem 1.25rem;
40+
gap: 0.35rem;
41+
padding: 0.45rem 1rem;
4242
border-radius: 6px;
43-
font-size: 0.95rem;
43+
font-size: 0.9rem;
4444
font-weight: 600;
4545
text-decoration: none;
4646
color: var(--primary);
@@ -61,19 +61,176 @@
6161
/* intentionally empty — both buttons share the same style */
6262
}
6363

64-
/* ── Projects section ────────────────────────────────────────────────────── */
65-
.projects-section {
66-
margin-bottom: 4rem;
67-
}
68-
64+
/* ── Section titles ──────────────────────────────────────────────────────── */
65+
.events-section-title,
6966
.projects-section-title {
70-
font-size: 1.4rem;
67+
font-size: 1.3rem;
7168
font-weight: 700;
72-
margin: 0 0 1.5rem;
73-
padding-bottom: 0.5rem;
69+
margin: 0 0 1rem;
70+
padding-bottom: 0.4rem;
7471
border-bottom: 2px solid var(--border);
7572
}
7673

74+
/* ── Events section ──────────────────────────────────────────────────────── */
75+
.events-section {
76+
margin-bottom: 2.5rem;
77+
}
78+
79+
.events-grid {
80+
display: grid;
81+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
82+
gap: 1rem;
83+
}
84+
85+
/* ── Event card ──────────────────────────────────────────────────────────── */
86+
.event-card {
87+
display: flex;
88+
align-items: stretch;
89+
border: 1px solid var(--border);
90+
border-radius: 8px;
91+
text-decoration: none;
92+
color: var(--primary);
93+
background: var(--entry);
94+
overflow: hidden;
95+
transition:
96+
border-color 0.2s,
97+
box-shadow 0.2s,
98+
transform 0.15s;
99+
position: relative;
100+
}
101+
102+
.event-card:hover {
103+
border-color: var(--primary);
104+
box-shadow: 0 3px 16px rgba(0, 0, 0, 0.1);
105+
transform: translateY(-2px);
106+
}
107+
108+
.dark .event-card:hover {
109+
box-shadow: 0 3px 16px rgba(255, 255, 255, 0.06);
110+
}
111+
112+
/* ── Accent strip on the left ────────────────────────────────────────────── */
113+
.event-card-accent {
114+
flex: 0 0 5px;
115+
align-self: stretch;
116+
}
117+
118+
.event-card-accent.recurring {
119+
background: linear-gradient(180deg, #3b82f6, #6366f1);
120+
}
121+
122+
.event-card-accent.upcoming {
123+
background: linear-gradient(180deg, #10b981, #22d3ee);
124+
}
125+
126+
.dark .event-card-accent.recurring {
127+
background: linear-gradient(180deg, #60a5fa, #818cf8);
128+
}
129+
130+
.dark .event-card-accent.upcoming {
131+
background: linear-gradient(180deg, #34d399, #67e8f9);
132+
}
133+
134+
/* ── Card body ───────────────────────────────────────────────────────────── */
135+
.event-card-body {
136+
display: flex;
137+
flex-direction: column;
138+
padding: 1rem 1.25rem;
139+
flex: 1;
140+
min-width: 0;
141+
}
142+
143+
.event-card-header {
144+
display: flex;
145+
align-items: center;
146+
gap: 0.6rem;
147+
margin-bottom: 0.35rem;
148+
}
149+
150+
.event-card-header .event-card-badge {
151+
margin-left: auto;
152+
}
153+
154+
.event-card-title {
155+
font-size: 1.05rem;
156+
font-weight: 700;
157+
margin: 0;
158+
line-height: 1.3;
159+
flex: 1;
160+
min-width: 0;
161+
}
162+
163+
.event-card-date {
164+
font-size: 0.8rem;
165+
color: var(--secondary);
166+
margin-top: 0.4rem;
167+
font-weight: 500;
168+
}
169+
170+
/* ── Event badges ────────────────────────────────────────────────────────── */
171+
.event-card-badge {
172+
font-size: 0.65rem;
173+
font-weight: 700;
174+
text-transform: uppercase;
175+
letter-spacing: 0.06em;
176+
padding: 0.15rem 0.5rem;
177+
border-radius: 4px;
178+
white-space: nowrap;
179+
}
180+
181+
.event-card-badge.recurring {
182+
background: rgba(59, 130, 246, 0.1);
183+
color: #2563eb;
184+
border: 1px solid rgba(59, 130, 246, 0.25);
185+
}
186+
187+
.dark .event-card-badge.recurring {
188+
background: rgba(96, 165, 250, 0.12);
189+
color: #93c5fd;
190+
border-color: rgba(96, 165, 250, 0.3);
191+
}
192+
193+
.event-card-badge.upcoming {
194+
background: rgba(16, 185, 129, 0.1);
195+
color: #059669;
196+
border: 1px solid rgba(16, 185, 129, 0.25);
197+
}
198+
199+
.dark .event-card-badge.upcoming {
200+
background: rgba(52, 211, 153, 0.12);
201+
color: #6ee7b7;
202+
border-color: rgba(52, 211, 153, 0.3);
203+
}
204+
205+
/* ── View all link ───────────────────────────────────────────────────────── */
206+
.events-view-all {
207+
font-size: 0.9rem;
208+
font-weight: 600;
209+
color: var(--secondary);
210+
text-decoration: none;
211+
transition:
212+
color 0.15s,
213+
transform 0.15s;
214+
display: inline-block;
215+
margin-top: 1rem;
216+
}
217+
218+
.events-view-all:hover {
219+
color: var(--primary);
220+
transform: translateX(3px);
221+
}
222+
223+
.events-empty {
224+
font-size: 0.95rem;
225+
color: var(--secondary);
226+
margin-bottom: 1rem;
227+
}
228+
229+
/* ── Projects section ────────────────────────────────────────────────────── */
230+
.projects-section {
231+
margin-bottom: 3rem;
232+
}
233+
77234
.projects-grid {
78235
display: grid;
79236
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -109,11 +266,17 @@
109266
margin-bottom: 0.6rem;
110267
}
111268

269+
.project-card-header .project-card-badge {
270+
margin-left: auto;
271+
}
272+
112273
.project-card-name {
113274
font-size: 1.05rem;
114275
font-weight: 700;
115276
margin: 0;
116277
line-height: 1.3;
278+
flex: 1;
279+
min-width: 0;
117280
}
118281

119282
.project-card-badge {

‎layouts/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,47 @@
4242
</div>
4343
</div>
4444

45+
<section class="events-section" id="events">
46+
<h2 class="events-section-title">Events</h2>
47+
{{- $events := where site.RegularPages "Section" "events" }}
48+
{{- $featured := slice }}
49+
{{- range $events }}
50+
{{- if or (.Params.recurring) (and (not .Date.IsZero) (.Date.After (now.AddDate 0 0 -1))) }}
51+
{{- $featured = $featured | append . }}
52+
{{- end }}
53+
{{- end }}
54+
55+
{{- if $featured }}
56+
<div class="events-grid">
57+
{{- range $featured }}
58+
<a class="event-card" href="{{ .Permalink }}">
59+
<div class="event-card-accent {{ if .Params.recurring }}recurring{{ else if not .Date.IsZero }}upcoming{{ end }}"></div>
60+
<div class="event-card-body">
61+
<div class="event-card-header">
62+
<h3 class="event-card-title">{{ .Title }}</h3>
63+
{{- if .Params.recurring }}
64+
<span class="event-card-badge recurring">Recurring</span>
65+
{{- else if not .Date.IsZero }}
66+
<span class="event-card-badge upcoming">Upcoming</span>
67+
{{- end }}
68+
</div>
69+
{{- if .Params.recurring }}
70+
<div class="event-card-date">Next: <span class="meeting-next"></span></div>
71+
{{- else if not .Date.IsZero }}
72+
<div class="event-card-date">{{ .Date.Format "January 2, 2006" }}</div>
73+
{{- end }}
74+
</div>
75+
</a>
76+
{{- end }}
77+
</div>
78+
{{- else }}
79+
<p class="events-empty">No upcoming events at the moment. Check back soon!</p>
80+
{{- end }}
81+
<a class="events-view-all" href="/events/">View all events &rarr;</a>
82+
</section>
83+
84+
<script src="/js/community-meeting.js" defer></script>
85+
4586
<section class="projects-section" id="projects">
4687
<h2 class="projects-section-title">Projects</h2>
4788
<div class="projects-grid">

0 commit comments

Comments
 (0)