HTML Illiteracy (Part 2 of 2) Styling And Failwind Stupid

Jason Knight
CodeX
Published in
24 min readMar 18, 2024

--

The Mandalorian, “One does not speak unless one knows”
Then perhaps this lesson is for you.

Right out of the gate let me show you the finished template that I started in part 1, as I’d like to discuss numbers and methodology before I break down the how/what/why of the CSS.

You can find it here:
https://cutcodedown.com/for_others/medium_articles/failwindUI/shotlight/shotlight.html

As with all my examples the directory is unlocked for easy browsing:
https://cutcodedown.com/for_others/medium_articles/failwindUI/shotlight/

And there’s a .rar of the whole shebang in there so you can play around with it.

And yes, that’s not a perfect 1:1 because I fixed what I consdier to be layout issues, waste of whitespace hampering UX, inaccessible font sizes, the ugly use of those garbage “system font” stacks that result in cross-platform inconsistency, and all the illegible colour contrasts to the point I could barely even see that it had a flipping light/dark toggle. Though that last part I suspect is my astigmatism making me WAY more sensitive about accessibility

--

--

Jason Knight
CodeX

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse