---
title: "CSS"
description: "4 posts about CSS, summarised, each linking to the original."
---

# CSS
> 4 posts about CSS, summarised, each linking to the original.

## Articles

### [Welcoming Pedro Ivo Hudson, our new Design Engineer](https://yomu.fyi/post/welcoming-pedro-ivo-hudson-our-new-design-engineer.md)
- Company: [Resend](https://yomu.fyi/company/resend.md)
- Published: May 1, 2026
- Type: Announcement

Resend welcomes Pedro Ivo Hudson as a design engineer, presenting him as someone who has worked across design and code for more than 15 years, before the title was common. He began with Macromedia classes aimed at Flash animation, learned tools including Freehand, Fireworks, Dreamweaver, HTML, and CSS, then built WordPress sites and studied graphic design at university. His work includes The Good Man, a web experiment combining code, design, and storytelling, while his motivation for joining Resend includes its people, leadership, design team, and the opportunity to work directly with code under an engineer title. He advises ambitious designers to master fundamentals, seek out people they admire, keep producing work, and develop the extroversion and persuasion needed to bring designs into the world.


### [Stretch Your Imagination and Build a Delightful Sign-In Experience](https://yomu.fyi/post/stretch-your-imagination-and-build-a-delightful-sign-in-experience.md)
- Company: [Okta](https://yomu.fyi/company/okta.md)
- Author: Alisa Duncan
- Published: Nov 12, 2025
- Type: Tutorial

This tutorial shows how to customize the Okta-hosted Sign-In Widget (SIW) for a fictional to-do application while retaining Okta Identity Engine authentication flows. It covers configuring a custom domain and enabling SIW Gen3, then using brand settings, design tokens, custom CSS properties, and page code to change fonts, colors, layout, and background treatment. The implementation uses the widget’s afterTransform method and FormBag to revise the identify form, remove help, unlock, and divider elements, change the title, and add a custom blog link. It also explains the default HTML and JavaScript rendering configuration and describes updating an OpenID Connect application to use the brand’s custom sign-in URL as its issuer.


### [How Safari Ruined My Tuesday](https://yomu.fyi/post/how-safari-ruined-my-tuesday.md)
- Company: [Fly.io](https://yomu.fyi/company/fly-io.md)
- Published: Oct 21, 2021
- Type: Incident / postmortem

Safari 15 introduced an obscure CSS bug that made pointer-events: none persist in LiveView applications. LiveView uses connected and disconnected modes, and its default app.css had included .phx-disconnected \* { pointer-events: none; } to disable interaction while disconnected. In Safari 15, the rule could remain effective after reconnection or class changes, leaving links and buttons unresponsive even though the web inspector reported pointer-events: auto. The workaround removes pointer-events: none from app.css, although LiveView already ignores clicks on Phoenix links and buttons while disconnected; LiveView 0.17 instead uses a different disconnected-state class. The change avoids applying the faulty rule from existing user-land CSS while retaining custom loading-state styling, and the post says a Safari Development Preview build might fix the underlying bug.


### [Designing for Accessibility: Contrast Ratio](https://yomu.fyi/post/designing-for-accessibility-contrast-ratio.md)
- Company: [Heroku](https://yomu.fyi/company/heroku.md)
- Author: Ariana Escobar
- Published: Aug 21, 2019
- Type: Problem & solution

Heroku’s accessibility initiative targeted WCAG 2.0 Level AA luminance contrast for its user interfaces, addressing reduced contrast sensitivity and color-vision deficiencies. The team audited its palette with Contrast Grid, proposed darker and revised colors, then chose a narrower proposal that preserved existing names and colors while meeting accessibility concerns within an affordable implementation effort. Because the palette affected GUIs built with Purple 3 and Malibu, pull requests generated Review Apps so teams could audit production-ready CSS and SVG assets across Dashboard components before release. Audits using axe-core 3.2.2 covered common and unusual elements, reducing color-contrast violations by an order of magnitude before rollout. The updated palette now spans the Heroku Dashboard, with planned accessibility testing through Ember tooling and further audits across other interfaces.