Dev adventures, epic bugs, tiny wins, and the occasional meltdown. Zola 2026-08-09T00:00:00+00:00 https://golden-fox.dev/tags/zola/atom.xml 2026-08-09T00:00:00+00:00 2026-08-09T00:00:00+00:00 Aakriti Agarwal https://golden-fox.dev/projects/golden-fox-dev/ <p>The site you are reading. Built with <a rel="external" href="https://www.getzola.org">Zola</a> on the Duckquill theme, then forked where I needed it to behave differently: a merged blog and TIL feed on the homepage, a vertical timeline for hackathons, and a listing that drops the tag filter.</p> <p>The parts I am most pleased with are invisible. A strict Content Security Policy that forced me to self-host every font and icon, so nothing loads from a third party. A theme that derives its whole palette from one accent colour using <code>color-mix()</code>. And a pinned Zola version, because 0.23 upgraded Tera and broke the template syntax the theme relies on.</p> <p><strong>Built with:</strong> Zola, Tera templates, SCSS, Caddy on a Hetzner box</p> 2026-08-09T00:00:00+00:00 2026-08-09T00:00:00+00:00 Aakriti Agarwal https://golden-fox.dev/til/accent-color-tinting/ <p>I was picking a theme today and went digging through Duckquill’s Sass, expecting to find a big list of hardcoded colours. Instead I found this:</p> <pre class="giallo" style="color-scheme: light dark; color: light-dark(#657B83, #839496); background-color: light-dark(#FDF6E3, #002B36);"><code data-lang="scss"><span class="giallo-l"><span style="color: light-dark(#93A1A1, #586E75);font-style: italic;">//</span><span style="color: light-dark(#93A1A1, #586E75);font-style: italic;"> light mode</span></span> <span class="giallo-l"><span>--bg-color</span><span>: color-mix(in srgb, var(</span><span>--accent-color</span><span>) 20%, white)</span><span>;</span></span> <span class="giallo-l"><span style="color: light-dark(#93A1A1, #586E75);font-style: italic;">//</span><span style="color: light-dark(#93A1A1, #586E75);font-style: italic;"> dark mode</span></span> <span class="giallo-l"><span>--bg-color</span><span>: color-mix(in srgb, var(</span><span>--accent-color</span><span>) 10%, black)</span><span>;</span></span></code></pre> <p>The background isn’t a colour you set. It’s your accent colour <em>mixed into</em> white or black with plain CSS. So setting one hex value in the config:</p> <pre class="giallo" style="color-scheme: light dark; color: light-dark(#657B83, #839496); background-color: light-dark(#FDF6E3, #002B36);"><code data-lang="toml"><span class="giallo-l"><span style="color: light-dark(#268BD2, #268BD2);">accent_color</span><span> =</span><span style="color: light-dark(#2AA198, #2AA198);"> &quot;</span><span style="color: light-dark(#2AA198, #2AA198);">#e8a0bf</span><span style="color: light-dark(#2AA198, #2AA198);">&quot;</span></span></code></pre> <p>gives me a soft pink-tinted off-white background for free, with no second variable and no fiddling to make them match.</p> <p>That’s the trick behind why so many cozy-looking sites use a cream background instead of <code>#ffffff</code>. Pure white feels clinical. A warm off-white feels like paper. And <code>color-mix()</code> means you get it automatically without ever picking the cream by hand.</p> <p>The other neat bit: the text colour is computed in <code>oklch</code> from the same accent, so contrast stays readable no matter what hue I pick. I can’t easily choose a colour that breaks the site.</p> <p>Small thing, but it reframed how I think about theming. One input, whole palette.</p>