Looks very nice, but on Safari select box, checkboxes and radio buttons aren’t working as intended.
"-webkit-appearance: none" should fix this.
Show HN: A simple hand drawn HTML/CSS theme
11–20 of 37 posts
Re: Show HN: A simple hand drawn HTML/CSS theme
#12Looks very nice, but on Safari select box, checkboxes and radio buttons aren’t working as intended.
mobile safari as well
Re: Show HN: A simple hand drawn HTML/CSS theme
#13Hi, looks great. I don’t see a license in the repo - what is it licensed under? I would definitely consider it for goofier projects but want to make sure it’s permissively licensed first.
Re: Show HN: A simple hand drawn HTML/CSS theme
#14This looks great and would be great for certain use case like a website for kids.
And for prototyping, which I suppose is its primary use case
Re: Show HN: A simple hand drawn HTML/CSS theme
#15Nice! Reminds me of rough.js stuff:
- 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)
Re: Show HN: A simple hand drawn HTML/CSS theme
#16Very cool!
I just designed my new portfolio website with a hand drawn “sketch book” style.
https://www.jdegrootlutzner.com/?utm_campaign=show&utm_sourc...
And this style could be great for Ben Stoke’s paper website project.
Re: Show HN: A simple hand drawn HTML/CSS theme
#17Very cool! I just designed my new portfolio website with a hand drawn “sketch book” style. https://www.jdegrootlutzner.com/?utm_campaign=show&utm_sourc... And this style could be great for Ben Stoke’s paper website project.
?utm_campaign=show&utm_source=hn&utm_medium=comment why do people do this to their own personal blog?
Re: Show HN: A simple hand drawn HTML/CSS theme
#18Hi, it looks really great. Reminds me of XKCD-inspired chart themes. 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 the…
Erratum: more round. Rounder.
Re: Show HN: A simple hand drawn HTML/CSS theme
#19• 2em base font size is waaaaaay too large. I zoomed out to 50% and breathed a sigh of relief (and later dialed it back up to 67% which was tolerable too and probably more where it should be for such a thing).
• 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.
Re: Show HN: A simple hand drawn HTML/CSS theme
#20Very cool! I just designed my new portfolio website with a hand drawn “sketch book” style. https://www.jdegrootlutzner.com/?utm_campaign=show&utm_sourc... And this style could be great for Ben Stoke’s paper website project.
?utm_campaign=show&utm_source=hn&utm_medium=comment why do people do this to their own personal blog?
I added UTM parameters so I can see how people interact with my content. I also did it as way to learn how to use Plausible and analytics for future projects.