Skip to content

Commit a01e1e2

Browse files
mmabroukmmabrouk
committed
feat(website): blog post layout polish — Linear-scale typography, cleaner byline
Retune .ag-prose body to 16px/400/1.65 with slight negative tracking (from Linear's blog), lighter section-heading scale, and a stronger link underline. On the post page: drop the category chip, reduce the byline to avatar + name, move date and reading time to a quiet line under the subtitle, enlarge the subtitle, and even out the hero-image vertical rhythm. Claude-Session: https://claude.ai/code/session_013Qe1Vf2yvj33BVd5W1q7HB
1 parent 7f99e66 commit a01e1e2

2 files changed

Lines changed: 65 additions & 53 deletions

File tree

‎website/src/pages/blog/[slug].astro‎

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const getStaticPaths = (async () => {
1313
}) satisfies GetStaticPaths;
1414
1515
const { post } = Astro.props;
16-
const { title, description, category, date, heroImage, ogImage, readingTime } =
16+
const { title, description, date, heroImage, ogImage, readingTime } =
1717
post.data;
1818
1919
// Resolve every contributor (primary first, then co-authors) for the byline.
@@ -87,8 +87,8 @@ const sectionBorder = "border:1px solid rgba(255,255,255,0.07);margin-top:-1px;"
8787
<article style={`background:#0E0D0F;${sectionBorder}padding:0 0 24px;`}>
8888
<!-- header -->
8989
<div
90-
class="ag-pad"
91-
style="max-width:760px;margin:0 auto;padding:56px 24px 36px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;"
90+
class="ag-pad ag-post-head"
91+
style="max-width:760px;margin:0 auto;padding:56px 24px 44px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;"
9292
>
9393
<a
9494
href="/blog"
@@ -103,74 +103,68 @@ const sectionBorder = "border:1px solid rgba(255,255,255,0.07);margin-top:-1px;"
103103
stroke-linejoin="round"></path></svg
104104
>All blogs
105105
</a>
106-
<span
107-
style="display:inline-flex;align-items:center;height:24px;padding:0 13px;border-radius:999px;background:rgba(242,242,92,0.12);box-shadow:inset 0 0 0 1px rgba(242,242,92,0.3);font:var(--text-caption);letter-spacing:0.04em;color:var(--yellow-400);"
108-
>{category}</span
109-
>
110106
<h1
111107
class="ag-h1"
112108
style="margin:0;font:300 52px/1.08 var(--font-display);color:#F7F6F4;text-wrap:pretty;"
113109
>
114110
{title}
115111
</h1>
116112
<p
117-
style="margin:0;font:var(--text-body-md);color:rgba(255,255,255,0.6);max-width:600px;text-wrap:pretty;"
113+
style="margin:0;font:400 19px/1.5 var(--font-sans);letter-spacing:-0.011em;color:rgba(255,255,255,0.62);max-width:600px;text-wrap:pretty;"
118114
>
119115
{description}
120116
</p>
121117

122-
<!-- byline: stacked avatars · author name(s) · role · date · reading time -->
118+
<!-- date · reading time: quiet single line directly below the subtitle -->
119+
<div
120+
style="display:flex;align-items:center;justify-content:center;gap:9px;margin-top:-8px;font:var(--text-caption);letter-spacing:0.03em;color:rgba(255,255,255,0.45);"
121+
>
122+
<span>{dateLabel}</span>
123+
{readingTime && (
124+
<>
125+
<span style="width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,0.3);" />
126+
<span>{readingTime}</span>
127+
</>
128+
)}
129+
</div>
130+
131+
<!-- byline: stacked avatars · author name(s), vertically centered -->
123132
{
124133
primaryAuthor && (
125134
<div
126135
class="ag-author"
127-
style="display:flex;align-items:center;justify-content:center;gap:14px;margin-top:4px;"
136+
style="display:flex;align-items:center;justify-content:center;gap:12px;margin-top:4px;"
128137
>
129138
<div style="flex:0 0 auto;display:flex;align-items:center;">
130139
{authors.map((a, i) => (
131140
<a
132141
href={`/authors/${a.id}`}
133142
aria-label={a.data.name}
134-
style={`display:block;${i > 0 ? "margin-left:-14px;" : ""}`}
143+
style={`display:block;${i > 0 ? "margin-left:-12px;" : ""}`}
135144
>
136145
<img
137146
src={a.data.avatar}
138147
alt={a.data.name}
139-
width="56"
140-
height="56"
141-
style="display:block;width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:inset 0 0 0 2px #0E0D0F,inset 0 0 0 3px rgba(255,255,255,0.1);"
148+
width="40"
149+
height="40"
150+
style="display:block;width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:inset 0 0 0 2px #0E0D0F,inset 0 0 0 3px rgba(255,255,255,0.1);"
142151
/>
143152
</a>
144153
))}
145154
</div>
146-
<div style="display:flex;flex-direction:column;gap:3px;text-align:left;">
147-
<span style="font:var(--text-label);color:#F7F6F4;">
148-
{authors.map((a, i) => (
149-
<>
150-
{i > 0 && <span style="color:rgba(255,255,255,0.45);"> & </span>}
151-
<a
152-
href={`/authors/${a.id}`}
153-
style="color:#F7F6F4;text-decoration:none;"
154-
>
155-
{a.data.name}
156-
</a>
157-
</>
158-
))}
159-
</span>
160-
<div
161-
style="display:flex;align-items:center;gap:9px;flex-wrap:wrap;font:var(--text-caption);letter-spacing:0.03em;color:rgba(255,255,255,0.45);"
162-
>
163-
<span>{primaryAuthor.data.role}</span>
164-
<span style="width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,0.3);" />
165-
<span>{dateLabel}</span>
166-
{readingTime && (
167-
<>
168-
<span style="width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,0.3);" />
169-
<span>{readingTime}</span>
170-
</>
171-
)}
172-
</div>
173-
</div>
155+
<span style="font:var(--text-label);color:#F7F6F4;">
156+
{authors.map((a, i) => (
157+
<>
158+
{i > 0 && <span style="color:rgba(255,255,255,0.45);"> & </span>}
159+
<a
160+
href={`/authors/${a.id}`}
161+
style="color:#F7F6F4;text-decoration:none;"
162+
>
163+
{a.data.name}
164+
</a>
165+
</>
166+
))}
167+
</span>
174168
</div>
175169
)
176170
}
@@ -200,7 +194,7 @@ const sectionBorder = "border:1px solid rgba(255,255,255,0.07);margin-top:-1px;"
200194

201195
<!-- body -->
202196
<div
203-
class="ag-prose ag-pad"
197+
class="ag-prose ag-pad ag-post-body"
204198
style="max-width:720px;margin:0 auto;padding:48px 24px 8px;"
205199
>
206200
<Content components={{ InlineCTA, img: BlogImage }} />
@@ -267,6 +261,14 @@ const sectionBorder = "border:1px solid rgba(255,255,255,0.07);margin-top:-1px;"
267261
padding-left: 20px !important;
268262
padding-right: 20px !important;
269263
}
264+
/* Hero image breathes proportionally less on phones. */
265+
.ag-post-head {
266+
padding-top: 44px !important;
267+
padding-bottom: 30px !important;
268+
}
269+
.ag-post-body {
270+
padding-top: 32px !important;
271+
}
270272
}
271273
</style>
272274
</Site>

‎website/src/styles/global.css‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -562,40 +562,50 @@ html,
562562
Body is a muted warm white for comfortable reading; headings brighter; links
563563
carry the brand accent; code sits on a subtle raised surface.
564564
============================================================================ */
565+
/* Body scale tuned against Linear's blog (linear.app/now): 15–16px regular 400
566+
with a slight negative tracking reads far lighter than a heavier 17px block.
567+
We keep Inter for body and GT Alpina for headings — only size/weight/leading
568+
and tracking follow Linear. */
565569
.ag-prose {
566570
color: rgba(255, 255, 255, 0.72);
567571
font-family: var(--font-sans);
568-
font-size: 17px;
569-
line-height: 1.75;
572+
font-size: 16px;
573+
font-weight: 400;
574+
line-height: 1.65;
575+
letter-spacing: -0.011em;
570576
}
571577
.ag-prose > :first-child {
572578
margin-top: 0;
573579
}
574580
.ag-prose p {
575-
margin: 0 0 1.15em;
581+
margin: 0 0 1.25em;
576582
}
577583
.ag-prose h2 {
578-
margin: 2em 0 0.6em;
579-
font: 400 30px/1.2 var(--font-display);
584+
margin: 2em 0 0.55em;
585+
font: 400 26px/1.25 var(--font-display);
586+
letter-spacing: -0.015em;
580587
color: var(--text-on-dark-heading);
581588
text-wrap: pretty;
582589
}
583590
.ag-prose h3 {
584-
margin: 1.6em 0 0.5em;
585-
font: 400 23px/1.3 var(--font-display);
591+
margin: 1.7em 0 0.5em;
592+
font: 400 20px/1.3 var(--font-display);
593+
letter-spacing: -0.012em;
586594
color: var(--text-on-dark-heading);
587595
text-wrap: pretty;
588596
}
589597
.ag-prose h4 {
590-
margin: 1.4em 0 0.4em;
591-
font: 600 17px/1.4 var(--font-sans);
598+
margin: 1.5em 0 0.4em;
599+
font: 600 16px/1.4 var(--font-sans);
600+
letter-spacing: -0.006em;
592601
color: var(--text-on-dark-heading);
593602
}
594603
.ag-prose a {
595604
color: var(--yellow-400);
605+
font-weight: 400;
596606
text-decoration: underline;
597607
text-underline-offset: 2px;
598-
text-decoration-color: rgba(242, 242, 92, 0.4);
608+
text-decoration-color: rgba(242, 242, 92, 0.55);
599609
}
600610
.ag-prose a:hover {
601611
text-decoration-color: var(--yellow-400);

0 commit comments

Comments
 (0)