Skip to content

Commit a033972

Browse files
Mazizovaclaude
Mazizova
and
claude
authored
Blog: publish OurSQL Digest #1 (October 2026) as its own product (#204)
Digest issues get their own masthead, amber accent, numbered sections with anchors, an In this issue list and a framed Why it matters block, so they read differently from the Newsletter. Adds the issue with its cover. Co-authored-by: Claude Sonnet 5.5 <noreply@anthropic.com>
1 parent 507157c commit a033972

8 files changed

Lines changed: 500 additions & 4 deletions

File tree

‎assets/scss/_digest.scss‎

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
// ── OurSQL Digest ───────────────────────────────────────────────────────────
2+
// The monthly digest is its own product next to the Newsletter: amber accent
3+
// instead of the site's cyan, a masthead, numbered sections with anchors, and
4+
// a framed "Why it matters" block. Imported last so the light-theme rules at
5+
// the bottom of this file win over the generic light theme.
6+
7+
$digest: #ffb020;
8+
$digest-ink: #1b1300;
9+
$digest-deep: #9a5b00; // readable amber on light backgrounds
10+
11+
// "Why it matters" block (shortcode) — used inside Digest issues
12+
.digest-why {
13+
margin: 1.75rem 0 0;
14+
padding: 1.25rem 1.5rem;
15+
background: rgba($digest, 0.08);
16+
border: 1px solid rgba($digest, 0.28);
17+
border-left: 4px solid $digest;
18+
border-radius: 0 12px 12px 0;
19+
}
20+
21+
.digest-why-label {
22+
display: block;
23+
margin-bottom: 0.5rem;
24+
font-size: 0.7rem;
25+
font-weight: 800;
26+
letter-spacing: 0.14em;
27+
text-transform: uppercase;
28+
color: $digest;
29+
}
30+
31+
.digest-why-body {
32+
p { margin: 0 0 0.75rem; color: $white; }
33+
p:last-child { margin-bottom: 0; }
34+
}
35+
36+
// Blog list: Digest cards carry the amber accent
37+
.post-card--digest {
38+
border-color: rgba($digest, 0.4) !important;
39+
40+
&:hover { border-color: $digest !important; }
41+
}
42+
43+
.post-card-tag--digest { color: $digest !important; }
44+
45+
// Masthead + "In this issue"
46+
.digest-masthead {
47+
display: flex;
48+
align-items: center;
49+
gap: 0.75rem;
50+
margin-bottom: 1.5rem;
51+
padding: 0.75rem 1rem;
52+
background: linear-gradient(90deg, rgba($digest, 0.16), rgba($digest, 0.04));
53+
border: 1px solid rgba($digest, 0.32);
54+
border-radius: 12px;
55+
}
56+
57+
.digest-mark {
58+
flex-shrink: 0;
59+
width: 32px;
60+
height: 32px;
61+
display: flex;
62+
align-items: center;
63+
justify-content: center;
64+
border-radius: 8px;
65+
background: $digest;
66+
color: $digest-ink;
67+
}
68+
69+
.digest-masthead-name {
70+
font-size: 1.0625rem;
71+
font-weight: 700;
72+
letter-spacing: 0.01em;
73+
color: $white;
74+
75+
strong { color: $digest; font-weight: 800; }
76+
}
77+
78+
.digest-masthead-issue {
79+
margin-left: auto;
80+
font-size: 0.75rem;
81+
font-weight: 700;
82+
letter-spacing: 0.1em;
83+
text-transform: uppercase;
84+
color: $digest;
85+
text-align: right;
86+
}
87+
88+
.digest-tagline {
89+
margin: 0 0 0.25rem;
90+
font-size: 1rem;
91+
color: $off-white;
92+
opacity: 0.8;
93+
}
94+
95+
.digest-toc {
96+
margin-top: 1.5rem;
97+
98+
ul {
99+
display: flex;
100+
flex-wrap: wrap;
101+
gap: 0.5rem;
102+
margin: 0.625rem 0 0;
103+
padding: 0;
104+
list-style: none;
105+
}
106+
107+
a {
108+
display: inline-flex;
109+
align-items: baseline;
110+
gap: 0.4rem;
111+
padding: 0.3rem 0.75rem;
112+
font-size: 0.8125rem;
113+
font-weight: 500;
114+
color: $off-white;
115+
text-decoration: none;
116+
border: 1px solid rgba($digest, 0.3);
117+
border-radius: 100px;
118+
transition: background 0.2s ease, border-color 0.2s ease;
119+
120+
&:hover { background: rgba($digest, 0.14); border-color: $digest; }
121+
}
122+
}
123+
124+
.digest-toc-label {
125+
font-size: 0.7rem;
126+
font-weight: 700;
127+
letter-spacing: 0.12em;
128+
text-transform: uppercase;
129+
color: $muted;
130+
}
131+
132+
.digest-toc-n {
133+
font-size: 0.7rem;
134+
font-weight: 800;
135+
color: $digest;
136+
}
137+
138+
// The issue itself
139+
.post-layout--digest {
140+
// Let the grid column shrink below the "Coming up" table's natural width, so
141+
// the table scrolls sideways instead of widening the whole page on phones.
142+
& > * { min-width: 0; }
143+
144+
.post-header { border-bottom-color: rgba($digest, 0.3); }
145+
146+
.post-header .post-tags .tag--digest {
147+
color: $digest;
148+
background: rgba($digest, 0.12);
149+
border-color: rgba($digest, 0.35);
150+
}
151+
152+
.post-header .post-meta .post-author[href]:hover { color: $digest; }
153+
154+
.post-content {
155+
counter-reset: digest-section;
156+
157+
a {
158+
text-decoration-color: rgba($digest, 0.45);
159+
&:hover { text-decoration-color: $digest; }
160+
}
161+
162+
// Numbered sections, each with its own anchor
163+
h2 {
164+
counter-increment: digest-section;
165+
margin: 3.25rem 0 1rem;
166+
padding: 1.25rem 0 0;
167+
font-size: 1.5rem;
168+
line-height: 1.3;
169+
border-bottom: 0;
170+
border-top: 2px solid rgba($digest, 0.35);
171+
scroll-margin-top: 96px;
172+
173+
&::before {
174+
content: counter(digest-section, decimal-leading-zero);
175+
display: block;
176+
margin-bottom: 0.5rem;
177+
font-size: 0.75rem;
178+
font-weight: 800;
179+
letter-spacing: 0.14em;
180+
color: $digest;
181+
}
182+
183+
.anchor-link {
184+
margin-left: 0.5rem;
185+
font-weight: 400;
186+
color: $muted;
187+
text-decoration: none;
188+
opacity: 0;
189+
transition: opacity 0.2s ease;
190+
191+
&:hover { color: $digest; }
192+
&:focus-visible { opacity: 1; }
193+
}
194+
195+
&:hover .anchor-link { opacity: 1; }
196+
}
197+
198+
// The "Coming up" table scrolls sideways on narrow screens
199+
table {
200+
display: block;
201+
width: 100%;
202+
overflow-x: auto;
203+
margin: 1.5rem 0;
204+
border-collapse: collapse;
205+
font-size: 0.9rem;
206+
207+
th, td {
208+
padding: 0.625rem 0.875rem;
209+
text-align: left;
210+
vertical-align: top;
211+
border-bottom: 1px solid $dark-border;
212+
}
213+
214+
th {
215+
font-size: 0.7rem;
216+
font-weight: 800;
217+
letter-spacing: 0.1em;
218+
text-transform: uppercase;
219+
color: $digest;
220+
border-bottom: 2px solid rgba($digest, 0.4);
221+
white-space: nowrap;
222+
}
223+
224+
td:first-child { white-space: nowrap; font-weight: 600; color: $white; }
225+
}
226+
}
227+
}
228+
229+
@media (max-width: 576px) {
230+
.digest-masthead { flex-wrap: wrap; row-gap: 0.25rem; }
231+
.digest-masthead-issue { margin-left: 0; flex-basis: 100%; text-align: left; }
232+
}
233+
234+
[data-theme="light"] {
235+
.digest-why {
236+
background: #fff8e8;
237+
border-color: #f0d9a4;
238+
border-left-color: #e29a00;
239+
}
240+
.digest-why-label { color: $digest-deep; }
241+
.digest-why-body p { color: #0f172a; }
242+
243+
.post-card--digest { border-color: #f0d9a4 !important; &:hover { border-color: #e29a00 !important; } }
244+
.post-card-tag--digest { color: $digest-deep !important; }
245+
246+
.digest-masthead {
247+
background: linear-gradient(90deg, #fff1cf, #fffaf0);
248+
border-color: #f0d9a4;
249+
}
250+
.digest-masthead-name { color: #0f172a; strong { color: $digest-deep; } }
251+
.digest-masthead-issue, .digest-toc-n { color: $digest-deep; }
252+
.digest-tagline { color: #334155; opacity: 1; }
253+
.digest-toc a { color: #334155; border-color: #f0d9a4; &:hover { background: #fff1cf; border-color: #e29a00; } }
254+
255+
.post-layout--digest {
256+
.post-header { border-bottom-color: #f0d9a4; }
257+
.post-header .post-tags .tag--digest { color: $digest-deep; background: #fff1cf; border-color: #f0d9a4; }
258+
.post-content {
259+
a { text-decoration-color: rgba($digest-deep, 0.5); }
260+
h2 { border-top-color: #f0d9a4; &::before { color: $digest-deep; } }
261+
table {
262+
th { color: $digest-deep; border-bottom-color: #f0d9a4; }
263+
th, td { border-bottom-color: #dde3ed; }
264+
td:first-child { color: #0f172a; }
265+
}
266+
}
267+
}
268+
}

‎assets/scss/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,3 +99,4 @@ img {
9999
color: darken($muted, 10%);
100100
}
101101
}
102+
@import "digest";

‎content/blog/oursql-digest-october-2026/cover.jpg‎

163 KB
Loading

0 commit comments

Comments
 (0)