style: apply team-guide aesthetic to blog
- Inline self-contained <style> blocks in both templates (after ../style.css link, before </head>) - Gradient post titles (amber #c9935a -> warm gold #f59e0b -> blue #38bdf8) via background-clip: text - Date pills: monospace, blue text, rounded pill border - Code blocks: dark panel (#0a0e14), 1px border (#2a3340), rounded, monospace, overflow-x - Inline code: distinct background (#1c2230), green tint (#9fe6c0) - H2 left accent bar (#c9935a), H3 purple accent (#a855f7) - Blockquote callout rules (future-proofing; build.js doesn't emit <blockquote> yet) - Links: blue (#38bdf8), hover purple (#a855f7) - Index template: gradient title, section-label kicker pill, date pill, card hover accent - Nav/footer/site chrome untouched - 11 posts + index regenerated via node build.js
This commit is contained in:
@@ -26,6 +26,60 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<style>
|
||||
/* ── Team guide aesthetic: self-contained overrides ── */
|
||||
|
||||
/* ── Section label kicker ── */
|
||||
.section-label {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #38bdf8;
|
||||
border: 1px solid rgba(147, 140, 129, 0.25);
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ── Gradient index title ── */
|
||||
.blog-header__title {
|
||||
background: linear-gradient(90deg, #c9935a, #f59e0b 40%, #38bdf8);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ── Date pill ── */
|
||||
.blog-card__date {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #38bdf8;
|
||||
border: 1px solid rgba(147, 140, 129, 0.25);
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* ── Card hover accent ── */
|
||||
.blog-card:hover {
|
||||
border-color: #c9935a;
|
||||
}
|
||||
|
||||
/* ── Read link accent ── */
|
||||
.blog-card__read {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.blog-card:hover .blog-card__read {
|
||||
color: #a855f7;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
Before
After
|
+133
@@ -50,6 +50,139 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<style>
|
||||
/* ── Team guide aesthetic: self-contained overrides ── */
|
||||
|
||||
/* ── Gradient title (amber → warm gold, hint of blue) ── */
|
||||
.post__title {
|
||||
background: linear-gradient(90deg, #c9935a, #f59e0b 40%, #38bdf8);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ── Date pill ── */
|
||||
.post__date {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #38bdf8;
|
||||
border: 1px solid rgba(147, 140, 129, 0.25);
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ── Lead ── */
|
||||
.post__lead {
|
||||
color: #9aa7b4;
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ── H2: left accent bar ── */
|
||||
.post__body h2 {
|
||||
font-size: 1.7rem;
|
||||
margin: 54px 0 6px;
|
||||
padding-left: 16px;
|
||||
border-left: 4px solid #c9935a;
|
||||
}
|
||||
|
||||
/* ── H3: purple secondary accent ── */
|
||||
.post__body h3 {
|
||||
color: #a855f7;
|
||||
font-size: 1.18rem;
|
||||
margin: 30px 0 4px;
|
||||
}
|
||||
|
||||
/* ── Inline code ── */
|
||||
.post__body code {
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.86em;
|
||||
background: #1c2230;
|
||||
color: #9fe6c0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
/* ── Code blocks (dark panel) ── */
|
||||
.post__body pre {
|
||||
background: #0a0e14;
|
||||
border: 1px solid #2a3340;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px;
|
||||
overflow-x: auto;
|
||||
margin: 14px 0;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
/* Reset inline-code double-up inside pre */
|
||||
.post__body pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Blockquote callout (ready for future use; build.js does not emit blockquote yet) ── */
|
||||
.post__body blockquote {
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
border-left: 4px solid #f59e0b;
|
||||
border-radius: 0 12px 12px 0;
|
||||
padding: 16px 18px;
|
||||
margin: 18px 0;
|
||||
color: #f4e3c4;
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
/* ── Links ── */
|
||||
.post__body a {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.post__body a:hover {
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
/* ── Strong ── */
|
||||
.post__body strong {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* ── HR ── */
|
||||
.post__body hr {
|
||||
border: none;
|
||||
border-top: 1px solid #2a3340;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
/* ── Figures ── */
|
||||
.post__body figure img {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
.post__body figcaption {
|
||||
color: #9aa7b4;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ── List spacing ── */
|
||||
.post__body li {
|
||||
margin: 4px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
Before
After
|
@@ -50,6 +50,139 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<style>
|
||||
/* ── Team guide aesthetic: self-contained overrides ── */
|
||||
|
||||
/* ── Gradient title (amber → warm gold, hint of blue) ── */
|
||||
.post__title {
|
||||
background: linear-gradient(90deg, #c9935a, #f59e0b 40%, #38bdf8);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ── Date pill ── */
|
||||
.post__date {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #38bdf8;
|
||||
border: 1px solid rgba(147, 140, 129, 0.25);
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ── Lead ── */
|
||||
.post__lead {
|
||||
color: #9aa7b4;
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ── H2: left accent bar ── */
|
||||
.post__body h2 {
|
||||
font-size: 1.7rem;
|
||||
margin: 54px 0 6px;
|
||||
padding-left: 16px;
|
||||
border-left: 4px solid #c9935a;
|
||||
}
|
||||
|
||||
/* ── H3: purple secondary accent ── */
|
||||
.post__body h3 {
|
||||
color: #a855f7;
|
||||
font-size: 1.18rem;
|
||||
margin: 30px 0 4px;
|
||||
}
|
||||
|
||||
/* ── Inline code ── */
|
||||
.post__body code {
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.86em;
|
||||
background: #1c2230;
|
||||
color: #9fe6c0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
/* ── Code blocks (dark panel) ── */
|
||||
.post__body pre {
|
||||
background: #0a0e14;
|
||||
border: 1px solid #2a3340;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px;
|
||||
overflow-x: auto;
|
||||
margin: 14px 0;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
/* Reset inline-code double-up inside pre */
|
||||
.post__body pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Blockquote callout (ready for future use; build.js does not emit blockquote yet) ── */
|
||||
.post__body blockquote {
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
border-left: 4px solid #f59e0b;
|
||||
border-radius: 0 12px 12px 0;
|
||||
padding: 16px 18px;
|
||||
margin: 18px 0;
|
||||
color: #f4e3c4;
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
/* ── Links ── */
|
||||
.post__body a {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.post__body a:hover {
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
/* ── Strong ── */
|
||||
.post__body strong {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* ── HR ── */
|
||||
.post__body hr {
|
||||
border: none;
|
||||
border-top: 1px solid #2a3340;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
/* ── Figures ── */
|
||||
.post__body figure img {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
.post__body figcaption {
|
||||
color: #9aa7b4;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ── List spacing ── */
|
||||
.post__body li {
|
||||
margin: 4px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
Before
After
|
@@ -50,6 +50,139 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<style>
|
||||
/* ── Team guide aesthetic: self-contained overrides ── */
|
||||
|
||||
/* ── Gradient title (amber → warm gold, hint of blue) ── */
|
||||
.post__title {
|
||||
background: linear-gradient(90deg, #c9935a, #f59e0b 40%, #38bdf8);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ── Date pill ── */
|
||||
.post__date {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #38bdf8;
|
||||
border: 1px solid rgba(147, 140, 129, 0.25);
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ── Lead ── */
|
||||
.post__lead {
|
||||
color: #9aa7b4;
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ── H2: left accent bar ── */
|
||||
.post__body h2 {
|
||||
font-size: 1.7rem;
|
||||
margin: 54px 0 6px;
|
||||
padding-left: 16px;
|
||||
border-left: 4px solid #c9935a;
|
||||
}
|
||||
|
||||
/* ── H3: purple secondary accent ── */
|
||||
.post__body h3 {
|
||||
color: #a855f7;
|
||||
font-size: 1.18rem;
|
||||
margin: 30px 0 4px;
|
||||
}
|
||||
|
||||
/* ── Inline code ── */
|
||||
.post__body code {
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.86em;
|
||||
background: #1c2230;
|
||||
color: #9fe6c0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
/* ── Code blocks (dark panel) ── */
|
||||
.post__body pre {
|
||||
background: #0a0e14;
|
||||
border: 1px solid #2a3340;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px;
|
||||
overflow-x: auto;
|
||||
margin: 14px 0;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
/* Reset inline-code double-up inside pre */
|
||||
.post__body pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Blockquote callout (ready for future use; build.js does not emit blockquote yet) ── */
|
||||
.post__body blockquote {
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
border-left: 4px solid #f59e0b;
|
||||
border-radius: 0 12px 12px 0;
|
||||
padding: 16px 18px;
|
||||
margin: 18px 0;
|
||||
color: #f4e3c4;
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
/* ── Links ── */
|
||||
.post__body a {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.post__body a:hover {
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
/* ── Strong ── */
|
||||
.post__body strong {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* ── HR ── */
|
||||
.post__body hr {
|
||||
border: none;
|
||||
border-top: 1px solid #2a3340;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
/* ── Figures ── */
|
||||
.post__body figure img {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
.post__body figcaption {
|
||||
color: #9aa7b4;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ── List spacing ── */
|
||||
.post__body li {
|
||||
margin: 4px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
Before
After
|
@@ -50,6 +50,139 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<style>
|
||||
/* ── Team guide aesthetic: self-contained overrides ── */
|
||||
|
||||
/* ── Gradient title (amber → warm gold, hint of blue) ── */
|
||||
.post__title {
|
||||
background: linear-gradient(90deg, #c9935a, #f59e0b 40%, #38bdf8);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ── Date pill ── */
|
||||
.post__date {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #38bdf8;
|
||||
border: 1px solid rgba(147, 140, 129, 0.25);
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ── Lead ── */
|
||||
.post__lead {
|
||||
color: #9aa7b4;
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ── H2: left accent bar ── */
|
||||
.post__body h2 {
|
||||
font-size: 1.7rem;
|
||||
margin: 54px 0 6px;
|
||||
padding-left: 16px;
|
||||
border-left: 4px solid #c9935a;
|
||||
}
|
||||
|
||||
/* ── H3: purple secondary accent ── */
|
||||
.post__body h3 {
|
||||
color: #a855f7;
|
||||
font-size: 1.18rem;
|
||||
margin: 30px 0 4px;
|
||||
}
|
||||
|
||||
/* ── Inline code ── */
|
||||
.post__body code {
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.86em;
|
||||
background: #1c2230;
|
||||
color: #9fe6c0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
/* ── Code blocks (dark panel) ── */
|
||||
.post__body pre {
|
||||
background: #0a0e14;
|
||||
border: 1px solid #2a3340;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px;
|
||||
overflow-x: auto;
|
||||
margin: 14px 0;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
/* Reset inline-code double-up inside pre */
|
||||
.post__body pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Blockquote callout (ready for future use; build.js does not emit blockquote yet) ── */
|
||||
.post__body blockquote {
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
border-left: 4px solid #f59e0b;
|
||||
border-radius: 0 12px 12px 0;
|
||||
padding: 16px 18px;
|
||||
margin: 18px 0;
|
||||
color: #f4e3c4;
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
/* ── Links ── */
|
||||
.post__body a {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.post__body a:hover {
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
/* ── Strong ── */
|
||||
.post__body strong {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* ── HR ── */
|
||||
.post__body hr {
|
||||
border: none;
|
||||
border-top: 1px solid #2a3340;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
/* ── Figures ── */
|
||||
.post__body figure img {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
.post__body figcaption {
|
||||
color: #9aa7b4;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ── List spacing ── */
|
||||
.post__body li {
|
||||
margin: 4px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
Before
After
|
@@ -50,6 +50,139 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<style>
|
||||
/* ── Team guide aesthetic: self-contained overrides ── */
|
||||
|
||||
/* ── Gradient title (amber → warm gold, hint of blue) ── */
|
||||
.post__title {
|
||||
background: linear-gradient(90deg, #c9935a, #f59e0b 40%, #38bdf8);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ── Date pill ── */
|
||||
.post__date {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #38bdf8;
|
||||
border: 1px solid rgba(147, 140, 129, 0.25);
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ── Lead ── */
|
||||
.post__lead {
|
||||
color: #9aa7b4;
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ── H2: left accent bar ── */
|
||||
.post__body h2 {
|
||||
font-size: 1.7rem;
|
||||
margin: 54px 0 6px;
|
||||
padding-left: 16px;
|
||||
border-left: 4px solid #c9935a;
|
||||
}
|
||||
|
||||
/* ── H3: purple secondary accent ── */
|
||||
.post__body h3 {
|
||||
color: #a855f7;
|
||||
font-size: 1.18rem;
|
||||
margin: 30px 0 4px;
|
||||
}
|
||||
|
||||
/* ── Inline code ── */
|
||||
.post__body code {
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.86em;
|
||||
background: #1c2230;
|
||||
color: #9fe6c0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
/* ── Code blocks (dark panel) ── */
|
||||
.post__body pre {
|
||||
background: #0a0e14;
|
||||
border: 1px solid #2a3340;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px;
|
||||
overflow-x: auto;
|
||||
margin: 14px 0;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
/* Reset inline-code double-up inside pre */
|
||||
.post__body pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Blockquote callout (ready for future use; build.js does not emit blockquote yet) ── */
|
||||
.post__body blockquote {
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
border-left: 4px solid #f59e0b;
|
||||
border-radius: 0 12px 12px 0;
|
||||
padding: 16px 18px;
|
||||
margin: 18px 0;
|
||||
color: #f4e3c4;
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
/* ── Links ── */
|
||||
.post__body a {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.post__body a:hover {
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
/* ── Strong ── */
|
||||
.post__body strong {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* ── HR ── */
|
||||
.post__body hr {
|
||||
border: none;
|
||||
border-top: 1px solid #2a3340;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
/* ── Figures ── */
|
||||
.post__body figure img {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
.post__body figcaption {
|
||||
color: #9aa7b4;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ── List spacing ── */
|
||||
.post__body li {
|
||||
margin: 4px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
Before
After
|
@@ -50,6 +50,139 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<style>
|
||||
/* ── Team guide aesthetic: self-contained overrides ── */
|
||||
|
||||
/* ── Gradient title (amber → warm gold, hint of blue) ── */
|
||||
.post__title {
|
||||
background: linear-gradient(90deg, #c9935a, #f59e0b 40%, #38bdf8);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ── Date pill ── */
|
||||
.post__date {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #38bdf8;
|
||||
border: 1px solid rgba(147, 140, 129, 0.25);
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ── Lead ── */
|
||||
.post__lead {
|
||||
color: #9aa7b4;
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ── H2: left accent bar ── */
|
||||
.post__body h2 {
|
||||
font-size: 1.7rem;
|
||||
margin: 54px 0 6px;
|
||||
padding-left: 16px;
|
||||
border-left: 4px solid #c9935a;
|
||||
}
|
||||
|
||||
/* ── H3: purple secondary accent ── */
|
||||
.post__body h3 {
|
||||
color: #a855f7;
|
||||
font-size: 1.18rem;
|
||||
margin: 30px 0 4px;
|
||||
}
|
||||
|
||||
/* ── Inline code ── */
|
||||
.post__body code {
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.86em;
|
||||
background: #1c2230;
|
||||
color: #9fe6c0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
/* ── Code blocks (dark panel) ── */
|
||||
.post__body pre {
|
||||
background: #0a0e14;
|
||||
border: 1px solid #2a3340;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px;
|
||||
overflow-x: auto;
|
||||
margin: 14px 0;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
/* Reset inline-code double-up inside pre */
|
||||
.post__body pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Blockquote callout (ready for future use; build.js does not emit blockquote yet) ── */
|
||||
.post__body blockquote {
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
border-left: 4px solid #f59e0b;
|
||||
border-radius: 0 12px 12px 0;
|
||||
padding: 16px 18px;
|
||||
margin: 18px 0;
|
||||
color: #f4e3c4;
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
/* ── Links ── */
|
||||
.post__body a {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.post__body a:hover {
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
/* ── Strong ── */
|
||||
.post__body strong {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* ── HR ── */
|
||||
.post__body hr {
|
||||
border: none;
|
||||
border-top: 1px solid #2a3340;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
/* ── Figures ── */
|
||||
.post__body figure img {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
.post__body figcaption {
|
||||
color: #9aa7b4;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ── List spacing ── */
|
||||
.post__body li {
|
||||
margin: 4px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
Before
After
|
@@ -50,6 +50,139 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<style>
|
||||
/* ── Team guide aesthetic: self-contained overrides ── */
|
||||
|
||||
/* ── Gradient title (amber → warm gold, hint of blue) ── */
|
||||
.post__title {
|
||||
background: linear-gradient(90deg, #c9935a, #f59e0b 40%, #38bdf8);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ── Date pill ── */
|
||||
.post__date {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #38bdf8;
|
||||
border: 1px solid rgba(147, 140, 129, 0.25);
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ── Lead ── */
|
||||
.post__lead {
|
||||
color: #9aa7b4;
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ── H2: left accent bar ── */
|
||||
.post__body h2 {
|
||||
font-size: 1.7rem;
|
||||
margin: 54px 0 6px;
|
||||
padding-left: 16px;
|
||||
border-left: 4px solid #c9935a;
|
||||
}
|
||||
|
||||
/* ── H3: purple secondary accent ── */
|
||||
.post__body h3 {
|
||||
color: #a855f7;
|
||||
font-size: 1.18rem;
|
||||
margin: 30px 0 4px;
|
||||
}
|
||||
|
||||
/* ── Inline code ── */
|
||||
.post__body code {
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.86em;
|
||||
background: #1c2230;
|
||||
color: #9fe6c0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
/* ── Code blocks (dark panel) ── */
|
||||
.post__body pre {
|
||||
background: #0a0e14;
|
||||
border: 1px solid #2a3340;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px;
|
||||
overflow-x: auto;
|
||||
margin: 14px 0;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
/* Reset inline-code double-up inside pre */
|
||||
.post__body pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Blockquote callout (ready for future use; build.js does not emit blockquote yet) ── */
|
||||
.post__body blockquote {
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
border-left: 4px solid #f59e0b;
|
||||
border-radius: 0 12px 12px 0;
|
||||
padding: 16px 18px;
|
||||
margin: 18px 0;
|
||||
color: #f4e3c4;
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
/* ── Links ── */
|
||||
.post__body a {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.post__body a:hover {
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
/* ── Strong ── */
|
||||
.post__body strong {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* ── HR ── */
|
||||
.post__body hr {
|
||||
border: none;
|
||||
border-top: 1px solid #2a3340;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
/* ── Figures ── */
|
||||
.post__body figure img {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
.post__body figcaption {
|
||||
color: #9aa7b4;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ── List spacing ── */
|
||||
.post__body li {
|
||||
margin: 4px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
Before
After
|
@@ -50,6 +50,139 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<style>
|
||||
/* ── Team guide aesthetic: self-contained overrides ── */
|
||||
|
||||
/* ── Gradient title (amber → warm gold, hint of blue) ── */
|
||||
.post__title {
|
||||
background: linear-gradient(90deg, #c9935a, #f59e0b 40%, #38bdf8);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ── Date pill ── */
|
||||
.post__date {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #38bdf8;
|
||||
border: 1px solid rgba(147, 140, 129, 0.25);
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ── Lead ── */
|
||||
.post__lead {
|
||||
color: #9aa7b4;
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ── H2: left accent bar ── */
|
||||
.post__body h2 {
|
||||
font-size: 1.7rem;
|
||||
margin: 54px 0 6px;
|
||||
padding-left: 16px;
|
||||
border-left: 4px solid #c9935a;
|
||||
}
|
||||
|
||||
/* ── H3: purple secondary accent ── */
|
||||
.post__body h3 {
|
||||
color: #a855f7;
|
||||
font-size: 1.18rem;
|
||||
margin: 30px 0 4px;
|
||||
}
|
||||
|
||||
/* ── Inline code ── */
|
||||
.post__body code {
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.86em;
|
||||
background: #1c2230;
|
||||
color: #9fe6c0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
/* ── Code blocks (dark panel) ── */
|
||||
.post__body pre {
|
||||
background: #0a0e14;
|
||||
border: 1px solid #2a3340;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px;
|
||||
overflow-x: auto;
|
||||
margin: 14px 0;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
/* Reset inline-code double-up inside pre */
|
||||
.post__body pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Blockquote callout (ready for future use; build.js does not emit blockquote yet) ── */
|
||||
.post__body blockquote {
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
border-left: 4px solid #f59e0b;
|
||||
border-radius: 0 12px 12px 0;
|
||||
padding: 16px 18px;
|
||||
margin: 18px 0;
|
||||
color: #f4e3c4;
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
/* ── Links ── */
|
||||
.post__body a {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.post__body a:hover {
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
/* ── Strong ── */
|
||||
.post__body strong {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* ── HR ── */
|
||||
.post__body hr {
|
||||
border: none;
|
||||
border-top: 1px solid #2a3340;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
/* ── Figures ── */
|
||||
.post__body figure img {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
.post__body figcaption {
|
||||
color: #9aa7b4;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ── List spacing ── */
|
||||
.post__body li {
|
||||
margin: 4px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
Before
After
|
@@ -50,6 +50,139 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<style>
|
||||
/* ── Team guide aesthetic: self-contained overrides ── */
|
||||
|
||||
/* ── Gradient title (amber → warm gold, hint of blue) ── */
|
||||
.post__title {
|
||||
background: linear-gradient(90deg, #c9935a, #f59e0b 40%, #38bdf8);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ── Date pill ── */
|
||||
.post__date {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #38bdf8;
|
||||
border: 1px solid rgba(147, 140, 129, 0.25);
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ── Lead ── */
|
||||
.post__lead {
|
||||
color: #9aa7b4;
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ── H2: left accent bar ── */
|
||||
.post__body h2 {
|
||||
font-size: 1.7rem;
|
||||
margin: 54px 0 6px;
|
||||
padding-left: 16px;
|
||||
border-left: 4px solid #c9935a;
|
||||
}
|
||||
|
||||
/* ── H3: purple secondary accent ── */
|
||||
.post__body h3 {
|
||||
color: #a855f7;
|
||||
font-size: 1.18rem;
|
||||
margin: 30px 0 4px;
|
||||
}
|
||||
|
||||
/* ── Inline code ── */
|
||||
.post__body code {
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.86em;
|
||||
background: #1c2230;
|
||||
color: #9fe6c0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
/* ── Code blocks (dark panel) ── */
|
||||
.post__body pre {
|
||||
background: #0a0e14;
|
||||
border: 1px solid #2a3340;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px;
|
||||
overflow-x: auto;
|
||||
margin: 14px 0;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
/* Reset inline-code double-up inside pre */
|
||||
.post__body pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Blockquote callout (ready for future use; build.js does not emit blockquote yet) ── */
|
||||
.post__body blockquote {
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
border-left: 4px solid #f59e0b;
|
||||
border-radius: 0 12px 12px 0;
|
||||
padding: 16px 18px;
|
||||
margin: 18px 0;
|
||||
color: #f4e3c4;
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
/* ── Links ── */
|
||||
.post__body a {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.post__body a:hover {
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
/* ── Strong ── */
|
||||
.post__body strong {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* ── HR ── */
|
||||
.post__body hr {
|
||||
border: none;
|
||||
border-top: 1px solid #2a3340;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
/* ── Figures ── */
|
||||
.post__body figure img {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
.post__body figcaption {
|
||||
color: #9aa7b4;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ── List spacing ── */
|
||||
.post__body li {
|
||||
margin: 4px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
Before
After
|
+54
@@ -26,6 +26,60 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<style>
|
||||
/* ── Team guide aesthetic: self-contained overrides ── */
|
||||
|
||||
/* ── Section label kicker ── */
|
||||
.section-label {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #38bdf8;
|
||||
border: 1px solid rgba(147, 140, 129, 0.25);
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ── Gradient index title ── */
|
||||
.blog-header__title {
|
||||
background: linear-gradient(90deg, #c9935a, #f59e0b 40%, #38bdf8);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ── Date pill ── */
|
||||
.blog-card__date {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #38bdf8;
|
||||
border: 1px solid rgba(147, 140, 129, 0.25);
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* ── Card hover accent ── */
|
||||
.blog-card:hover {
|
||||
border-color: #c9935a;
|
||||
}
|
||||
|
||||
/* ── Read link accent ── */
|
||||
.blog-card__read {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.blog-card:hover .blog-card__read {
|
||||
color: #a855f7;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
Before
After
|
@@ -50,6 +50,139 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<style>
|
||||
/* ── Team guide aesthetic: self-contained overrides ── */
|
||||
|
||||
/* ── Gradient title (amber → warm gold, hint of blue) ── */
|
||||
.post__title {
|
||||
background: linear-gradient(90deg, #c9935a, #f59e0b 40%, #38bdf8);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ── Date pill ── */
|
||||
.post__date {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #38bdf8;
|
||||
border: 1px solid rgba(147, 140, 129, 0.25);
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ── Lead ── */
|
||||
.post__lead {
|
||||
color: #9aa7b4;
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ── H2: left accent bar ── */
|
||||
.post__body h2 {
|
||||
font-size: 1.7rem;
|
||||
margin: 54px 0 6px;
|
||||
padding-left: 16px;
|
||||
border-left: 4px solid #c9935a;
|
||||
}
|
||||
|
||||
/* ── H3: purple secondary accent ── */
|
||||
.post__body h3 {
|
||||
color: #a855f7;
|
||||
font-size: 1.18rem;
|
||||
margin: 30px 0 4px;
|
||||
}
|
||||
|
||||
/* ── Inline code ── */
|
||||
.post__body code {
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.86em;
|
||||
background: #1c2230;
|
||||
color: #9fe6c0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
/* ── Code blocks (dark panel) ── */
|
||||
.post__body pre {
|
||||
background: #0a0e14;
|
||||
border: 1px solid #2a3340;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px;
|
||||
overflow-x: auto;
|
||||
margin: 14px 0;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
/* Reset inline-code double-up inside pre */
|
||||
.post__body pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Blockquote callout (ready for future use; build.js does not emit blockquote yet) ── */
|
||||
.post__body blockquote {
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
border-left: 4px solid #f59e0b;
|
||||
border-radius: 0 12px 12px 0;
|
||||
padding: 16px 18px;
|
||||
margin: 18px 0;
|
||||
color: #f4e3c4;
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
/* ── Links ── */
|
||||
.post__body a {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.post__body a:hover {
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
/* ── Strong ── */
|
||||
.post__body strong {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* ── HR ── */
|
||||
.post__body hr {
|
||||
border: none;
|
||||
border-top: 1px solid #2a3340;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
/* ── Figures ── */
|
||||
.post__body figure img {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
.post__body figcaption {
|
||||
color: #9aa7b4;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ── List spacing ── */
|
||||
.post__body li {
|
||||
margin: 4px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
Before
After
|
@@ -50,6 +50,139 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<style>
|
||||
/* ── Team guide aesthetic: self-contained overrides ── */
|
||||
|
||||
/* ── Gradient title (amber → warm gold, hint of blue) ── */
|
||||
.post__title {
|
||||
background: linear-gradient(90deg, #c9935a, #f59e0b 40%, #38bdf8);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ── Date pill ── */
|
||||
.post__date {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #38bdf8;
|
||||
border: 1px solid rgba(147, 140, 129, 0.25);
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ── Lead ── */
|
||||
.post__lead {
|
||||
color: #9aa7b4;
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ── H2: left accent bar ── */
|
||||
.post__body h2 {
|
||||
font-size: 1.7rem;
|
||||
margin: 54px 0 6px;
|
||||
padding-left: 16px;
|
||||
border-left: 4px solid #c9935a;
|
||||
}
|
||||
|
||||
/* ── H3: purple secondary accent ── */
|
||||
.post__body h3 {
|
||||
color: #a855f7;
|
||||
font-size: 1.18rem;
|
||||
margin: 30px 0 4px;
|
||||
}
|
||||
|
||||
/* ── Inline code ── */
|
||||
.post__body code {
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.86em;
|
||||
background: #1c2230;
|
||||
color: #9fe6c0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
/* ── Code blocks (dark panel) ── */
|
||||
.post__body pre {
|
||||
background: #0a0e14;
|
||||
border: 1px solid #2a3340;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px;
|
||||
overflow-x: auto;
|
||||
margin: 14px 0;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
/* Reset inline-code double-up inside pre */
|
||||
.post__body pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Blockquote callout (ready for future use; build.js does not emit blockquote yet) ── */
|
||||
.post__body blockquote {
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
border-left: 4px solid #f59e0b;
|
||||
border-radius: 0 12px 12px 0;
|
||||
padding: 16px 18px;
|
||||
margin: 18px 0;
|
||||
color: #f4e3c4;
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
/* ── Links ── */
|
||||
.post__body a {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.post__body a:hover {
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
/* ── Strong ── */
|
||||
.post__body strong {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* ── HR ── */
|
||||
.post__body hr {
|
||||
border: none;
|
||||
border-top: 1px solid #2a3340;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
/* ── Figures ── */
|
||||
.post__body figure img {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
.post__body figcaption {
|
||||
color: #9aa7b4;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ── List spacing ── */
|
||||
.post__body li {
|
||||
margin: 4px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
Before
After
|
+133
@@ -50,6 +50,139 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<style>
|
||||
/* ── Team guide aesthetic: self-contained overrides ── */
|
||||
|
||||
/* ── Gradient title (amber → warm gold, hint of blue) ── */
|
||||
.post__title {
|
||||
background: linear-gradient(90deg, #c9935a, #f59e0b 40%, #38bdf8);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ── Date pill ── */
|
||||
.post__date {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #38bdf8;
|
||||
border: 1px solid rgba(147, 140, 129, 0.25);
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ── Lead ── */
|
||||
.post__lead {
|
||||
color: #9aa7b4;
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ── H2: left accent bar ── */
|
||||
.post__body h2 {
|
||||
font-size: 1.7rem;
|
||||
margin: 54px 0 6px;
|
||||
padding-left: 16px;
|
||||
border-left: 4px solid #c9935a;
|
||||
}
|
||||
|
||||
/* ── H3: purple secondary accent ── */
|
||||
.post__body h3 {
|
||||
color: #a855f7;
|
||||
font-size: 1.18rem;
|
||||
margin: 30px 0 4px;
|
||||
}
|
||||
|
||||
/* ── Inline code ── */
|
||||
.post__body code {
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.86em;
|
||||
background: #1c2230;
|
||||
color: #9fe6c0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
/* ── Code blocks (dark panel) ── */
|
||||
.post__body pre {
|
||||
background: #0a0e14;
|
||||
border: 1px solid #2a3340;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px;
|
||||
overflow-x: auto;
|
||||
margin: 14px 0;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
/* Reset inline-code double-up inside pre */
|
||||
.post__body pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Blockquote callout (ready for future use; build.js does not emit blockquote yet) ── */
|
||||
.post__body blockquote {
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
border-left: 4px solid #f59e0b;
|
||||
border-radius: 0 12px 12px 0;
|
||||
padding: 16px 18px;
|
||||
margin: 18px 0;
|
||||
color: #f4e3c4;
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
/* ── Links ── */
|
||||
.post__body a {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.post__body a:hover {
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
/* ── Strong ── */
|
||||
.post__body strong {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* ── HR ── */
|
||||
.post__body hr {
|
||||
border: none;
|
||||
border-top: 1px solid #2a3340;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
/* ── Figures ── */
|
||||
.post__body figure img {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #2a3340;
|
||||
}
|
||||
|
||||
.post__body figcaption {
|
||||
color: #9aa7b4;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ── List spacing ── */
|
||||
.post__body li {
|
||||
margin: 4px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
Before
After
|
Reference in New Issue
Block a user