<title>How We Restyled Our Blog with Two Template Files and Zero Dependencies — Tinqs Blog</title>
<metaname="description"content="Gradient titles, dark code panels, amber callouts — we gave the Tinqs blog a visual refresh borrowing our internal team guide aesthetic. Two template files, one Node script, no framework.">
"description":"Gradient titles, dark code panels, amber callouts — we gave the Tinqs blog a visual refresh borrowing our internal team guide aesthetic. Two template files, one Node script, no framework."
<h1class="post__title">How We Restyled Our Blog with Two Template Files and Zero Dependencies</h1>
<pclass="post__lead">Our blog looked fine. Readable, semantic, proper typography. But it didn't have much personality. Code blocks were unstyled. Headings sat flat. The design said "competent" more than "intentional."</p>
<p>Then we looked at our internal team guide — a self-contained HTML doc with gradient titles that clip to transparent, dark code panels, and callout boxes with coloured borders. It radiated a "well-maintained developer doc" energy. We wanted the blog to feel like it came from the same shop.</p>
<p>Two template files, one build step, zero external dependencies. Here's what we changed.</p>
<h2>The build system (why it mattered)</h2>
<p>The blog is generated by <code>build.js</code> — a zero-dependency Node script that converts markdown to HTML:</p>
<p>This means we never touch a generated <code>.html</code> file by hand. Every visual change flows through the templates. The site-wide CSS — nav, footer, base typography, brand accent — lives in <code>../style.css</code>, served by Git Studio from outside the repo. We didn't touch it.</p>
<p>Instead, we injected a self-contained <code><style></code>blockattheendof<code><head></code>inbothtemplates,afterthe<code>../style.css</code>link.Cascadeorderhandlestheoverrides.No<code>!important</code>.Noexternalfontloads.NoCDNdependencies.</p>
<h2>The palette</h2>
<p>Four accent colours, borrowed from our team guide:</p>
<p><strong>Gradient titles.</strong> Post <code>h1</code> gets <code>linear-gradient(90deg, #c9935a, #f59e0b 40%, #38bdf8)</code> via <code>background-clip: text; color: transparent</code>. Underlying text preserved for screen readers and SEO.</p>
<p><strong>Date pills.</strong> Monospace chip — blue text, <code>999px</code> border-radius, uppercase, tight letter-spacing. Sits before the title like a kicker.</p>
<p><strong>Code blocks.</strong> The site CSS only styled inline <code><code></code>. Fenced blocks got a dark panel (<code>#0a0e14</code>, <code>#2a3340</code> border, <code>10px</code> radius, monospace, <code>overflow-x: auto</code>). A reset rule on <code>pre code</code> prevents inline-code styles from doubling up inside the panel.</p>
<p><strong>Section cues.</strong> h2 gets a 4px amber left border as visual anchor. h3 gets a purple tint — enough to signal a section break without pulling focus.</p>
<p><strong>Links.</strong> Blue <code>#38bdf8</code>, purple <code>#a855f7</code> on hover. Bold text picks up amber.</p>
<p><strong>Blockquote callouts.</strong> Amber-tinted background, 4px amber left border, rounded right corners. The CSS is written and waiting — <code>build.js</code> doesn't emit <code><blockquote></code> yet, but the rules activate the moment we add <code>></code> syntax support.</p>
<p><strong>Index page.</strong> Same gradient on the listing title. Date pills on cards. Amber border on card hover. Blue/purple read links.</p>
<p>Zero errors. Every regenerated HTML file now carries the inline <code><style></code>.Confirmedwith<code>grep-l"background-clip"*.html</code>—allpagesshipthegradient.</p>
<h2>What we didn't touch</h2>
<p>Navigation, footer, site chrome, responsive behaviour — all unchanged. This was a CSS-only change. No markup altered beyond the <code><style></code>injection.</p>
<h2>What we learned</h2>
<p><strong>Inline styles beat separate CSS files when you don't control the server.</strong> The blog repo is standalone — it can't modify <code>../style.css</code>. Inline <code><style></code>blocksshipinsidethegeneratedHTML,sotheblogisfullyself-contained.One<code>gitpush</code>andit'slive.</p>
<p><strong>Cascade order is the cleanest specificity hack.</strong> Putting the <code><style></code>blockaftertheexternalstylesheetlinkmeanssame-selectorruleswinbyposition.No<code>!important</code>,noselectorwars,nounexpectedregressions.</p>
<p><strong>Build systems make CSS changes safe.</strong> Because we never hand-edit <code>.html</code>, every style change is tested by regenerating all pages and grepping for the new selectors. If a rule doesn't ship, you know immediately.</p>
<p>Two gaps we'll fill later: blockquote support in <code>build.js</code> (the callout CSS is waiting) and ordered lists (same story). In the meantime, the blog already looks intentional — and it took two template files, one build step, and zero dependencies.</p>
<p><em>The blog is generated by <ahref="https://tinqs.com/tinqs/blog"style="color: var(--c-lime);">build.js</a> and served by <ahref="https://tinqs.com"style="color: var(--c-lime);">Tinqs Studio</a>. All styling is self-contained in the templates.</em></p>
