Source code of my website
💄 : add custom page style for talks
+65
+41
assets/css/custom.css
+41
assets/css/custom.css
···
245
245
.alert-warning > .alert-heading {
246
246
background-color: #fbf4ea;
247
247
}
248
+
249
+
/* Talks list styling */
250
+
.talks-year {
251
+
text-align: center;
252
+
}
253
+
254
+
.talks-item {
255
+
list-style: none;
256
+
margin-bottom: 2rem;
257
+
}
258
+
259
+
/* Event card styling for talks */
260
+
.events-container {
261
+
display: flex;
262
+
flex-wrap: wrap;
263
+
gap: 0.5rem;
264
+
margin: 0.5rem 0;
265
+
width: 100%;
266
+
}
267
+
268
+
.event-card {
269
+
display: inline-flex;
270
+
align-items: center;
271
+
gap: 0.5rem;
272
+
margin: 0;
273
+
padding: 0.5rem 0.8rem;
274
+
border-radius: 5px;
275
+
box-shadow: 0 1px 3px var(--sidebar-bg-color);
276
+
}
277
+
278
+
.event-name {
279
+
font-weight: bold;
280
+
color: var(--post-title-color);
281
+
font-size: 0.9rem;
282
+
}
283
+
284
+
.event-date {
285
+
color: var(--date-color);
286
+
font-style: italic;
287
+
font-size: 0.9rem;
288
+
}
+24
layouts/talks/talks.html
+24
layouts/talks/talks.html
···
1
+
{{ define "main" -}}
2
+
<h1 class="title">{{ .Title }}</h1>
3
+
<ul class="talks">
4
+
{{ range .Pages.GroupByDate "2006" }}
5
+
<h3 class="talks-year">{{ .Key }}</h3>
6
+
{{ range .Pages }}
7
+
<li class="talks-item">
8
+
<span class="title">
9
+
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
10
+
</span>
11
+
<div class="events-container">
12
+
{{ range .Params.events }}
13
+
<div class="event-card">
14
+
<span class="event-name">{{ .name }}</span>
15
+
-
16
+
<span class="event-date"><time>{{ .date | time.Format ":date_long" }}</time></span>
17
+
</div>
18
+
{{ end }}
19
+
</div>
20
+
</li>
21
+
{{ end }}
22
+
{{ end }}
23
+
</ul>
24
+
{{ end }}