Show HN: A simple hand drawn HTML/CSS theme

• radio/checkbox need to be more distinct. I recommend a cross in the checkbox.

• Focus styles: you’ve killed the outlines on radio/checkbox and not replaced them with anything better, which is doubleplusungood, and where you haven’t touched the outline, the browser’s default clashes with your style.

• It could be fun to try replacing the border technique with feTurbulence + feDisplacementMap, not specifying the SVG’s viewBox/width/height, and using percentages for the sizes of things, allowing it to render at whatever size it needs to be, allowing you to avoid stretching in one direction or the other, though given the same seed the curves of the top and left edges will be consistent. A demo of much the underlying concept can be found within this WIP of my own that’s simultaneously overdone and underdone: https://temp.chrismorgan.info/2021-12-15-svg-drawn-filters-d..., look at the page edge, and fiddle with #paper-fuzzy-edge’s feTurbulence baseFrequency (e.g. 0.05) and feDisplacementMap’s scale (e.g. 20), also twiddling the #paper rect’s x/y/width/height.

- https://roughjs.com/

- https://github.com/jwilber/roughViz

- https://github.com/rough-stuff/rough-notation

One comment: some items aren’t rendering properly on my safari (eg checkboxes)

And this style could be great for Ben Stoke’s paper website project.

[0] https://developer.mozilla.org/en-US/docs/Web/CSS/border-imag...

Several issues to better respect UI standards:

- Controls should have `cursor:pointer` so it show a hand on hover.

- Controls should have an active style.

- Clicking on a label associated with a checkbox should select/unselect the checkbox, just like radio buttons.

- Radio buttons should be visually more distinct from checkboxes, maybe by making them less round.

Great work.

Anyway, very nice theme. I think XKCD should use it!