Skip to content

Commit 923dbec

Browse files
rivaquirogarivaquiroga
committed
move new gallery classes to css file
1 parent 5797005 commit 923dbec

2 files changed

Lines changed: 72 additions & 42 deletions

File tree

‎_posts/2025-12-03-nyasita-third-indaba.md‎

Lines changed: 14 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -11,59 +11,31 @@ This year marked my third Deep Learning Indaba. When I sent in my application to
1111

1212
The [Deep Learning Indaba](https://deeplearningindaba.com/) (DLI) (or simply the Indaba for me) is the annual meeting of the African machine learning and AI community. Since its start in 2017, the [mission](https://deeplearningindaba.com/about/our-mission/) has been to strengthen African AI and ensure Africans are not just consumers but owners and shapers of the field’s advances. This year’s theme *Urunana*: Hand in Hand for AI in Africa, perfectly captured the spirit of solidarity and collaboration that defines the Indaba.
1313

14-
![hundreds of people assembled together outdoors]({% link images/2025-09-03-indaba-everyone.jpg %})
15-
16-
*(An image of delegates at the Deep Learning Indaba 2025 at the University of Rwanda in Kigali, Rwanda. PC: [The Deep Learning Indaba](https://www.linkedin.com/company/deep-learning-indaba/posts/?feedView=images))*
14+
<figure style="width: 60%; margin: 2em auto; text-align: center;">
15+
<img src="{% link images/2025-09-03-indaba-everyone.jpg %}" style="width: 100%;" alt="hundreds of people assembled together outdoors">
16+
<figcaption><em>An image of delegates at the Deep Learning Indaba 2025 at the University of Rwanda in Kigali, Rwanda. PC: <a href="https://www.linkedin.com/company/deep-learning-indaba/posts/?feedView=images">The Deep Learning Indaba</a></em></figcaption>
17+
</figure>
1718

1819
There are usually three things I look forward to at the Indaba… wait, no, four:
1920

2021
1. The people. When I interviewed [**Siobhan Mackenzie Hall**](https://we-are-ols.org/people.html#smhall97) (an OLS mentor and one of the OGs of the Indaba) back in 2023 for my podcast *The* *Science in Real Life*, she told me: *“Look forward to the people.”* She was right. The Indaba community is warm, curious, and adventurous. Exactly my kind of people. This year, I reconnected with Siobhan, and I finally met [**Ahmed Unshur**](https://www.linkedin.com/in/ahmedunshur/) and [**Tajuddeen Gwadabe**](https://we-are-ols.org/people.html#tajuddeen1) in person. I’d seen their names in OLS co-workings and other meetings, but we hadn’t crossed paths face-to-face until now. It was refreshing to chat about our work and share highlights from the Indaba. They’re doing amazing things, by the way!
2122

22-
<style>
23-
.three-column-gallery {
24-
display: grid;
25-
grid-template-columns: repeat(3, 1fr);
26-
gap: 1rem;
27-
margin: 1.5rem 0;
28-
}
29-
30-
.three-column-gallery figure {
31-
margin: 0;
32-
text-align: center;
33-
}
34-
35-
.three-column-gallery img {
36-
width: 100%;
37-
height: 280px;
38-
object-fit: cover;
39-
border-radius: 6px;
40-
}
41-
42-
.three-column-gallery figcaption {
43-
margin-top: 0.5rem;
44-
font-size: 0.9em;
45-
}
46-
47-
@media (max-width: 768px) {
48-
.three-column-gallery {
49-
grid-template-columns: 1fr;
50-
}
51-
}
52-
</style>
53-
5423
<div class="three-column-gallery">
5524
<figure>
56-
<img src="{% link images/2025-09-03-indaba-taj-nyasita.jpg %}" alt="Nyasita and Tajuddeen Gwadabe">
25+
<img src="{% link images/2025-09-03-indaba-taj-nyasita.jpg %}" alt="Nyasita and Tajuddeen Gwadabe"
26+
style="height: 350px;">
5727
<figcaption>Nyasita and Tajuddeen Gwadabe</figcaption>
5828
</figure>
5929

6030
<figure>
61-
<img src="{% link images/2025-09-03-indaba-siobhan-nyasita.jpg %}" alt="Nyasita and Siobhan Mackenzie Hall">
31+
<img src="{% link images/2025-09-03-indaba-siobhan-nyasita.jpg %}" alt="Nyasita and Siobhan Mackenzie Hall"
32+
style="height: 350px;">
6233
<figcaption>Nyasita and Siobhan Mackenzie Hall</figcaption>
6334
</figure>
6435

6536
<figure>
66-
<img src="{% link images/2025-09-03-indaba-ahmed-nyasita.jpg %}" alt="Nyasita and Ahmed Unshur">
37+
<img src="{% link images/2025-09-03-indaba-ahmed-nyasita.jpg %}" alt="Nyasita and Ahmed Unshur"
38+
style="height: 350px;">
6739
<figcaption>Nyasita and Ahmed Unshur</figcaption>
6840
</figure>
6941
</div>
@@ -75,14 +47,14 @@ There are usually three things I look forward to at the Indaba… wait, no, four
7547

7648
* Exploring the World of Generative AI – We used Stable Diffusion to remix sketches and photos, played “AI or Real?” guessing games, and discussed ethical tensions around bias, deepfakes, environmental cost, ownership, and global equity. AI has become so creative and accurate that it’s hard for us to tell AI-generated images from actual images. Like, look at these two below, are you able to tell which one is real and which one is AI?
7749

78-
<div style="display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:1.5rem 0;">
50+
<div class="two-column-gallery">
7951
<img src="{% link images/2025-09-03-indaba-pizza.webp %}"
8052
alt="AI-generated pizza"
81-
style="width:100%; height:300px; object-fit:cover; border-radius:6px;">
53+
style="height: 400px;">
8254

8355
<img src="{% link images/2025-09-03-indaba-mountains.webp %}"
8456
alt="Real mountain landscape"
85-
style="width:100%; height:300px; object-fit:cover; border-radius:6px;">
57+
style="height: 400px;">
8658
</div>
8759

8860

@@ -95,7 +67,7 @@ There are usually three things I look forward to at the Indaba… wait, no, four
9567
<figure style="margin:2rem auto; max-width:700px; text-align:center;">
9668
<img src="{% link images/2025-09-03-indaba-dinner.jpg %}"
9769
alt="DLI delegates at the culture dinner"
98-
style="width:100%; height:auto; border-radius:6px;">
70+
style="width:100%; height:auto;">
9971
<figcaption style="margin-top:0.75rem; font-style:italic;">
10072
DLI delegates at the culture dinner at the University of Rwanda in Kigali.
10173
PC: <a href="https://www.linkedin.com/company/deep-learning-indaba/posts/?feedView=images">The Deep Learning Indaba</a>.

‎css/custom.scss‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -743,6 +743,64 @@ code {
743743
max-width:600px
744744
}
745745

746+
// align-items: flex-start guarantees all figures start at the same top
747+
// edge regardless of caption length, sidestepping stretch/baseline quirks.
748+
.three-column-gallery {
749+
display: flex;
750+
align-items: flex-start;
751+
gap: 1rem;
752+
margin: 1.5rem 0;
753+
}
754+
755+
// Selector repeats the class to beat Bulma's ".content figure:not(:first-child)"
756+
// (which adds margin-top: 2em to every figure but the first) without !important.
757+
.three-column-gallery.three-column-gallery figure {
758+
flex: 1;
759+
margin: 0;
760+
text-align: center;
761+
}
762+
763+
// Same specificity trick, needed to beat Bulma's ".content figure img"
764+
// (display: inline-block), which would otherwise subject the image to
765+
// text-baseline alignment instead of sitting as a predictable block.
766+
.three-column-gallery.three-column-gallery img {
767+
display: block;
768+
width: 100%;
769+
height: 300px;
770+
object-fit: cover;
771+
object-position: top; // crops from the bottom so heads stay visible
772+
}
773+
774+
.three-column-gallery figcaption {
775+
margin-top: 0.5rem;
776+
font-size: 0.9em;
777+
}
778+
779+
.two-column-gallery {
780+
display: grid;
781+
grid-template-columns: repeat(2, 1fr);
782+
gap: 1rem;
783+
margin: 1.5rem 0;
784+
}
785+
786+
.two-column-gallery img {
787+
display: block;
788+
width: 100%;
789+
height: 300px;
790+
object-fit: cover;
791+
}
792+
793+
// Stack both galleries into a single column on narrow viewports.
794+
@media (max-width: 768px) {
795+
.two-column-gallery {
796+
grid-template-columns: 1fr;
797+
}
798+
799+
.three-column-gallery {
800+
flex-direction: column;
801+
}
802+
}
803+
746804
// Add space in the "Show X entries" dropdown of Projects Table
747805
.dataTables_length select.custom-select {
748806
padding-right: 1.75rem !important;

0 commit comments

Comments
 (0)