https://phantompixeldev.github.io/hugo-theme-retrocss/categories/components/Recent content in Components on Retro DispatchHugoen-us© 2026 Retro DispatchFri, 28 Aug 2026 00:00:00 +0000https://phantompixeldev.github.io/hugo-theme-retrocss/posts/square-on-purpose/Fri, 28 Aug 2026 00:00:00 +0000https://phantompixeldev.github.io/hugo-theme-retrocss/posts/square-on-purpose/<h2 id="one-token"> One token <a class="heading-anchor" href="#one-token" aria-label="Link to One token"><span aria-hidden="true">#</span></a> </h2> <p>Every component routes its corners through <code>--retro-border-radius</code>, so one declaration rounds the whole framework.</p> <h2 id="the-exceptions"> The exceptions <a class="heading-anchor" href="#the-exceptions" aria-label="Link to The exceptions"><span aria-hidden="true">#</span></a> </h2> <p>Pills are named for their shape, and tables ignore <code>border-radius</code> outright because <code>border-collapse: collapse</code> merges their cell borders.</p>https://phantompixeldev.github.io/hugo-theme-retrocss/posts/auth-forms-that-behave/Sat, 18 Jul 2026 00:00:00 +0000https://phantompixeldev.github.io/hugo-theme-retrocss/posts/auth-forms-that-behave/<p>The happy path of a sign-in form is four elements. Everything else is the interesting part.</p> <h2 id="the-states-worth-building"> The states worth building <a class="heading-anchor" href="#the-states-worth-building" aria-label="Link to The states worth building"><span aria-hidden="true">#</span></a> </h2> <ul> <li><strong>Pending</strong> — the button is busy, not disabled-and-silent.</li> <li><strong>Rejected</strong> — the message is next to the field, not in a toast that vanished.</li> <li><strong>Rate-limited</strong> — say how long, not &ldquo;try again later&rdquo;.</li> <li><strong>Offline</strong> — the form should still hold what was typed.</li> </ul> <h2 id="the-password-toggle"> The password toggle <a class="heading-anchor" href="#the-password-toggle" aria-label="Link to The password toggle"><span aria-hidden="true">#</span></a> </h2> <p>Make it a real <code>button</code> with <code>aria-pressed</code>, keep the field type in sync, and never place it where it covers the text it reveals.</p>