tinqs/blog
5
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity Issues

style: apply team-guide aesthetic to blog

Browse Source 
- 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:
tinqs-limited
2026-06-02 22:50:20 +01:00
parent 80b4b941a7
commit 4a9675d242
14 changed files with 1704 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_index_template.html
+54
View File
@@ -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