Skip to content

Commit 2570b3a

Browse files
Mazizovaclaude
Mazizova
and
claude
authored
Add the MySQL in Practice case-study section and publish the Ivinco MOCO case study (#129)
Resources becomes a dropdown (OurSQL Universe, MySQL in Practice). Case studies are blog articles tagged Case Study with a case_study block; the new section collects them as cards with the company logo, and the article shows the company strip, an About the company box with tracked links to the company site (UTM), the author, and back-links from the company's catalog page and the author's profile. Co-authored-by: Claude Sonnet 5.5 <noreply@anthropic.com>
1 parent e16e4b3 commit 2570b3a

15 files changed

Lines changed: 569 additions & 4 deletions

File tree

‎assets/scss/_case-studies.scss‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
// Resources > MySQL in Practice — case-study cards on the list page, the company
2+
// strip and "About the company" box on the article, and the reverse link on catalog
3+
// pages. Built on the interview-card language.
4+
5+
.case-grid {
6+
display: grid;
7+
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
8+
gap: 1.25rem;
9+
margin-top: 1rem;
10+
}
11+
12+
// ── Card ──
13+
.case-card {
14+
display: flex;
15+
flex-direction: column;
16+
background: $dark-card;
17+
border: 1px solid $dark-border;
18+
border-radius: 12px;
19+
overflow: hidden;
20+
text-decoration: none;
21+
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
22+
23+
&:hover {
24+
border-color: rgba($accent, 0.3);
25+
box-shadow: 0 6px 24px rgba($accent, 0.07);
26+
transform: translateY(-2px);
27+
28+
.case-card-cta { color: lighten($accent, 8%); }
29+
}
30+
}
31+
32+
.case-card-company {
33+
display: flex;
34+
align-items: center;
35+
gap: 0.9rem;
36+
padding: 1.1rem 1.25rem;
37+
background: linear-gradient(135deg, rgba($accent, 0.1), rgba($accent, 0.02) 70%);
38+
border-bottom: 1px solid $dark-border;
39+
}
40+
41+
.case-card-logo,
42+
.case-strip-logo,
43+
.case-company-logo {
44+
flex-shrink: 0;
45+
border-radius: 12px;
46+
background: #ffffff;
47+
border: 1px solid $dark-border;
48+
object-fit: contain;
49+
}
50+
51+
.case-card-logo { width: 56px; height: 56px; }
52+
53+
.case-card-company-text { display: flex; flex-direction: column; min-width: 0; }
54+
55+
.case-card-kicker {
56+
font-size: 0.6875rem;
57+
font-weight: 700;
58+
letter-spacing: 0.08em;
59+
text-transform: uppercase;
60+
color: $accent;
61+
}
62+
63+
.case-card-company-name {
64+
font-size: 1.0625rem;
65+
font-weight: 700;
66+
color: $off-white;
67+
margin-top: 0.1rem;
68+
}
69+
70+
.case-card-body { flex: 1; padding: 1.25rem 1.25rem 1rem; }
71+
72+
.case-card-title {
73+
font-size: 1.0625rem;
74+
font-weight: 700;
75+
line-height: 1.4;
76+
color: $off-white;
77+
margin: 0 0 0.6rem;
78+
}
79+
80+
.case-card-desc {
81+
font-size: 0.875rem;
82+
line-height: 1.55;
83+
color: $muted;
84+
margin: 0;
85+
}
86+
87+
.case-card-footer {
88+
display: flex;
89+
align-items: center;
90+
justify-content: space-between;
91+
gap: 0.75rem;
92+
padding: 0.85rem 1.25rem;
93+
border-top: 1px solid $dark-border;
94+
}
95+
96+
.case-card-author { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; }
97+
98+
.case-card-author-text { display: flex; flex-direction: column; min-width: 0; }
99+
100+
.case-card-author-name { font-size: 0.8125rem; font-weight: 600; color: $off-white; }
101+
102+
.case-card-meta { font-size: 0.75rem; color: $muted; }
103+
104+
.case-card-cta {
105+
font-size: 0.8125rem;
106+
font-weight: 600;
107+
color: $accent;
108+
white-space: nowrap;
109+
transition: color 0.2s ease;
110+
}
111+
112+
// ── Company strip under the article title ──
113+
.case-strip {
114+
display: flex;
115+
align-items: center;
116+
flex-wrap: wrap;
117+
gap: 1rem;
118+
margin-top: 1.5rem;
119+
padding: 1rem 1.25rem;
120+
background: $dark-card;
121+
border: 1px solid $dark-border;
122+
border-radius: 12px;
123+
}
124+
125+
.case-strip-logo { width: 56px; height: 56px; }
126+
127+
.case-strip-text { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
128+
129+
.case-strip-line {
130+
font-size: 0.9375rem;
131+
font-weight: 600;
132+
color: $off-white;
133+
134+
a { color: $accent; text-decoration: none; &:hover { text-decoration: underline; } }
135+
}
136+
137+
.case-strip-sub {
138+
font-size: 0.8125rem;
139+
color: $muted;
140+
margin-top: 0.15rem;
141+
142+
a { color: inherit; text-decoration: underline; &:hover { color: $accent; } }
143+
}
144+
145+
.case-strip-links { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }
146+
147+
.case-strip-btn {
148+
font-size: 0.8125rem;
149+
font-weight: 600;
150+
color: $accent;
151+
background: $accent-glow;
152+
border: 1px solid rgba($accent, 0.3);
153+
border-radius: 8px;
154+
padding: 0.4rem 0.85rem;
155+
text-decoration: none;
156+
157+
&:hover { background: rgba($accent, 0.22); }
158+
159+
&--primary {
160+
color: $dark-bg;
161+
background: $accent;
162+
border-color: $accent;
163+
164+
&:hover { background: lighten($accent, 8%); }
165+
}
166+
}
167+
168+
// ── "About the company" box at the end of the article ──
169+
.case-company {
170+
display: flex;
171+
align-items: flex-start;
172+
gap: 1.25rem;
173+
margin-top: 1.5rem;
174+
padding: 1.75rem;
175+
background: $dark-card;
176+
border: 1px solid $dark-border;
177+
border-radius: 14px;
178+
179+
@media (max-width: $break-md) { flex-direction: column; padding: 1.25rem; }
180+
}
181+
182+
.case-company-logo { width: 72px; height: 72px; }
183+
184+
.case-company-body { display: flex; flex-direction: column; min-width: 0; }
185+
186+
.case-company-name { font-size: 1.0625rem; font-weight: 700; color: $off-white; }
187+
188+
.case-company-desc { font-size: 0.875rem; line-height: 1.6; color: $muted; margin: 0.4rem 0 0; }
189+
190+
.case-company-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
191+
192+
// ── "Share your case" strip on the list page ──
193+
.case-cta {
194+
display: flex;
195+
align-items: center;
196+
justify-content: space-between;
197+
gap: 1.5rem;
198+
flex-wrap: wrap;
199+
padding: 1.5rem 1.75rem;
200+
background: $dark-card;
201+
border: 1px solid $dark-border;
202+
border-radius: 12px;
203+
}
204+
205+
.case-cta-title { font-size: 1.0625rem; font-weight: 700; color: $off-white; margin: 0 0 0.3rem; }
206+
207+
.case-cta-desc { font-size: 0.875rem; line-height: 1.6; color: $muted; margin: 0; max-width: 560px; }
208+
209+
// ── Reverse link on a catalog page ──
210+
.resource-case-box { margin-top: 1.5rem; }
211+
212+
.resource-case-link {
213+
display: flex;
214+
flex-direction: column;
215+
gap: 0.15rem;
216+
margin-top: 0.6rem;
217+
padding: 0.9rem 1.1rem;
218+
background: $dark-card;
219+
border: 1px solid $dark-border;
220+
border-left: 2px solid $accent;
221+
border-radius: 0 8px 8px 0;
222+
text-decoration: none;
223+
transition: background 0.2s ease;
224+
225+
&:hover { background: $dark-surface; }
226+
}
227+
228+
.resource-case-title { font-size: 0.9375rem; font-weight: 600; color: $off-white; line-height: 1.4; }
229+
230+
.resource-case-meta { font-size: 0.8125rem; color: $muted; }
231+
232+
.case-card-author { --av: 36px; }
233+
234+
.post-author-role { font-size: 0.8125rem; color: $muted; }
235+
236+
// Long single-line snippets (e.g. error messages) wrap instead of scrolling sideways.
237+
.post-content pre {
238+
white-space: pre-wrap;
239+
overflow-wrap: anywhere;
240+
}

‎assets/scss/_light-theme.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1228,6 +1228,22 @@
12281228
.slides-nav { color: #0272a5; background: rgba(0, 200, 255, 0.08); border-color: rgba(0, 200, 255, 0.3); }
12291229
.slides-btn { color: #0272a5; background: rgba(0, 200, 255, 0.08); border-color: rgba(0, 200, 255, 0.3); }
12301230

1231+
// MySQL in Practice
1232+
.case-card, .case-strip, .case-company, .case-cta { background: #ffffff; border-color: #dde3ed; }
1233+
.case-card:hover { border-color: rgba(2, 114, 165, 0.4); }
1234+
.case-card-company { background: linear-gradient(135deg, rgba(0, 200, 255, 0.1), rgba(0, 200, 255, 0.02) 70%); border-bottom-color: #dde3ed; }
1235+
.case-card-footer { border-top-color: #dde3ed; }
1236+
.case-card-logo, .case-strip-logo, .case-company-logo { border-color: #dde3ed; }
1237+
.case-card-company-name, .case-card-title, .case-card-author-name, .case-strip-line, .case-company-name, .case-cta-title { color: #0f172a; }
1238+
.case-card-desc, .case-card-meta, .case-strip-sub, .case-company-desc, .case-cta-desc { color: #64748b; }
1239+
.case-card-kicker, .case-card-cta, .case-strip-line a { color: #0272a5; }
1240+
.case-strip-btn { color: #0272a5; background: rgba(0, 200, 255, 0.08); border-color: rgba(0, 200, 255, 0.3); }
1241+
.case-strip-btn--primary { color: #ffffff; background: #0272a5; border-color: #0272a5; }
1242+
.resource-case-link { background: #ffffff; border-color: #dde3ed; border-left-color: #00c8ff; &:hover { background: #f8f9fc; } }
1243+
.resource-case-title { color: #0f172a; }
1244+
.post-author-role { color: #64748b; }
1245+
.resource-case-meta { color: #64748b; }
1246+
12311247
// People Behind MySQL
12321248
.interview-card, .interview-strip { background: #ffffff; border-color: #dde3ed; }
12331249
.interview-card:hover { border-color: rgba(2, 114, 165, 0.4); }

‎assets/scss/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ img {
3838
@import "community";
3939
@import "webinars";
4040
@import "interviews";
41+
@import "case-studies";
4142
@import "event-landing";
4243
@import "home";
4344
@import "showcase";

0 commit comments

Comments
 (0)