Skip to content

Commit 1a2a51f

Browse files
henryiiihenryiii
committed
fix: nicer events display
Signed-off-by: Henry Schreiner <henryfs@princeton.edu>
1 parent 83fde4a commit 1a2a51f

4 files changed

Lines changed: 52 additions & 106 deletions

File tree

‎assets/css/extended/homepage.css‎

Lines changed: 43 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@
6262
}
6363

6464
/* ── Section titles ──────────────────────────────────────────────────────── */
65-
.events-section-title,
6665
.projects-section-title {
6766
font-size: 1.3rem;
6867
font-weight: 700;
@@ -77,142 +76,96 @@
7776
}
7877

7978
.events-grid {
80-
display: grid;
81-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
82-
gap: 1rem;
79+
display: flex;
80+
flex-wrap: wrap;
81+
gap: 0.6rem;
82+
justify-content: center;
8383
}
8484

85-
/* ── Event card ──────────────────────────────────────────────────────────── */
85+
/* ── Event pill button ───────────────────────────────────────────────────── */
8686
.event-card {
87-
display: flex;
88-
align-items: stretch;
89-
border: 1px solid var(--border);
90-
border-radius: 8px;
87+
display: inline-flex;
88+
align-items: center;
89+
gap: 0.5rem;
90+
padding: 0.5rem 0.9rem;
91+
border-radius: 999px;
9192
text-decoration: none;
9293
color: var(--primary);
93-
background: var(--entry);
94-
overflow: hidden;
94+
border: 1px solid var(--border);
9595
transition:
96-
border-color 0.2s,
97-
box-shadow 0.2s,
98-
transform 0.15s;
99-
position: relative;
96+
border-color 0.15s,
97+
background 0.15s,
98+
color 0.15s;
10099
}
101100

102101
.event-card:hover {
103102
border-color: var(--primary);
104-
box-shadow: 0 3px 16px rgba(0, 0, 0, 0.1);
105-
transform: translateY(-2px);
103+
background: var(--entry);
106104
}
107105

108-
.dark .event-card:hover {
109-
box-shadow: 0 3px 16px rgba(255, 255, 255, 0.06);
106+
.event-card:hover .event-card-date {
107+
color: var(--primary);
110108
}
111109

112-
/* ── Accent strip on the left ────────────────────────────────────────────── */
113-
.event-card-accent {
114-
flex: 0 0 5px;
115-
align-self: stretch;
110+
/* Color ring for recurring / upcoming */
111+
.event-card::before {
112+
content: "";
113+
flex-shrink: 0;
114+
width: 8px;
115+
height: 8px;
116+
border-radius: 50%;
117+
align-self: center;
116118
}
117119

118-
.event-card-accent.recurring {
119-
background: linear-gradient(180deg, #3b82f6, #6366f1);
120+
.event-card.recurring::before {
121+
background: linear-gradient(135deg, #3b82f6, #6366f1);
120122
}
121123

122-
.event-card-accent.upcoming {
123-
background: linear-gradient(180deg, #10b981, #22d3ee);
124+
.event-card.upcoming::before {
125+
background: linear-gradient(135deg, #10b981, #22d3ee);
124126
}
125127

126-
.dark .event-card-accent.recurring {
127-
background: linear-gradient(180deg, #60a5fa, #818cf8);
128+
.dark .event-card.recurring::before {
129+
background: linear-gradient(135deg, #60a5fa, #818cf8);
128130
}
129131

130-
.dark .event-card-accent.upcoming {
131-
background: linear-gradient(180deg, #34d399, #67e8f9);
132+
.dark .event-card.upcoming::before {
133+
background: linear-gradient(135deg, #34d399, #67e8f9);
132134
}
133135

134-
/* ── Card body ───────────────────────────────────────────────────────────── */
135-
.event-card-body {
136+
.event-card-text {
136137
display: flex;
137138
flex-direction: column;
138-
padding: 1rem 1.25rem;
139-
flex: 1;
139+
gap: 0.05rem;
140140
min-width: 0;
141141
}
142142

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-
154143
.event-card-title {
155-
font-size: 1.05rem;
156-
font-weight: 700;
144+
font-size: 0.875rem;
145+
font-weight: 600;
157146
margin: 0;
158-
line-height: 1.3;
159-
flex: 1;
160-
min-width: 0;
147+
line-height: 1.25;
148+
white-space: nowrap;
161149
}
162150

163151
.event-card-date {
164-
font-size: 0.8rem;
152+
font-size: 0.75rem;
165153
color: var(--secondary);
166-
margin-top: 0.4rem;
167154
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);
155+
line-height: 1.25;
203156
}
204157

205158
/* ── View all link ───────────────────────────────────────────────────────── */
206159
.events-view-all {
207-
font-size: 0.9rem;
160+
font-size: 0.85rem;
208161
font-weight: 600;
209162
color: var(--secondary);
210163
text-decoration: none;
211164
transition:
212165
color 0.15s,
213166
transform 0.15s;
214167
display: inline-block;
215-
margin-top: 1rem;
168+
margin-top: 0.6rem;
216169
}
217170

218171
.events-view-all:hover {

‎go.mod‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@ module github.com/scikit-build/scikit-build.github.io
22

33
go 1.26.2
44

5-
require github.com/adityatelange/hugo-PaperMod v0.0.0-20260411190257-f207ce6d5889 // indirect
5+
require github.com/adityatelange/hugo-PaperMod v0.0.0-20260502155530-87de3fb02411 // indirect

‎go.sum‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
github.com/adityatelange/hugo-PaperMod v0.0.0-20260411190257-f207ce6d5889 h1:61NKqdIVVkhAjh2jJtW02bWw24L9YYNbvYGBZCM1egA=
22
github.com/adityatelange/hugo-PaperMod v0.0.0-20260411190257-f207ce6d5889/go.mod h1:sp5WH671pzcVNpWKveBQKlBfu6T9uvcBI/4B3BSojKw=
3+
github.com/adityatelange/hugo-PaperMod v0.0.0-20260502155530-87de3fb02411 h1:yz1UDp0TDIQFlSr7SS5faKAB7/juzCcOOjRbXR/RLMo=
4+
github.com/adityatelange/hugo-PaperMod v0.0.0-20260502155530-87de3fb02411/go.mod h1:sp5WH671pzcVNpWKveBQKlBfu6T9uvcBI/4B3BSojKw=

‎layouts/index.html‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@
4343
</div>
4444

4545
<section class="events-section" id="events">
46-
<h2 class="events-section-title">Events</h2>
4746
{{- $events := where site.RegularPages "Section" "events" }}
4847
{{- $featured := slice }}
4948
{{- range $events }}
@@ -55,23 +54,15 @@ <h2 class="events-section-title">Events</h2>
5554
{{- if $featured }}
5655
<div class="events-grid">
5756
{{- 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>
57+
<a class="event-card {{ if .Params.recurring }}recurring{{ else if not .Date.IsZero }}upcoming{{ end }}" href="{{ .Permalink }}">
58+
<span class="event-card-text">
59+
<span class="event-card-title">{{ .Title }}</span>
6960
{{- if .Params.recurring }}
70-
<div class="event-card-date">Next: <span class="meeting-next"></span></div>
61+
<span class="event-card-date">Next: <span class="meeting-next"></span></span>
7162
{{- else if not .Date.IsZero }}
72-
<div class="event-card-date">{{ .Date.Format "January 2, 2006" }}</div>
63+
<span class="event-card-date">{{ .Date.Format "January 2, 2006" }}</span>
7364
{{- end }}
74-
</div>
65+
</span>
7566
</a>
7667
{{- end }}
7768
</div>

0 commit comments

Comments
 (0)