Skip to content

Commit 3b86543

Browse files
hschnehschne
committed
Improve landing and such
1 parent dedb8a0 commit 3b86543

25 files changed

Lines changed: 2693 additions & 263 deletions

File tree

‎_config.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
url: ""
2-
baseurl: ""
1+
url: "https://hansschnedlitz.com"
2+
baseurl: "/rubyevents-guides"
33
title: "Ruby Community Guides"
44
description: "Practical guides for starting and running Ruby communities."
55

‎_data/voices.yml‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
- name: Jeremy Smith
2+
conference: Blue Ridge Ruby
3+
initials: JS
4+
image: https://rubyconferenceproject.com/images/jeremy.jpg
5+
6+
- name: Spike Ilacqua
7+
conference: Rocky Mountain Ruby
8+
initials: SI
9+
image: https://rubyconferenceproject.com/images/spike.jpg
10+
11+
- name: Marty Haught
12+
conference: Rocky Mountain Ruby
13+
initials: MH
14+
image: https://rubyconferenceproject.com/images/marty.jpg
15+
16+
- name: Jason Charnes
17+
conference: Southeast Ruby
18+
initials: JC
19+
image: https://rubyconferenceproject.com/images/jasonc.png
20+
21+
- name: Jason Swett
22+
conference: Sin City Ruby
23+
initials: JS
24+
image: https://rubyconferenceproject.com/images/jasons.jpg
25+
26+
- name: Adrian Marin
27+
conference: Friendly.rb
28+
initials: AM
29+
image: https://rubyconferenceproject.com/images/adrian.jpg
30+
31+
- name: Andy Croll
32+
conference: Brighton Ruby
33+
initials: AC
34+
image: https://rubyconferenceproject.com/images/andy.jpg
35+
36+
- name: Cirdes Henrique
37+
conference: Tropical on Rails
38+
initials: CH
39+
image: https://rubyconferenceproject.com/images/cirdes.jpeg
40+
41+
- name: Hana Harencarova
42+
conference: Helvetic Ruby
43+
initials: HH
44+
image: https://rubyconferenceproject.com/images/hana.jpeg
45+
46+
- name: Amanda Perino
47+
conference: Rails World
48+
initials: AP
49+
image: https://rubyconferenceproject.com/images/amanda.jpg
50+
51+
- name: Irina Nazarova
52+
conference: SF Ruby Conference
53+
initials: IN
54+
image: https://rubyconferenceproject.com/images/irina.webp

‎_includes/testimonial.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<figure class="testimonial">
2+
<blockquote class="testimonial__quote">
3+
<p>&ldquo;{{ include.quote }}&rdquo;</p>
4+
</blockquote>
5+
6+
<figcaption class="testimonial__person">
7+
{% if include.avatar %}
8+
<img
9+
class="testimonial__avatar"
10+
src="{{ include.avatar | relative_url }}"
11+
alt=""
12+
width="32"
13+
height="32"
14+
loading="lazy"
15+
/>
16+
{% else %}
17+
<span
18+
class="testimonial__avatar testimonial__avatar--initials"
19+
aria-hidden="true"
20+
>{{ include.initials }}</span
21+
>
22+
{% endif %}
23+
24+
<span class="testimonial__byline">
25+
<span class="testimonial__name">{{ include.name }}</span>
26+
<span class="testimonial__conference">{{ include.conference }}</span>
27+
</span>
28+
</figcaption>
29+
</figure>

‎_layouts/home.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
<div class="index-layout">
66
<article class="index-content">{{ content }}</article>
77

8+
{% if page.aside %}
89
<aside class="index-aside" aria-label="Supplementary information">
9-
{% if page.aside %} {{ page.aside | markdownify }} {% endif %}
10+
{{ page.aside | markdownify }}
1011
</aside>
12+
{% endif %}
1113
</div>

‎_sass/components.scss‎

Lines changed: 174 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -116,74 +116,153 @@
116116
margin-bottom: var(--space-4);
117117
padding-bottom: var(--space-3);
118118
border-bottom: 1px solid var(--color-border-subtle);
119+
120+
// When an h2 immediately precedes a nav (e.g. "Start Here" → start-links),
121+
// the nav's own border-top acts as the section separator. Remove the
122+
// redundant heading border so we don't get a double-line visual.
123+
&:has(+ nav) {
124+
padding-bottom: 0;
125+
border-bottom: none;
126+
}
119127
}
128+
}
120129

121-
// Voices list
122-
h2 ~ ul {
123-
list-style: none;
124-
padding: 0;
125-
display: grid;
126-
grid-template-columns: 1fr;
127-
gap: var(--space-2);
128-
129-
li {
130-
margin: 0;
131-
font-size: var(--font-size-base);
132-
color: var(--color-text-secondary);
133-
padding-block: var(--space-2);
134-
border-bottom: 1px solid var(--color-border-subtle);
130+
.start-links {
131+
margin-block: var(--space-5) var(--space-8);
132+
border-bottom: 1px solid var(--color-border);
133+
}
134+
135+
.start-link {
136+
display: block;
137+
padding-block: var(--space-5);
138+
border-top: 1px solid var(--color-border);
139+
color: var(--color-text);
140+
text-decoration: none;
141+
142+
&:hover {
143+
.start-link__title {
144+
color: var(--color-accent-hover);
135145
}
136146
}
147+
148+
&:focus-visible {
149+
outline-offset: 4px;
150+
}
151+
152+
&__title {
153+
display: inline-block;
154+
margin-bottom: var(--space-3);
155+
color: var(--color-accent);
156+
font-size: var(--font-size-lg);
157+
font-weight: var(--font-weight-bold);
158+
line-height: var(--line-height-snug);
159+
text-decoration: underline;
160+
text-decoration-thickness: 1px;
161+
text-underline-offset: 3px;
162+
transition: color var(--duration-fast) var(--easing-out);
163+
}
164+
165+
&__description {
166+
display: block;
167+
color: var(--color-text-secondary);
168+
line-height: var(--line-height-normal);
169+
}
137170
}
138171

172+
// Backwards-compatible guide link styles for any older content.
139173
.guide-links {
140-
display: grid;
141-
grid-template-columns: 1fr;
142-
gap: var(--space-5);
174+
display: block;
143175
margin-block: var(--space-5) var(--space-8);
144176
}
145177

146178
.guide-link {
147179
padding-block: var(--space-5);
148-
border-block: 1px solid var(--color-border-subtle);
180+
border-top: 1px solid var(--color-border);
149181

150-
& + & {
151-
border-top: 0;
152-
margin-top: calc(var(--space-5) * -1);
182+
&:last-child {
183+
border-bottom: 1px solid var(--color-border);
153184
}
185+
}
154186

155-
&__label {
156-
margin-bottom: var(--space-2);
157-
color: var(--color-text-tertiary);
158-
font-size: var(--font-size-sm);
159-
font-weight: var(--font-weight-semibold);
160-
letter-spacing: var(--letter-spacing-caps);
161-
line-height: var(--line-height-snug);
162-
text-transform: uppercase;
163-
}
187+
.testimonial {
188+
margin-block: var(--space-7);
189+
}
164190

165-
h3 {
166-
margin-bottom: var(--space-3);
191+
.testimonial__quote {
192+
margin: 0 0 var(--space-4);
193+
padding: 0;
194+
border: 0;
195+
color: var(--color-text);
196+
font-style: normal;
197+
198+
p {
167199
font-size: var(--font-size-xl);
200+
font-weight: var(--font-weight-bold);
201+
line-height: var(--line-height-snug);
202+
letter-spacing: var(--letter-spacing-tight);
168203
}
204+
}
169205

170-
a {
171-
color: var(--color-accent);
172-
text-decoration: none;
206+
.testimonial__person {
207+
display: flex;
208+
align-items: center;
209+
gap: var(--space-3);
210+
color: var(--color-text-secondary);
211+
font-size: var(--font-size-sm);
212+
line-height: var(--line-height-snug);
213+
}
173214

174-
&:hover {
175-
color: var(--color-accent-hover);
176-
text-decoration: underline;
177-
text-decoration-thickness: 1px;
178-
text-underline-offset: 4px;
179-
}
180-
}
215+
.testimonial__avatar {
216+
display: block; // override base img rule so flex sizing works
217+
inline-size: 2rem;
218+
block-size: 2rem;
219+
flex: 0 0 auto;
220+
border-radius: var(--border-radius-full);
221+
object-fit: cover;
222+
}
181223

182-
p:last-child {
183-
color: var(--color-text-secondary);
224+
.testimonial__avatar--initials {
225+
display: inline-grid;
226+
place-items: center;
227+
background: var(--color-accent);
228+
color: var(--color-text-inverse);
229+
font-size: var(--font-size-xs);
230+
font-weight: var(--font-weight-bold);
231+
letter-spacing: var(--letter-spacing-wide);
232+
}
233+
234+
.testimonial__byline {
235+
display: inline; // name and conference run together on one line
236+
}
237+
238+
.testimonial__name {
239+
color: var(--color-text);
240+
font-style: italic;
241+
font-weight: var(--font-weight-medium);
242+
}
243+
244+
.testimonial__conference {
245+
color: var(--color-text-secondary);
246+
font-style: italic;
247+
248+
&::before {
249+
content: ", ";
184250
}
185251
}
186252

253+
// ── Eyebrow label ─────────────────────────────────────────────────────────
254+
255+
.eyebrow {
256+
display: block;
257+
margin-bottom: var(--space-3);
258+
color: var(--color-text-secondary);
259+
font-size: var(--font-size-sm);
260+
font-weight: var(--font-weight-semibold);
261+
letter-spacing: var(--letter-spacing-caps);
262+
line-height: var(--line-height-snug);
263+
text-transform: uppercase;
264+
}
265+
187266
.status-note {
188267
display: inline-block;
189268
margin-bottom: var(--space-4);
@@ -195,6 +274,56 @@
195274
text-transform: uppercase;
196275
}
197276

277+
// ── Voices behind the guides ───────────────────────────────────────────────
278+
279+
.voices {
280+
list-style: none;
281+
padding: 0;
282+
margin: 0;
283+
display: grid;
284+
grid-template-columns: repeat(3, 1fr);
285+
gap: var(--space-4);
286+
}
287+
288+
.voice {
289+
display: flex;
290+
align-items: center;
291+
gap: var(--space-3);
292+
margin: 0;
293+
}
294+
295+
.voice__avatar {
296+
display: inline-grid;
297+
place-items: center;
298+
flex: 0 0 auto;
299+
inline-size: 2rem;
300+
block-size: 2rem;
301+
border-radius: var(--border-radius-full);
302+
object-fit: cover;
303+
background: var(--color-accent);
304+
color: var(--color-text-inverse);
305+
font-size: var(--font-size-xs);
306+
font-weight: var(--font-weight-bold);
307+
letter-spacing: var(--letter-spacing-wide);
308+
}
309+
310+
.voice__info {
311+
display: flex;
312+
flex-direction: column;
313+
line-height: var(--line-height-snug);
314+
}
315+
316+
.voice__name {
317+
font-size: var(--font-size-sm);
318+
font-weight: var(--font-weight-medium);
319+
color: var(--color-text);
320+
}
321+
322+
.voice__conference {
323+
font-size: var(--font-size-xs);
324+
color: var(--color-text-secondary);
325+
}
326+
198327
.index-aside {
199328
display: none;
200329
}
@@ -217,7 +346,6 @@
217346
max-width: var(--max-width-prose);
218347

219348
h1 {
220-
font-size: var(--font-size-3xl);
221349
letter-spacing: var(--letter-spacing-tight);
222350
margin-bottom: var(--space-4);
223351
}
@@ -231,11 +359,8 @@
231359
}
232360

233361
h2 {
234-
margin-top: var(--space-9);
362+
margin-top: var(--space-8);
235363
margin-bottom: var(--space-4);
236-
padding-top: var(--space-5);
237-
border-top: 1px solid var(--color-border-subtle);
238-
font-size: var(--font-size-2xl);
239364
letter-spacing: var(--letter-spacing-tight);
240365
}
241366

@@ -317,7 +442,6 @@
317442

318443
.quote {
319444
margin-block: var(--space-7);
320-
padding-inline-start: var(--space-5);
321445
border-inline-start: 3px solid var(--color-quote-border);
322446
background-color: var(--color-quote-bg);
323447
padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);

0 commit comments

Comments
 (0)