ozan
f01036c646
Merged overlapping posts: - forking-gitea + fork-dont-build → one post about the fork philosophy - fal-image-generation + image-generation-fal → one post about AI art pipeline Rewrote all posts with external/public voice: - Stronger hooks, concrete examples, punchier language - agentic-workflow: restructured around soul files + skills + numbers - agent-harness: clearer framing of 'what an agent harness is' - cloud-harness: tighter narrative about overnight agents - godot-optimisation: same depth, sharper opening - pre-commit-agent: clearer architecture, cost breakdown - studio-cli: reframed around identity/cold-start problem - blog-visual-upgrade: tightened the restyle story 10 posts total (9 markdown + 1 hand-authored HTML)
311 lines
16 KiB
HTML
311 lines
16 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>
|
|
|
|
<!-- PostHog (EU) -->
|
|
<script>
|
|
!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
|
|
posthog.init('phc_teG6p5oxf6poQHPThq5AGKzWQNhw4bHW9arLwWAVXm3f',{api_host:'https://eu.i.posthog.com',ui_host:'https://eu.posthog.com',person_profiles:'identified_only',defaults:'2026-01-30'})
|
|
</script>
|
|
|
|
<link rel="icon" type="image/svg+xml" href="/img/favicon.svg">
|
|
<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=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>
|
|
|
|
<!-- NAV -->
|
|
<nav class="nav nav--scrolled" id="nav">
|
|
<a href="/" class="nav__logo" aria-label="Tinqs home">
|
|
<span class="nav__wordmark">TINQS</span>
|
|
</a>
|
|
<div class="nav__links">
|
|
<a href="/#game" class="nav__link">Games</a>
|
|
<a href="/#tech" class="nav__link">Technology</a>
|
|
<a href="/#about" class="nav__link">About</a>
|
|
<a href="/blog/" class="nav__link" style="color: var(--c-accent-l);">Blog</a>
|
|
<a href="/#signup" class="nav__link">Contact</a>
|
|
<a href="/press" class="nav__link">Press</a>
|
|
</div>
|
|
<button class="nav__burger" aria-label="Open menu" id="navBurger">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- MOBILE MENU -->
|
|
<div class="mobile-menu" id="mobileMenu">
|
|
<a href="/#game" class="mobile-menu__link">Games</a>
|
|
<a href="/#tech" class="mobile-menu__link">Technology</a>
|
|
<a href="/#about" class="mobile-menu__link">About</a>
|
|
<a href="/blog/" class="mobile-menu__link">Blog</a>
|
|
<a href="/#signup" class="mobile-menu__link">Contact</a>
|
|
<a href="/press" class="mobile-menu__link">Press</a>
|
|
</div>
|
|
|
|
<!-- 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-accent-l);">build.js</a> and served by <a href="https://tinqs.com" style="color: var(–c-accent-l);">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>
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="footer">
|
|
<div class="footer__inner">
|
|
<span class="footer__wordmark">TINQS</span>
|
|
<div class="footer__links">
|
|
<a href="/#game">Games</a>
|
|
<a href="/#tech">Technology</a>
|
|
<a href="/#about">About</a>
|
|
<a href="/blog/">Blog</a>
|
|
<a href="mailto:hello@tinqs.com">hello@tinqs.com</a>
|
|
<a href="/press">Press Kit</a>
|
|
</div>
|
|
<p class="footer__copy">Tinqs Limited — London, est. 2020</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
const burger = document.getElementById('navBurger');
|
|
const mobileMenu = document.getElementById('mobileMenu');
|
|
burger.addEventListener('click', () => {
|
|
const open = mobileMenu.classList.toggle('mobile-menu--open');
|
|
burger.classList.toggle('nav__burger--open', open);
|
|
document.body.style.overflow = open ? 'hidden' : '';
|
|
});
|
|
mobileMenu.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
mobileMenu.classList.remove('mobile-menu--open');
|
|
burger.classList.remove('nav__burger--open');
|
|
document.body.style.overflow = '';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|