336 lines
14 KiB
HTML
336 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>How We Restyled Our Blog with Two Template Files and Zero Dependencies — Tinqs Blog</title>
|
|
<meta name="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.">
|
|
<meta name="robots" content="index, follow">
|
|
<link rel="canonical" href="https://www.tinqs.com/blog/blog-visual-upgrade">
|
|
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:url" content="https://www.tinqs.com/blog/blog-visual-upgrade">
|
|
<meta property="og:title" content="How We Restyled Our Blog with Two Template Files and Zero Dependencies">
|
|
<meta property="og:description" content="Blog restyle: gradient titles, dark code panels, amber callouts — two template files, zero deps.">
|
|
<meta property="og:image" content="https://www.tinqs.com/img/og-cover.jpg">
|
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="How We Restyled Our Blog with Two Template Files and Zero Dependencies">
|
|
<meta name="twitter:description" content="Blog restyle: gradient titles, dark code panels, amber callouts — two template files, zero deps.">
|
|
<meta name="twitter:image" content="https://www.tinqs.com/img/og-cover.jpg">
|
|
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "BlogPosting",
|
|
"headline": "How We Restyled Our Blog with Two Template Files and Zero Dependencies",
|
|
"datePublished": "2026-06-03",
|
|
"author": {
|
|
"@type": "Person",
|
|
"name": "Ozan Bozkurt"
|
|
},
|
|
"publisher": {
|
|
"@type": "Organization",
|
|
"name": "Tinqs Limited",
|
|
"url": "https://www.tinqs.com"
|
|
},
|
|
"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."
|
|
}
|
|
</script>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
/* ── Tinqs Studio brand — post styles ── */
|
|
|
|
:root {
|
|
/* Studio near-black base */
|
|
--c-bg: #0B0C0E;
|
|
--c-bg-raised: #15171A;
|
|
/* Foreground */
|
|
--c-fg: #ECEEF1;
|
|
--c-muted: #8A95A3;
|
|
/* Family accents */
|
|
--c-lime: #B6FF3C;
|
|
--c-violet: #7C5CFF;
|
|
/* Borders */
|
|
--c-border: rgba(255,255,255,.07);
|
|
--c-border-strong: rgba(255,255,255,.12);
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
html { background: var(--c-bg); }
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--c-bg);
|
|
color: var(--c-fg);
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* ── Post container ── */
|
|
.post {
|
|
background: var(--c-bg);
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
padding: 48px 24px 60px;
|
|
}
|
|
|
|
/* ── Back link ── */
|
|
.post__back {
|
|
color: var(--c-muted);
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
display: inline-block;
|
|
margin-bottom: 24px;
|
|
transition: color 0.15s;
|
|
}
|
|
.post__back:hover { color: var(--c-lime); }
|
|
|
|
/* ── Gradient title — lime → violet ── */
|
|
.post__title {
|
|
font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
|
|
background: linear-gradient(90deg, var(--c-lime), var(--c-violet));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
font-weight: 700;
|
|
font-size: 2.2rem;
|
|
line-height: 1.2;
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
/* ── Date pill ── */
|
|
.post__date {
|
|
display: inline-block;
|
|
font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--c-muted);
|
|
border: 1px solid var(--c-border);
|
|
border-radius: 999px;
|
|
padding: 4px 14px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* ── Lead ── */
|
|
.post__lead {
|
|
color: var(--c-muted);
|
|
font-size: 1.08rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ── Body ── */
|
|
.post__body { font-size: 1rem; line-height: 1.7; }
|
|
|
|
.post__body p { margin: 14px 0; }
|
|
|
|
.post__body h2 {
|
|
font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
|
|
font-weight: 600;
|
|
font-size: 1.6rem;
|
|
margin: 54px 0 6px;
|
|
padding-left: 16px;
|
|
border-left: 4px solid var(--c-lime);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.post__body h3 {
|
|
font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
|
|
font-weight: 500;
|
|
color: var(--c-violet);
|
|
font-size: 1.15rem;
|
|
margin: 30px 0 4px;
|
|
}
|
|
|
|
.post__body h4, .post__body h5, .post__body h6 {
|
|
margin: 20px 0 4px;
|
|
}
|
|
|
|
/* ── Inline code ── */
|
|
.post__body code {
|
|
font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
|
|
font-size: 0.84em;
|
|
background: var(--c-bg-raised);
|
|
color: var(--c-lime);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--c-border);
|
|
}
|
|
|
|
/* ── Code blocks ── */
|
|
.post__body pre {
|
|
background: var(--c-bg);
|
|
border: 1px solid var(--c-border);
|
|
border-radius: 8px;
|
|
padding: 16px 18px;
|
|
overflow-x: auto;
|
|
margin: 14px 0;
|
|
font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
|
|
font-size: 0.83rem;
|
|
line-height: 1.55;
|
|
color: var(--c-fg);
|
|
}
|
|
|
|
.post__body pre code {
|
|
background: transparent;
|
|
padding: 0;
|
|
border: none;
|
|
font-size: inherit;
|
|
color: inherit;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* ── Blockquote ── */
|
|
.post__body blockquote {
|
|
background: rgba(124, 92, 255, 0.06);
|
|
border: 1px solid rgba(124, 92, 255, 0.15);
|
|
border-left: 4px solid var(--c-violet);
|
|
border-radius: 0 8px 8px 0;
|
|
padding: 16px 18px;
|
|
margin: 18px 0;
|
|
color: var(--c-fg);
|
|
font-size: 0.94rem;
|
|
}
|
|
|
|
/* ── Links ── */
|
|
.post__body a { color: var(--c-lime); text-decoration: underline; text-underline-offset: 3px; }
|
|
.post__body a:hover { color: var(--c-violet); }
|
|
|
|
/* ── Strong ── */
|
|
.post__body strong { color: var(--c-lime); font-weight: 600; }
|
|
|
|
/* ── HR ── */
|
|
.post__body hr {
|
|
border: none;
|
|
border-top: 1px solid var(--c-border);
|
|
margin: 32px 0;
|
|
}
|
|
|
|
/* ── Figures ── */
|
|
.post__body figure { margin: 20px 0; }
|
|
.post__body figure img {
|
|
max-width: 100%;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--c-border);
|
|
}
|
|
|
|
.post__body figcaption {
|
|
color: var(--c-muted);
|
|
font-size: 0.85rem;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/* ── Lists ── */
|
|
.post__body ul, .post__body ol { padding-left: 1.5em; margin: 10px 0; }
|
|
.post__body li { margin: 4px 0; }
|
|
|
|
/* ── Author ── */
|
|
.post__author {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
margin-top: 48px;
|
|
padding-top: 24px;
|
|
border-top: 1px solid var(--c-border);
|
|
}
|
|
|
|
.post__author-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: var(--c-violet);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
font-size: 0.85rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.post__author-info {
|
|
font-size: 0.85rem;
|
|
color: var(--c-muted);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.post__author-name {
|
|
color: var(--c-fg);
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- POST -->
|
|
<article class="post">
|
|
<a href="/blog/" class="post__back">← All Posts</a>
|
|
<span class="post__date">3 June 2026</span>
|
|
<h1 class="post__title">How We Restyled Our Blog with Two Template Files and Zero Dependencies</h1>
|
|
<p class="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>
|
|
|
|
<div class="post__body">
|
|
<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>
|
|
<pre><code>posts/*.md + _template.html / _index_template.html → *.html</code></pre>
|
|
<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> block at the end of <code><head></code> in both templates, after the <code>../style.css</code> link. Cascade order handles the overrides. No <code>!important</code>. No external font loads. No CDN dependencies.</p>
|
|
<h2>The palette</h2>
|
|
<p>Four accent colours, borrowed from our team guide:</p>
|
|
<p>| Role | Colour | Where |</p>
|
|
<p>|——|——–|——-|</p>
|
|
<p>| Brand amber | <code>#c9935a</code> | Gradient start, h2 left bar, card hover |</p>
|
|
<p>| Warm gold | <code>#f59e0b</code> | Gradient midpoint, bold text |</p>
|
|
<p>| Blue | <code>#38bdf8</code> | Gradient endpoint, links, date pills |</p>
|
|
<p>| Purple | <code>#a855f7</code> | h3 colour, link hover |</p>
|
|
<p>Tasteful. Not a rainbow.</p>
|
|
<h2>What we styled</h2>
|
|
<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>
|
|
<h2>The rebuild</h2>
|
|
<pre><code class="language-bash">node build.js</code></pre>
|
|
<pre><code>Building blog...
|
|
11 posts built + index.html
|
|
Done.</code></pre>
|
|
<p>Zero errors. Every regenerated HTML file now carries the inline <code><style></code>. Confirmed with <code>grep -l "background-clip" *.html</code> — all pages ship the gradient.</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> blocks ship inside the generated HTML, so the blog is fully self-contained. One <code>git push</code> and it's live.</p>
|
|
<p><strong>Cascade order is the cleanest specificity hack.</strong> Putting the <code><style></code> block after the external stylesheet link means same-selector rules win by position. No <code>!important</code>, no selector wars, no unexpected regressions.</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>
|
|
<hr>
|
|
<p><em>The blog is generated by <a href="https://tinqs.com/tinqs/blog" style="color: var(--c-lime);">build.js</a> and served by <a href="https://tinqs.com" style="color: var(--c-lime);">Tinqs Studio</a>. All styling is self-contained in the templates.</em></p>
|
|
|
|
</div>
|
|
|
|
<div class="post__author">
|
|
<div class="post__author-avatar">OB</div>
|
|
<div class="post__author-info">
|
|
<span class="post__author-name">Ozan Bozkurt</span><br>
|
|
CTO & Developer, Tinqs
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
</body>
|
|
</html>
|