Skip to content

Commit 1770b38

Browse files
hschnehschne
committed
Refactor components
1 parent bdb6bfa commit 1770b38

4 files changed

Lines changed: 65 additions & 118 deletions

File tree

‎_includes/testimonial.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,24 +27,24 @@
2727

2828
{%- capture person -%}
2929
<img
30-
class="avatar testimonial__avatar"
30+
class="avatar person__avatar"
3131
src="{{ avatar | relative_url }}"
3232
alt=""
3333
width="32"
3434
height="32"
3535
loading="lazy"
3636
>
37-
<span class="testimonial__byline">
38-
<span class="testimonial__name">{{ include.name }}</span>
37+
<span class="person__info">
38+
<span class="person__name">{{ include.name }}</span>
3939
{% if conference %}
40-
<span class="testimonial__conference">{{ conference }}</span>
40+
<span class="person__meta">{{ conference }}</span>
4141
{% endif %}
4242
</span>
4343
{%- endcapture -%}
4444

45-
<figcaption class="testimonial__person">
45+
<figcaption class="person person--lg">
4646
{% if link_url %}
47-
<a class="testimonial__profile-link" href="{{ link_url }}" title="{{ link_title }}">
47+
<a class="person__link" href="{{ link_url }}" title="{{ link_title }}">
4848
{{ person }}
4949
</a>
5050
{% else %}

‎_includes/voice.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@
66
{%- endcomment -%}
77
{%- assign voice = include.voice -%}
88

9-
<li class="voice">
9+
<li class="voice person">
1010
{%- capture voice_person -%}
11-
<img class="avatar voice__avatar" src="{{ voice.image | relative_url }}" alt="" width="32" height="32" loading="lazy">
12-
<span class="voice__info">
13-
<span class="voice__name">{{ voice.name }}</span>
14-
<span class="voice__conference">{{ voice.conference }}</span>
11+
<img class="avatar person__avatar" src="{{ voice.image | relative_url }}" alt="" width="32" height="32" loading="lazy">
12+
<span class="person__info">
13+
<span class="person__name">{{ voice.name }}</span>
14+
<span class="person__meta">{{ voice.conference }}</span>
1515
</span>
1616
{%- endcapture -%}
1717

1818
{%- if voice.interview -%}
19-
<a class="voice__link" href="{{ voice.interview | relative_url }}" title="Read our interview with {{ voice.name }}">
19+
<a class="person__link" href="{{ voice.interview | relative_url }}" title="Read our interview with {{ voice.name }}">
2020
{{ voice_person }}
2121
</a>
2222
{%- else -%}

‎_sass/components.scss‎

Lines changed: 53 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -442,57 +442,7 @@
442442
}
443443
}
444444

445-
.testimonial__person {
446-
display: flex;
447-
align-items: center;
448-
gap: var(--space-4);
449-
color: var(--color-text-secondary);
450-
font-size: var(--font-size-sm);
451-
line-height: var(--line-height-snug);
452-
}
453-
454-
.testimonial__avatar {
455-
--avatar-size: 2.75rem;
456-
}
457-
458-
.testimonial__profile-link {
459-
display: flex;
460-
align-items: center;
461-
gap: var(--space-4);
462-
color: inherit;
463-
text-decoration: none;
464-
transition: opacity var(--transition-fast, 0.15s) ease;
465-
466-
&:hover,
467-
&:focus-visible {
468-
opacity: 0.85;
469-
470-
.testimonial__name {
471-
text-decoration: underline;
472-
}
473-
}
474-
}
475-
476-
.testimonial__byline {
477-
display: flex; // name stacked over conference beside the avatar
478-
flex-direction: column;
479-
line-height: var(--line-height-snug);
480-
}
481-
482-
.testimonial__name {
483-
color: var(--color-text);
484-
font-weight: var(--font-weight-semibold);
485-
}
486-
487-
.testimonial__conference {
488-
color: var(--color-text-secondary);
489-
}
490-
491445
// ── Inline tip callout — "field note" ─────────────────────────────────────
492-
// Unfilled aside, ruled top and bottom, led by an uppercase rubric. Reads as
493-
// an editorial column rather than a boxed docs admonition, and stays in the
494-
// warm + ruby system so it never competes with the interview quotes.
495-
496446
.tip {
497447
margin-block: var(--space-7);
498448
padding-block: var(--space-5);
@@ -504,7 +454,6 @@
504454
align-items: center;
505455
gap: var(--space-2);
506456
margin: 0 0 var(--space-3);
507-
// Ideas speak in the ruby accent; tools are a quieter, utilitarian rubric.
508457
color: var(--color-accent);
509458
}
510459

@@ -655,38 +604,16 @@
655604
text-transform: uppercase;
656605
}
657606

658-
// ── Voices behind the guides ───────────────────────────────────────────────
659-
660-
.voices-intro {
661-
color: var(--color-text-secondary);
662-
line-height: var(--line-height-normal);
663-
}
664-
665-
.voices-cta {
666-
margin-bottom: var(--space-5);
667-
font-size: var(--font-size-sm);
668-
font-weight: var(--font-weight-medium);
669-
}
670-
671-
.voices {
672-
list-style: none;
673-
padding: 0;
674-
margin: 0;
675-
display: grid;
676-
// Intrinsically responsive: 1 column on mobile, up to 3 on the prose
677-
// column — no breakpoint needed, and names never overflow their track.
678-
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
679-
gap: var(--space-4) var(--space-5);
680-
}
607+
// ── Person ─────────────────────────────────────────────────────────────────
681608

682-
.voice {
609+
.person {
683610
display: flex;
684611
align-items: center;
685612
gap: var(--space-3);
686613
margin: 0;
687614
}
688615

689-
.voice__link {
616+
.person__link {
690617
display: flex;
691618
align-items: center;
692619
gap: var(--space-3);
@@ -698,69 +625,99 @@
698625
&:focus-visible {
699626
opacity: 0.85;
700627

701-
.voice__name {
628+
.person__name {
702629
text-decoration: underline;
703630
}
704631
}
705632
}
706633

707-
.voice__avatar {
634+
.person__avatar {
708635
--avatar-size: 2rem;
709636
}
710637

711-
.voice__info {
638+
.person__info {
712639
display: flex;
713640
flex-direction: column;
641+
min-inline-size: 0;
714642
line-height: var(--line-height-snug);
715643
}
716644

717-
.voice__name {
645+
.person__name {
718646
font-size: var(--font-size-sm);
719647
font-weight: var(--font-weight-medium);
720648
color: var(--color-text);
721649
}
722650

723-
.voice__conference {
651+
.person__meta {
724652
font-size: var(--font-size-xs);
725653
color: var(--color-text-secondary);
726654
}
727655

656+
.person--lg {
657+
.person__avatar {
658+
--avatar-size: 2.75rem;
659+
}
660+
661+
.person__name {
662+
font-weight: var(--font-weight-semibold);
663+
}
664+
665+
.person__meta {
666+
font-size: var(--font-size-sm);
667+
}
668+
}
669+
670+
// ── Voices behind the guides ───────────────────────────────────────────────
671+
672+
.voices-intro {
673+
color: var(--color-text-secondary);
674+
line-height: var(--line-height-normal);
675+
}
676+
677+
.voices-cta {
678+
margin-bottom: var(--space-5);
679+
font-size: var(--font-size-sm);
680+
font-weight: var(--font-weight-medium);
681+
}
682+
683+
.voices {
684+
list-style: none;
685+
padding: 0;
686+
margin: 0;
687+
display: grid;
688+
// Intrinsically responsive: 1 column on mobile, up to 3 on the prose
689+
// column — no breakpoint needed, and names never overflow their track.
690+
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
691+
gap: var(--space-4) var(--space-5);
692+
}
693+
728694
@media (max-width: 31.75rem) {
729695
.voices {
730696
grid-template-columns: repeat(2, minmax(0, 1fr));
731697
gap: var(--space-3) var(--space-4);
732698
}
733699

734-
.voice {
735-
align-items: flex-start;
736-
gap: var(--space-2);
737-
min-inline-size: 0;
738-
}
739-
740-
.voice__link {
700+
.voice,
701+
.voice .person__link {
741702
align-items: flex-start;
742703
gap: var(--space-2);
743704
min-inline-size: 0;
744705
}
745706

746-
.voice__avatar {
707+
.voice .person__avatar {
747708
--avatar-size: 1.75rem;
748709
}
749710

750-
.voice__info {
751-
min-inline-size: 0;
752-
}
753-
754-
.voice__name,
755-
.voice__conference {
711+
.voice .person__name,
712+
.voice .person__meta {
756713
overflow: hidden;
757714
text-overflow: ellipsis;
758715
white-space: nowrap;
759716
}
760717
}
761718

762719
@media (max-width: 23rem) {
763-
.voice__conference {
720+
.voice .person__meta {
764721
display: none;
765722
}
766723
}

‎meetups/index.md‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,6 @@ The best first venue for a tech meetup is often an office. Many companies have m
4242

4343
Universities, co-working spaces - or even bars or bakeries - are other options. All you need is enough chairs, somewhere to plug in a laptop, and ideally a wall or screen to project on.
4444

45-
{% include testimonial.html
46-
name="Hans Schnedlitz"
47-
content="When I started these meetups, my first call was to one of my former employers. They are a Ruby shop, and I knew they had a pretty nice meeting room."
48-
%}
49-
5045
### Create an event
5146

5247
Once you have a venue, pick a date and put up an event listing. It needs only the basics - the date, time, location, and a sentence or two about what the meetup is. You can add speakers and program details as they are confirmed.
@@ -227,11 +222,6 @@ Running a meetup on any frequency costs time and energy, no matter how much you
227222

228223
The best prevention is to not organize the meetup alone.
229224

230-
{% include testimonial.html
231-
name="Hans Schnedlitz"
232-
content="For me, running the meetup every quarter is the perfect frequency. It gives me enough time to prepare, but is regular enough to become a sort of constant in Vienna. Doing it more often would burn me out, and doing it less often would just lead to it fizzling out I think."
233-
%}
234-
235225
### Find a co-organizer
236226

237227
A co-organizer is not your assistant. They are someone equally invested in the meetup continuing, who can run it when you cannot. They share the cognitive load of remembering what needs to happen and when and they cover for you when you are sick, traveling, or just depleted.

0 commit comments

Comments
 (0)