From d223708a1dc93e4ad542cd8911e2e9807afa8991 Mon Sep 17 00:00:00 2001 From: tinqs-limited Date: Wed, 3 Jun 2026 02:28:44 +0100 Subject: [PATCH] =?UTF-8?q?post:=20blog=20visual=20upgrade=20=E2=80=94=20r?= =?UTF-8?q?estyle=20story=20+=20toolkit=20guide?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit New public post documenting the blog's visual refresh: - Design inspiration from internal team guide - The three-layer styling architecture (site CSS → inline overrides) - Full post template changes (gradient titles, code panels, pills, h2 bars) - Index template changes (kicker, card hover, date pills) - The build system (posts/*.md + templates → *.html via build.js) - Comprehensive toolkit guide: adding posts, understanding templates, styling workflow, markdown dialect, extending build.js, cheatsheet --- blog-visual-upgrade.html | 443 +++++++++++++++++++++++++++++++++++ index.html | 6 +- posts/blog-visual-upgrade.md | 276 ++++++++++++++++++++++ 3 files changed, 722 insertions(+), 3 deletions(-) create mode 100644 blog-visual-upgrade.html create mode 100644 posts/blog-visual-upgrade.md diff --git a/blog-visual-upgrade.html b/blog-visual-upgrade.html new file mode 100644 index 0000000..2dcf2cf --- /dev/null +++ b/blog-visual-upgrade.html @@ -0,0 +1,443 @@ + + + + + + + Our Blog Just Got a Visual Upgrade — Here's How We Did It — Tinqs Blog + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Games + Technology + About + Blog + Contact + Press +
+ + +
+ ← All Posts + 3 June 2026 +

Our Blog Just Got a Visual Upgrade — Here's How We Did It

+

Until yesterday, the Tinqs blog looked... fine. Readable. Semantic. It had the brand amber accent, proper typography, and all the SEO metadata in the right places. But it didn't have much personality. The code blocks were unstyled. The headings sat flat. And the design said "competent" more than "intentional".

+ +
+

Then we looked at our own internal team guide — the onboarding doc we keep at docs/team/dev-basics-env-secrets-git.html. It had gradient titles that clip to transparent. Dark, crisp code panels. Callout boxes with coloured left borders. Pill-shaped date labels. A restrained four-colour palette that felt cohesive without screaming.

+

We wanted the blog to feel like it came from the same shop. So we restyled it.

+

The design source

+

Our team guide is a single self-contained HTML file with a dark theme — background #0d1117, panels #161b22, ink #e6edf3. It uses a four-accent palette:

+
    +
  • Green #22c55e — for .env and environment topics
    • +
  • Blue #38bdf8 — secondary links, kickers, syntax table headers
    • +
  • Purple #a855f7 — git topics, hover states
    • +
  • Amber #f59e0b — warnings, emphasis, callouts
    • +
+

The title is the star: an h1 filled with a linear-gradient across all four colours, clipped to the text via -webkit-background-clip: text. Code blocks live in dark #0a0e14 panels with #2a3340 borders. Blockquotes become amber-tinted callouts. The whole thing radiates a "well-maintained developer doc" energy without feeling like a Bootstrap template.

+

We wanted that energy on the public-facing blog.

+

The build system (and why it mattered)

+

The blog is generated by a zero-dependency Node script — build.js — that converts markdown posts into HTML. The pipeline is:

+
posts/*.md  +  _template.html / _index_template.html  →  *.html
+

This means we never touch a generated .html file by hand. Every visual change flows through the two templates. build.js then stamps out all 11 posts plus the index in under a second.

+

The site-wide CSS — navigation, footer, base typography, the brand amber –c-accent: #c9935a — lives in ../style.css, which is served by Git Studio from outside the blog repo. We deliberately did not touch that file. Instead, we injected a self-contained