Skip to content

Commit bca3a64

Browse files
KriesseKriesse
committed
Refactor meetup talk rendering into shared includes.
Extract talk-item and talk-list templates and add CSS for multi-speaker talks and fixed-size speaker photos on event pages.
1 parent c2ff899 commit bca3a64

5 files changed

Lines changed: 145 additions & 65 deletions

File tree

‎_includes/post-body.html‎

Lines changed: 7 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -27,38 +27,13 @@
2727
</p>
2828
{% endif %}
2929

30-
{% if post.talks %}
31-
<ul class="talk-list">
32-
{% for talk in post.talks %}
33-
<li class="talk">
34-
<div class="talk__header">
35-
<div class="talk__header__media">
36-
{% if talk.picture %}
37-
<img src="/images/talks/{{talk.picture}}" alt="Picture of {{talk.name}}" class="talk__picture" width="90" height="90">
38-
{% else %}
39-
<img src="/images/talks/placeholder.png" alt="" class="talk__picture" width="90" height="90">
40-
{% endif %}
41-
</div>
42-
<h4 class="talk__header__text">
43-
<span class="talk__name">{{talk.name}}</span>
44-
<span class="talk__title">{{talk.title}}</span>
45-
</h4>
46-
</div>
47-
<p>
48-
{{talk.desc}}
49-
</p>
50-
<p class="talk__bio">
51-
{{talk.bio}}
52-
</p>
53-
<ul class="talk__links">
54-
{% for link in talk.links %}
55-
<li><a href="{{link.url}}">{{link.title}}</a></li>
56-
{% endfor %}
57-
</ul>
58-
</li>
59-
{% endfor %}
60-
</ul>
61-
{% endif %}
30+
{% if post.talks %}
31+
<ul class="talk-list">
32+
{% for talk in post.talks %}
33+
{% include talk-item.html %}
34+
{% endfor %}
35+
</ul>
36+
{% endif %}
6237

6338
{{ post.content }}
6439

‎_includes/talk-item.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<li class="talk">
2+
{% if talk.speakers.size > 1 %}
3+
<h4 class="talk__title talk__title--shared">{{ talk.title }}</h4>
4+
{% endif %}
5+
6+
{% if talk.desc and talk.speakers.size > 1 %}
7+
<p>{{ talk.desc }}</p>
8+
{% endif %}
9+
10+
{% for speaker in talk.speakers %}
11+
<div class="talk__speaker">
12+
<div class="talk__header">
13+
<div class="talk__header__media">
14+
{% if speaker.picture %}
15+
<img src="/images/talks/{{ speaker.picture }}" alt="Picture of {{ speaker.name }}" class="talk__picture" width="90" height="90">
16+
{% else %}
17+
<img src="/images/talks/placeholder.png" alt="" class="talk__picture" width="90" height="90">
18+
{% endif %}
19+
</div>
20+
<h4 class="talk__header__text">
21+
<span class="talk__name">{{ speaker.name }}</span>
22+
{% if talk.speakers.size == 1 %}
23+
<span class="talk__title">{{ talk.title }}</span>
24+
{% endif %}
25+
</h4>
26+
</div>
27+
28+
{% if talk.desc and talk.speakers.size == 1 %}
29+
<p>{{ talk.desc }}</p>
30+
{% endif %}
31+
32+
{% if speaker.bio %}
33+
<p class="talk__bio">{{ speaker.bio }}</p>
34+
{% endif %}
35+
36+
{% if speaker.links %}
37+
<ul class="talk__links">
38+
{% for link in speaker.links %}
39+
<li><a href="{{ link.url }}">{{ link.title | strip }}</a></li>
40+
{% endfor %}
41+
</ul>
42+
{% endif %}
43+
</div>
44+
{% endfor %}
45+
</li>

‎_includes/talk-list.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{% if page.talks %}
2+
<ul class="talk-list">
3+
{% for talk in page.talks %}
4+
{% include talk-item.html %}
5+
{% endfor %}
6+
</ul>
7+
{% endif %}

‎_layouts/post.html‎

Lines changed: 1 addition & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -26,38 +26,7 @@
2626
</p>
2727
{% endif %}
2828

29-
{% if page.talks %}
30-
<ul class="talk-list">
31-
{% for talk in page.talks %}
32-
<li class="talk">
33-
<div class="talk__header">
34-
<div class="talk__header__media">
35-
{% if talk.picture %}
36-
<img src="/images/talks/{{talk.picture}}" alt="Picture of {{talk.name}}" class="talk__picture" width="90" height="90">
37-
{% else %}
38-
<img src="/images/talks/placeholder.png" alt="" class="talk__picture" width="90" height="90">
39-
{% endif %}
40-
</div>
41-
<h4 class="talk__header__text">
42-
<span class="talk__name">{{talk.name}}</span>
43-
<span class="talk__title">{{talk.title}}</span>
44-
</h4>
45-
</div>
46-
<p>
47-
{{talk.desc}}
48-
</p>
49-
<p class="talk__bio">
50-
{{talk.bio}}
51-
</p>
52-
<ul class="talk__links">
53-
{% for link in talk.links %}
54-
<li><a href="{{link.url}}">{{link.title}}</a></li>
55-
{% endfor %}
56-
</ul>
57-
</li>
58-
{% endfor %}
59-
</ul>
60-
{% endif %}
29+
{% include talk-list.html %}
6130

6231
{{ page.content }}
6332

‎css/custom.css‎

Lines changed: 85 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ a, button, input {
194194

195195
/* navigation */
196196
nav {
197-
max-width: 420px;
197+
max-width: 520px;
198198
margin-left: auto;
199199
margin-right: auto;
200200
display: flex;
@@ -376,6 +376,20 @@ ul {
376376
}
377377
}
378378

379+
.talk__title--shared {
380+
float: none;
381+
margin-bottom: 0.75em;
382+
font-size: 1.25em;
383+
}
384+
385+
.talk__speaker {
386+
margin-top: 1.5em;
387+
388+
&:first-of-type {
389+
margin-top: 0;
390+
}
391+
}
392+
379393
.talk_example {
380394
padding: 0.5em;
381395
background-color: var(--grey--light);
@@ -426,6 +440,8 @@ ul.two > li.last {
426440

427441
.talk__picture {
428442
width: 90px;
443+
height: 90px;
444+
object-fit: cover;
429445
}
430446

431447
.talk__name {
@@ -543,6 +559,74 @@ ul.two > li.last {
543559
text-decoration: none;
544560
}
545561

562+
.speakers-grid {
563+
display: grid;
564+
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
565+
gap: 1rem;
566+
margin: 0 0 2rem;
567+
padding: 0;
568+
list-style: none;
569+
}
570+
571+
.speaker-card {
572+
margin: 0;
573+
padding: 1em;
574+
text-align: center;
575+
background: var(--grey--light);
576+
}
577+
578+
.speaker-card__photo {
579+
display: block;
580+
width: 72px;
581+
height: 72px;
582+
margin: 0 auto 0.75em;
583+
object-fit: cover;
584+
}
585+
586+
.speaker-card__name {
587+
float: none;
588+
margin-bottom: 0.5em;
589+
font-size: 0.875em;
590+
line-height: 1.3;
591+
}
592+
593+
.speaker-card__links {
594+
margin: 0 0 0.75em;
595+
padding: 0;
596+
list-style: none;
597+
font-size: 0.75em;
598+
599+
& li {
600+
margin: 0 0 0.25em;
601+
padding: 0;
602+
float: none;
603+
}
604+
}
605+
606+
.speaker-card__appearances {
607+
margin: 0;
608+
padding: 0;
609+
list-style: none;
610+
text-align: left;
611+
font-size: 0.75em;
612+
line-height: 1.4;
613+
614+
& li {
615+
margin: 0 0 0.5em;
616+
padding: 0;
617+
float: none;
618+
}
619+
620+
& a {
621+
color: var(--grey);
622+
text-decoration: none;
623+
624+
&:hover, &:focus {
625+
color: var(--red);
626+
}
627+
}
628+
}
629+
546630
/* footer */
547631
footer {
548632
border-bottom: 1em solid var(--red);

0 commit comments

Comments
 (0)