https://mareox.github.io/homelab-journal/topics/web-design/Recent content in Web-Design on Homelab JournalHugo -- gohugo.ioen© 2026 MarioThu, 02 Apr 2026 00:00:00 +0000https://mareox.github.io/homelab-journal/posts/2026/fixing-my-blogs-readability/Thu, 02 Apr 2026 00:00:00 +0000https://mareox.github.io/homelab-journal/posts/2026/fixing-my-blogs-readability/<h2 class="relative group">TL;DR <div id="tldr" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none"> <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#tldr" aria-label="Anchor">#</a> </span> </h2> <p>My technical blog was squeezing code blocks, tables, and ASCII diagrams into a 650px column designed for novel paragraphs. One CSS line fixed it. The real lesson: defaults optimized for one use case silently degrade another.</p> <hr> <h2 class="relative group">The Problem I Didn&rsquo;t See <div id="the-problem-i-didnt-see" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none"> <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#the-problem-i-didnt-see" aria-label="Anchor">#</a> </span> </h2> <p>I&rsquo;d been publishing posts for months. Tutorials with wide code blocks. Architecture posts with ASCII flow diagrams. Tables comparing tools and alternatives. Every single one was being crushed into <code>65ch</code> — roughly 650 pixels of width.</p>