Skip to content

Commit e6560aa

Browse files
Mazizovaclaude
Mazizova
and
claude
authored
Add People Behind MySQL interview section; publish Zongzhi Chen interview (#105)
* Add People Behind MySQL interview section and publish the Zongzhi Chen interview Interviews are blog articles tagged Interview with an interview block in front matter; the new Community page collects them as cards with the interviewer's and guest's photos, interview date, and Text/Video/Audio badges. Guest People profiles link back to their interview. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> * Add social share cover to the Zongzhi Chen interview Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> * Interviews: drop the recording date, show the publication date Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 5.5 <noreply@anthropic.com>
1 parent 18197f3 commit e6560aa

14 files changed

Lines changed: 626 additions & 2 deletions

File tree

‎assets/scss/_interviews.scss‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
// Community > People Behind MySQL — interview cards on the list page and the
2+
// interview strip on the article. Built on the webinar card language so it
3+
// reads as the same site.
4+
5+
.interview-grid {
6+
display: grid;
7+
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
8+
gap: 1.25rem;
9+
margin-top: 1rem;
10+
}
11+
12+
// ── Avatars (interviewer + guest, overlapping) ──
13+
.interview-card-avatars {
14+
--av: 64px;
15+
display: inline-flex;
16+
flex-shrink: 0;
17+
18+
.interview-avatar + .interview-avatar { margin-left: calc(var(--av) * -0.28); }
19+
}
20+
21+
.interview-avatar {
22+
width: var(--av, 64px);
23+
height: var(--av, 64px);
24+
border-radius: 50%;
25+
object-fit: cover;
26+
border: 2px solid $dark-card;
27+
background: $dark-surface;
28+
flex-shrink: 0;
29+
30+
&--initials {
31+
display: inline-flex;
32+
align-items: center;
33+
justify-content: center;
34+
font-size: calc(var(--av, 64px) * 0.34);
35+
font-weight: 700;
36+
color: $accent;
37+
background: rgba($accent, 0.14);
38+
}
39+
}
40+
41+
// ── Card ──
42+
.interview-card {
43+
display: flex;
44+
flex-direction: column;
45+
background: $dark-card;
46+
border: 1px solid $dark-border;
47+
border-radius: 12px;
48+
overflow: hidden;
49+
text-decoration: none;
50+
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
51+
52+
&:hover {
53+
border-color: rgba($accent, 0.3);
54+
box-shadow: 0 6px 24px rgba($accent, 0.07);
55+
transform: translateY(-2px);
56+
57+
.interview-card-cta { color: lighten($accent, 8%); }
58+
}
59+
}
60+
61+
.interview-card-people {
62+
display: flex;
63+
align-items: center;
64+
gap: 1rem;
65+
padding: 1.25rem 1.25rem 1rem;
66+
background: linear-gradient(135deg, rgba($accent, 0.1), rgba($accent, 0.02) 70%);
67+
border-bottom: 1px solid $dark-border;
68+
}
69+
70+
.interview-card-names {
71+
display: flex;
72+
flex-direction: column;
73+
min-width: 0;
74+
}
75+
76+
.interview-card-guest {
77+
font-size: 1rem;
78+
font-weight: 700;
79+
color: $off-white;
80+
}
81+
82+
.interview-card-role {
83+
font-size: 0.8125rem;
84+
color: $muted;
85+
margin-top: 0.15rem;
86+
line-height: 1.4;
87+
}
88+
89+
.interview-card-body {
90+
flex: 1;
91+
padding: 1.25rem 1.25rem 1rem;
92+
}
93+
94+
.interview-card-date {
95+
display: block;
96+
font-size: 0.75rem;
97+
font-weight: 600;
98+
letter-spacing: 0.03em;
99+
color: $accent;
100+
margin-bottom: 0.5rem;
101+
}
102+
103+
.interview-card-title {
104+
font-size: 1.0625rem;
105+
font-weight: 700;
106+
line-height: 1.4;
107+
color: $off-white;
108+
margin: 0 0 0.5rem;
109+
}
110+
111+
.interview-card-desc {
112+
font-size: 0.875rem;
113+
line-height: 1.55;
114+
color: $muted;
115+
margin: 0;
116+
}
117+
118+
.interview-card-footer {
119+
display: flex;
120+
align-items: center;
121+
justify-content: space-between;
122+
gap: 0.75rem;
123+
padding: 0.9rem 1.25rem;
124+
border-top: 1px solid $dark-border;
125+
}
126+
127+
.interview-card-cta {
128+
font-size: 0.8125rem;
129+
font-weight: 600;
130+
color: $accent;
131+
white-space: nowrap;
132+
transition: color 0.2s ease;
133+
}
134+
135+
// ── Format badges (Text / Video / Audio) ──
136+
.interview-formats {
137+
display: inline-flex;
138+
flex-wrap: wrap;
139+
gap: 0.4rem;
140+
}
141+
142+
.interview-format {
143+
display: inline-flex;
144+
align-items: center;
145+
gap: 0.35rem;
146+
font-size: 0.6875rem;
147+
font-weight: 700;
148+
letter-spacing: 0.05em;
149+
text-transform: uppercase;
150+
color: $accent;
151+
background: $accent-glow;
152+
border: 1px solid rgba($accent, 0.3);
153+
border-radius: 100px;
154+
padding: 0.2rem 0.6rem;
155+
}
156+
157+
// ── Strip at the top of the interview article ──
158+
.interview-strip {
159+
--av: 52px;
160+
display: flex;
161+
align-items: center;
162+
flex-wrap: wrap;
163+
gap: 1rem;
164+
margin-top: 1.5rem;
165+
padding: 1rem 1.25rem;
166+
background: $dark-card;
167+
border: 1px solid $dark-border;
168+
border-radius: 12px;
169+
170+
.interview-card-avatars { --av: 52px; }
171+
}
172+
173+
.interview-strip-text {
174+
display: flex;
175+
flex-direction: column;
176+
flex: 1 1 220px;
177+
min-width: 0;
178+
}
179+
180+
.interview-strip-line {
181+
font-size: 0.9375rem;
182+
font-weight: 600;
183+
color: $off-white;
184+
185+
a { color: $accent; text-decoration: none; &:hover { text-decoration: underline; } }
186+
}
187+
188+
.interview-strip-sub {
189+
font-size: 0.8125rem;
190+
color: $muted;
191+
margin-top: 0.15rem;
192+
193+
a { color: inherit; text-decoration: underline; &:hover { color: $accent; } }
194+
}
195+
196+
.interview-strip-formats {
197+
display: inline-flex;
198+
align-items: center;
199+
flex-wrap: wrap;
200+
gap: 0.4rem;
201+
}
202+
203+
.interview-strip-btn {
204+
font-size: 0.75rem;
205+
font-weight: 700;
206+
color: $dark-bg;
207+
background: $accent;
208+
border-radius: 100px;
209+
padding: 0.25rem 0.8rem;
210+
text-decoration: none;
211+
212+
&:hover { background: lighten($accent, 8%); }
213+
}

‎assets/scss/_light-theme.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1203,6 +1203,19 @@
12031203
}
12041204
}
12051205

1206+
// People Behind MySQL
1207+
.interview-card, .interview-strip { background: #ffffff; border-color: #dde3ed; }
1208+
.interview-card:hover { border-color: rgba(2, 114, 165, 0.4); }
1209+
.interview-card-people { background: linear-gradient(135deg, rgba(0, 200, 255, 0.1), rgba(0, 200, 255, 0.02) 70%); border-bottom-color: #dde3ed; }
1210+
.interview-card-footer { border-top-color: #dde3ed; }
1211+
.interview-avatar { border-color: #ffffff; background: #eef2f7; }
1212+
.interview-avatar--initials { color: #0272a5; background: rgba(0, 200, 255, 0.16); }
1213+
.interview-card-guest, .interview-card-title, .interview-strip-line { color: #0f172a; }
1214+
.interview-card-role, .interview-card-desc, .interview-strip-sub { color: #64748b; }
1215+
.interview-card-date, .interview-card-cta, .interview-strip-line a { color: #0272a5; }
1216+
.interview-format { color: #0272a5; background: rgba(0, 200, 255, 0.08); border-color: rgba(0, 200, 255, 0.3); }
1217+
.interview-strip-btn { background: #0272a5; color: #ffffff; }
1218+
12061219
// Member Directory: featured link + adopters table
12071220
.resources-featured-link {
12081221
background: #ffffff;

‎assets/scss/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ img {
3434
@import "news";
3535
@import "community";
3636
@import "webinars";
37+
@import "interviews";
3738
@import "home";
3839
@import "showcase";
3940
@import "footer";

‎content/blog/zongzhi-chen-interview/cover.jpg‎

526 KB
Loading

0 commit comments

Comments
 (0)