I’m Kitty Giraudel, a transfeminine web engineer based in Berlin, focused on accessibility and inclusivity.

Kitty Giraudel is a frontend developer and CSS enthusiast known for her expertise in web design and front-end development. Readers can learn about CSS techniques, web typography, and responsive design. With articles, tutorials, and demos, Kitty Giraudel shares  insights and techniques for creating beautiful and accessible web experiences.

Kitty says hi.

A personal blog post detailing CSS and design improvements made to a personal website. Covers a tri-state dark/light/auto theme switcher using aria-pressed, fluid typography with min/max/vw, styled blockquotes and callouts with gradient borders using background-clip tricks, typographic fleurons as decorative elements, squircle corners via the new CSS corner-shape property, improved focus styles with outline and scroll-margin-top, and smarter ad placement using Liquid templating and :has() CSS selector.

Nerdy Design Details

I always appreciate a nicely crafted website. All those details make it work. And on top of that, it’s really fast - like “I don’t even notice the reload” fast (yay, ServiceWorkers). 🙂
A few small issues, though. Browser compatibility needs work - e.g. the theme switcher on Firefox doesn’t look to hot:
<img src="https://media.daily.dev/image/upload/s--ylDVKOgD--/f_auto/v1772183085/ugc/content_761dc639-763a-42de-b4fd-bdffb6fe2f9a?_a=BAMAMiiu0" alt="image.png">
“Squircle” is clearly not widely supported either and the widget itself doesn’t work. I’m getting:
<blockquote>
Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided ('<a href="https://giscus.app" target="_blank" rel="noopener nofollow">https://giscus.app</a><a href="https://giscus.app'" target="_blank" rel="noopener nofollow">’</a>) does not match the recipient window’s origin ('<a href="https://kittygiraudel.com" target="_blank" rel="noopener nofollow">https://kittygiraudel.com</a><a href="https://kittygiraudel.com'" target="_blank" rel="noopener nofollow">’</a>).
</blockquote>
on all browsers I use: Firefox, Chrome, Edge and theme switching just doesn’t work right now.
As far as the theme switcher goes on other browsers, it’s the dreaded “the icon is one pixel to low” issue (Chrome/Edge; ah, brings back memories: the good old Bootstrap+Glyphicons days 😁):
<img src="https://media.daily.dev/image/upload/s--wnosU-Lt--/f_auto/v1772183265/ugc/content_ca4b553c-60fd-4271-8a89-323477883d45?_a=BAMAMiiu0" alt="image.png">
That can be easily fixed with <code>flex</code> on the button:
<img src="https://media.daily.dev/image/upload/s--wKqR4PXr--/f_auto/v1772183459/ugc/content_8a06892f-927f-4445-9c2b-7844d8310d29?_a=BAMAMiiu0" alt="image.png">
Chrome/Edge:
<img src="https://media.daily.dev/image/upload/s--W96j8i_1--/f_auto/v1772183479/ugc/content_baea203a-a296-4363-bd53-0413d59064e0?_a=BAMAMiiu0" alt="image.png">
Firefox:
<img src="https://media.daily.dev/image/upload/s--pIv4L445--/f_auto/v1772183594/ugc/content_579451c1-176e-49da-a133-0e223d7afcee?_a=BAMAMiiu0" alt="image.png">
Yeah, I know - FF is doing something strange with horizontal SVG centering - it doesn’t show up in BoxModel in DevTools, so it’s probably a question of the SVG using floating-point numbers (not aligned to full pixels; yeah, I like working on details as well 😁).
Anyway, no need for <code>vertical-align</code> on both the button and the SVG. 🙂
These however are details. Again: the site is very nicely done and I’m following you here from now on. 🙂