Skip to content

Commit 7340942

Browse files
author
Daniel Precioso, PhD
committed
Add event list layout with responsive design and category tagging
1 parent 24a6b4d commit 7340942

1 file changed

Lines changed: 251 additions & 0 deletions

File tree

‎layouts/event/list.html‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
{{ define "main" }}
2+
3+
{{ $hidePageTitle := eq .Params.show_title false }}
4+
5+
{{ if not $hidePageTitle }}
6+
<div class="max-w-prose mx-auto flex justify-center">
7+
<article class="prose prose-slate lg:prose-xl dark:prose-invert">
8+
{{ if ne .Params.show_title false }}
9+
<h1 class="lg:text-6xl">{{ .Title }}</h1>
10+
{{ end }}
11+
{{ .Content }}
12+
</article>
13+
</div>
14+
{{ end }}
15+
16+
{{ $listItems := (where .Pages "Kind" "page").ByDate.Reverse }}
17+
{{ $paginator := .Paginate $listItems }}
18+
19+
<style>
20+
.project-list {
21+
display: flex;
22+
flex-direction: column;
23+
gap: 1.25rem;
24+
}
25+
26+
.project-row {
27+
display: grid;
28+
grid-template-columns: 1fr;
29+
gap: 0.85rem;
30+
padding: 0.7rem;
31+
border-radius: 1rem;
32+
border: 1px solid rgba(148, 163, 184, 0.28);
33+
background: rgba(255, 255, 255, 0.02);
34+
transition: border-color 0.25s ease, box-shadow 0.25s ease;
35+
}
36+
37+
@media (min-width: 768px) {
38+
.project-row {
39+
grid-template-columns: minmax(260px, 38%) 1fr;
40+
gap: 1rem;
41+
}
42+
}
43+
44+
.project-row:hover {
45+
border-color: rgba(99, 102, 241, 0.45);
46+
box-shadow: 0 12px 24px rgba(2, 6, 23, 0.15);
47+
}
48+
49+
.project-media {
50+
position: relative;
51+
display: block;
52+
overflow: hidden;
53+
border-radius: 0.8rem;
54+
height: 145px;
55+
min-height: 145px;
56+
background: linear-gradient(135deg, #dbe4f0 0%, #c2cfdf 100%);
57+
}
58+
59+
.dark .project-media {
60+
background: linear-gradient(135deg, #344155 0%, #1f2937 100%);
61+
}
62+
63+
.project-image-zoom {
64+
width: 100%;
65+
height: 100%;
66+
transition: transform 0.45s ease;
67+
transform-origin: center center;
68+
}
69+
70+
.project-row:hover .project-image-zoom {
71+
transform: scale(1.08);
72+
}
73+
74+
.project-image-zoom img {
75+
width: 100%;
76+
height: 100%;
77+
display: block;
78+
object-fit: cover;
79+
}
80+
81+
.project-content {
82+
display: flex;
83+
flex-direction: column;
84+
justify-content: flex-start;
85+
align-self: start;
86+
min-width: 0;
87+
padding-top: 0.45rem;
88+
}
89+
90+
.project-header {
91+
display: flex;
92+
flex-wrap: wrap;
93+
align-items: center;
94+
gap: 0.6rem;
95+
margin-bottom: 1.1rem;
96+
}
97+
98+
.project-row-title {
99+
margin: 0;
100+
font-size: 1.35rem;
101+
font-weight: 700;
102+
line-height: 1.25;
103+
color: rgb(15, 23, 42);
104+
}
105+
106+
.dark .project-row-title {
107+
color: rgb(241, 245, 249);
108+
}
109+
110+
.project-row-title-link {
111+
color: inherit;
112+
text-decoration: none;
113+
}
114+
115+
.project-row-title-link:hover {
116+
text-decoration: underline;
117+
text-underline-offset: 3px;
118+
}
119+
120+
.project-category-tag {
121+
padding: 0.33rem 0.72rem;
122+
border-radius: 9999px;
123+
font-size: 0.72rem;
124+
font-weight: 600;
125+
text-transform: uppercase;
126+
letter-spacing: 0.045em;
127+
box-shadow: 0 2px 8px rgba(2, 6, 23, 0.24);
128+
white-space: nowrap;
129+
}
130+
131+
.project-description {
132+
margin: 0;
133+
color: rgb(71, 85, 105);
134+
line-height: 1.6;
135+
}
136+
137+
.dark .project-description {
138+
color: rgb(203, 213, 225);
139+
}
140+
141+
.category-energy { background-color: #f59e0b; color: white; }
142+
.category-maritime { background-color: #3b82f6; color: white; }
143+
.category-marketing { background-color: #ec4899; color: white; }
144+
.category-health { background-color: #10b981; color: white; }
145+
.category-transport { background-color: #8b5cf6; color: white; }
146+
.category-manufacturing { background-color: #f97316; color: white; }
147+
.category-insurance { background-color: #0ea5e9; color: white; }
148+
.category-fintech { background-color: #14b8a6; color: white; }
149+
.category-legaltech { background-color: #6366f1; color: white; }
150+
.category-talk { background-color: #2563eb; color: white; }
151+
.category-seminar { background-color: #0f766e; color: white; }
152+
.category-workshop { background-color: #4f46e5; color: white; }
153+
.category-conference { background-color: #7c3aed; color: white; }
154+
.category-interview { background-color: #db2777; color: white; }
155+
.category-media { background-color: #ea580c; color: white; }
156+
.category-research { background-color: #0891b2; color: white; }
157+
.category-outreach { background-color: #4338ca; color: white; }
158+
.category-default { background-color: #6b7280; color: white; }
159+
</style>
160+
161+
<div class="flex flex-col items-center">
162+
<div class="flex-auto">
163+
<div class="sm:px-8">
164+
<div class="mx-auto w-full max-w-7xl lg:px-8">
165+
<div class="relative px-4 sm:px-8 lg:px-12">
166+
<div class="mx-auto max-w-2xl lg:max-w-5xl">
167+
<div>
168+
<div class="project-list">
169+
{{ range $paginator.Pages }}
170+
{{ $event := . }}
171+
{{ $description := $event.Params.summary | default $event.Params.abstract | default $event.Params.description }}
172+
{{ $category := $event.Params.category }}
173+
174+
{{ if not $category }}
175+
{{ with $event.Params.projects }}
176+
{{ $projectRef := printf "%v" (index . 0) }}
177+
{{ $projectSlug := replaceRE "^.*/" "" $projectRef }}
178+
{{ $projectPage := or ($event.Site.GetPage (printf "/industry/%s" $projectSlug)) ($event.Site.GetPage (printf "/research/%s" $projectSlug)) }}
179+
{{ with $projectPage }}
180+
{{ with .Params.category }}
181+
{{ $category = . }}
182+
{{ else }}
183+
{{ $category = .CurrentSection.Title | default (humanize .Type) }}
184+
{{ end }}
185+
{{ end }}
186+
{{ end }}
187+
{{ end }}
188+
189+
{{ if not $category }}
190+
{{ if in $event.Params.tags "media" }}
191+
{{ $category = "Media" }}
192+
{{ else if in $event.Params.tags "interview" }}
193+
{{ $category = "Interview" }}
194+
{{ else if in $event.Params.tags "workshop" }}
195+
{{ $category = "Workshop" }}
196+
{{ else if in $event.Params.tags "seminar" }}
197+
{{ $category = "Seminar" }}
198+
{{ else if in $event.Params.tags "conference" }}
199+
{{ $category = "Conference" }}
200+
{{ else if in $event.Params.tags "talk" }}
201+
{{ $category = "Talk" }}
202+
{{ else if gt (len $event.Params.tags) 0 }}
203+
{{ $category = title (index $event.Params.tags 0) }}
204+
{{ else }}
205+
{{ $category = "Outreach" }}
206+
{{ end }}
207+
{{ end }}
208+
209+
{{ $categoryClass := print "category-" (lower (replace $category " " "-")) }}
210+
<article class="project-row group">
211+
<a href="{{ $event.RelPermalink }}" class="project-media">
212+
<div class="project-image-zoom">
213+
{{ with $event.Resources.GetMatch "featured*" }}
214+
{{ $img := .Fill "840x560 webp" }}
215+
<img alt="{{ $event.Title }}" src="{{ $img.RelPermalink }}" width="{{ $img.Width }}" height="{{ $img.Height }}" loading="lazy" decoding="async">
216+
{{ else }}
217+
<div class="w-full h-full"></div>
218+
{{ end }}
219+
</div>
220+
</a>
221+
222+
<div class="project-content">
223+
<div class="project-header">
224+
<h3 class="project-row-title">
225+
<a href="{{ $event.RelPermalink }}" class="project-row-title-link">{{ $event.Title }}</a>
226+
</h3>
227+
{{ $categoryLabel := title (replace (replace $category "-" " ") "_" " ") }}
228+
<span class="project-category-tag category-default {{ $categoryClass }}">{{ $categoryLabel }}</span>
229+
</div>
230+
231+
{{ with $description }}
232+
<p class="project-description">{{ . }}</p>
233+
{{ else }}
234+
<p class="project-description">Outreach details coming soon.</p>
235+
{{ end }}
236+
</div>
237+
238+
</article>
239+
{{ end }}
240+
</div>
241+
</div>
242+
</div>
243+
</div>
244+
</div>
245+
</div>
246+
</div>
247+
248+
{{ partial "components/paginator" . }}
249+
</div>
250+
251+
{{ end }}

0 commit comments

Comments
 (0)