Skip to content

Commit 83d1831

Browse files
paulacianellipaulacianelli
committed
fix: breadcrumb selector, carousel placeholder initials, and layout tweaks
- Fix dead CSS selector: .breadcrumb__trail li[aria-hidden] → span[aria-hidden] - Add speaker initials to carousel slide placeholder avatars (was empty) - Remove hero illustration (SVG polygon) from hero section - Tighten padding and spacing across hero, grid, and card sections - Bump ffi to 1.17.4 native gem for arm64-darwin-24 (macOS 15) compatibility
1 parent e3ca728 commit 83d1831

2 files changed

Lines changed: 51 additions & 65 deletions

File tree

‎_layouts/meetup.html‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="es">
33
{% include head.html %}
44

5-
<body>
5+
<body class="page-meetup">
66
{% assign host = site.data.companies[page.host] %}
77
{% assign host_name = host.name | default: page.host %}
88
{% assign host_domain = host.url | remove: 'https://' | remove: 'http://' | remove: 'www.' | split: '/' | first %}
@@ -52,17 +52,6 @@ <h1 class="hero__title">
5252
{% endif %}
5353
</div>
5454

55-
<div class="hero__right" aria-hidden="true">
56-
<div class="hero__illustration">
57-
<svg viewBox="0 0 280 185" xmlns="http://www.w3.org/2000/svg">
58-
<polygon points="0,70 50,0 230,0 280,70 140,185"
59-
fill="#E63946"
60-
stroke="#9B1F2D"
61-
stroke-width="2"
62-
stroke-linejoin="round"/>
63-
</svg>
64-
</div>
65-
</div>
6655
</div>
6756
</section>
6857

@@ -183,7 +172,15 @@ <h3 class="slide__title" id="{{ talk.title | slugify }}">
183172
{% elsif speaker.github %}
184173
<img class="slide__speaker-avatar" src="https://github.com/{{ speaker.github }}.png?size=60" alt="{{ speaker.name }}">
185174
{% else %}
186-
<span class="slide__speaker-avatar slide__speaker-avatar--placeholder" aria-hidden="true"></span>
175+
{% assign slide_name_parts = speaker.name | split: " " %}
176+
{% assign slide_initial_first = slide_name_parts[0] | slice: 0 | upcase %}
177+
{% if slide_name_parts.size > 1 %}
178+
{% assign slide_initial_last = slide_name_parts | last | slice: 0 | upcase %}
179+
{% assign slide_initials = slide_initial_first | append: slide_initial_last %}
180+
{% else %}
181+
{% assign slide_initials = slide_initial_first %}
182+
{% endif %}
183+
<span class="slide__speaker-avatar slide__speaker-avatar--placeholder" aria-hidden="true">{{ slide_initials }}</span>
187184
{% endif %}
188185
<span>{{ speaker.name }}</span>{% unless forloop.last %}<span class="slide__speaker-sep">, </span>{% endunless %}
189186
{% endfor %}

‎_sass/view.scss‎

Lines changed: 41 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ $vm-white: #ffffff;
99
$vm-container: 1600px;
1010
$vm-pad-x: 4rem;
1111

12+
.page-meetup .meetup__default > div:first-child {
13+
display: none;
14+
}
15+
1216
#view-meetup,
1317
#view-meetup * {
1418
box-sizing: border-box;
@@ -64,7 +68,7 @@ $vm-pad-x: 4rem;
6468
}
6569
}
6670

67-
.breadcrumb__trail li[aria-hidden] {
71+
.breadcrumb__trail span[aria-hidden] {
6872
color: rgba($vm-white, 0.55);
6973
}
7074

@@ -96,7 +100,7 @@ $vm-pad-x: 4rem;
96100
border-bottom: 3px solid $vm-ink;
97101
display: grid;
98102
gap: 2.5rem;
99-
grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
103+
grid-template-columns: 1fr;
100104
margin: 0 auto;
101105
max-width: $vm-container;
102106
padding: 0.75rem $vm-pad-x 0.75rem;
@@ -201,44 +205,14 @@ $vm-pad-x: 4rem;
201205
max-width: 84%;
202206
}
203207

204-
.hero__right {
205-
align-items: flex-start;
206-
display: flex;
207-
justify-content: flex-end;
208-
min-width: 0;
209-
position: relative;
210-
}
211-
212-
.hero__illustration {
213-
align-items: center;
214-
display: flex;
215-
height: 110px;
216-
justify-content: center;
217-
max-width: 160px;
218-
width: 100%;
219-
}
220-
221-
.hero__illustration svg {
222-
height: 100%;
223-
max-height: 100%;
224-
max-width: 100%;
225-
width: 100%;
226-
}
227-
228208
@media (max-width: 980px) {
229209
.hero__inner {
230-
grid-template-columns: 1fr;
231-
gap: 2rem;
232210
padding: 1rem 2rem 1rem;
233211
}
234212

235213
.hero__left {
236214
max-width: none;
237215
}
238-
239-
.hero__right {
240-
display: none;
241-
}
242216
}
243217

244218
@media (max-width: 640px) {
@@ -270,18 +244,18 @@ $vm-pad-x: 4rem;
270244
.grid-section__inner {
271245
margin: 0 auto;
272246
max-width: $vm-container;
273-
padding: 2rem $vm-pad-x 3rem;
247+
padding: 1rem $vm-pad-x 1.5rem;
274248
width: 100%;
275249
}
276250
}
277251

278252
.view-meetup__grid {
279253
display: grid;
280-
gap: 1.75rem;
254+
gap: 1.5rem;
281255
grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
282256

283257
@media (max-width: 980px) {
284-
gap: 1.5rem;
258+
gap: 1.25rem;
285259
grid-template-columns: 1fr;
286260
}
287261
}
@@ -293,6 +267,22 @@ $vm-pad-x: 4rem;
293267
min-width: 0;
294268
}
295269

270+
.view-meetup__col--left {
271+
.host-card {
272+
flex: 1 1 auto;
273+
}
274+
275+
.speakers-card {
276+
flex: 1.5 1 auto;
277+
}
278+
}
279+
280+
.view-meetup__col--right {
281+
.charla-destacada {
282+
flex: 1;
283+
}
284+
}
285+
296286
// ============================================================
297287
// Shared card
298288
// ============================================================
@@ -354,14 +344,13 @@ $vm-pad-x: 4rem;
354344
// ============================================================
355345

356346
.host-card {
357-
min-height: 220px;
358-
padding: 1.75rem;
347+
justify-content: center;
348+
padding: 1.5rem 1.5rem;
359349

360350
.host-card__body {
361351
align-items: center;
362352
display: flex;
363353
gap: 1.5rem;
364-
height: 100%;
365354
}
366355

367356
.host-card__logo-tile {
@@ -454,13 +443,13 @@ $vm-pad-x: 4rem;
454443
// ============================================================
455444

456445
.speakers-card {
457-
justify-content: center;
458-
min-height: 370px;
459-
padding: 1.625rem 1.75rem 1.75rem;
446+
padding: 1.25rem 1.5rem 1.5rem;
460447

461448
.speakers-list {
462449
display: flex;
450+
flex: 1 1 auto;
463451
flex-direction: column;
452+
justify-content: space-evenly;
464453
list-style: none;
465454
margin: 0;
466455
padding: 0;
@@ -469,16 +458,15 @@ $vm-pad-x: 4rem;
469458
.speaker {
470459
align-items: flex-start;
471460
display: flex;
472-
gap: 1.375rem;
473-
min-height: 128px;
474-
padding: 1.125rem 0;
461+
gap: 1.125rem;
462+
padding: 0.375rem 0;
475463

476464
& + .speaker {
477465
border-top: 1px solid rgba($vm-ink, 0.1);
478466
}
479467

480468
&:first-child {
481-
padding-top: 0.375rem;
469+
padding-top: 0.25rem;
482470
}
483471
}
484472

@@ -566,13 +554,12 @@ $vm-pad-x: 4rem;
566554

567555
.charla-destacada {
568556
flex: 1 1 auto;
569-
min-height: 560px;
570-
padding: 1.625rem 1.75rem 1.75rem;
557+
padding: 1.25rem 1.5rem 1.25rem;
571558

572559
.charla-destacada__header {
573560
display: flex;
574561
justify-content: flex-end;
575-
margin-bottom: 1.125rem;
562+
margin-bottom: 0.5rem;
576563
}
577564

578565
.charla-destacada__counter {
@@ -611,7 +598,8 @@ $vm-pad-x: 4rem;
611598
display: flex;
612599
flex: 0 0 100%;
613600
flex-direction: column;
614-
min-height: 0;
601+
gap: 0.75rem;
602+
justify-content: flex-start;
615603
scroll-snap-align: start;
616604
width: 100%;
617605
}
@@ -621,7 +609,7 @@ $vm-pad-x: 4rem;
621609
font-weight: 700;
622610
letter-spacing: -0.005em;
623611
line-height: 1.2;
624-
margin: 0 0 2.125rem;
612+
margin: 0;
625613
max-width: 58%;
626614
overflow-wrap: break-word;
627615
text-wrap: balance;
@@ -645,7 +633,7 @@ $vm-pad-x: 4rem;
645633
font-family: 'DM Sans', system-ui, sans-serif;
646634
font-size: 0.9375rem;
647635
gap: 0.5rem;
648-
margin: 0 0 1.5rem;
636+
margin: 0;
649637
min-height: 36px;
650638
padding: 0;
651639
}
@@ -666,7 +654,8 @@ $vm-pad-x: 4rem;
666654
aspect-ratio: 16 / 9;
667655
background: #111;
668656
border-radius: 8px;
669-
margin: 0 0 1.75rem;
657+
margin: 0;
658+
margin-top: auto;
670659
overflow: hidden;
671660
position: relative;
672661
width: 100%;

0 commit comments

Comments
 (0)