7 ms·
Show HN: A simple hand drawn HTML/CSS theme
- sbashyal 5y agoThis looks great and would be great for certain use case like a website for kids.
- TuringTest 5y agoAnd for prototyping, which I suppose is its primary use case
- saint-loup 5y agoHi, 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 them less round.
- saint-loup 5y agoErratum: more round. Rounder.
- jack_riminton 5y agoI love this
- chr15m 5y agowhy don't u marry it
- quickthrower2 5y agohe would have to move to a state where that’s legal
- wonderwonder 5y agoVery neat and fun, well done!
- callumprentice 5y agoLove it - only comment I have is to consider (it may not be possible) making the "●" characters in the password entry field match the rest of the design - similar to the stylized radio button asterisk indicators perhaps? Great work.
- chrisweekly 5y agoAwesome! (Rough.js comes to mind in this space.)
- Kunsang 5y agoReally nice. You could add "::file-selector-button" and "::-webkit-file-upload-button" to your button selectors to style the file input.
- deleted 5y ago[deleted]
- gryzzly 5y agoLooks very nice, but on Safari select box, checkboxes and radio buttons aren’t working as intended.
- Kunsang 5y ago"-webkit-appearance: none" should fix this.
- armchairhacker 5y agomobile safari as well
- stu2b50 5y agoHi, 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.
- torbTurret 5y agoNice! Reminds me of rough.js stuff: - https://roughjs.com/ https://roughjs.com/ - https://github.com/jwilber/roughViz https://github.com/jwilber/roughViz - https://github.com/rough-stuff/rough-notation https://github.com/rough-stuff/rough-notation One comment: some items aren’t rendering properly on my safari (eg checkboxes)
- jdegrootlutzner 5y agoVery cool! I just designed my new portfolio website with a hand drawn “sketch book” style. https://www.jdegrootlutzner.com/?utm_campaign=show&utm_source=hn&utm_medium=comment https://www.jdegrootlutzner.com/?utm_campaign=show&utm_sourc... And this style could be great for Ben Stoke’s paper website project.
- ognarb 5y ago?utm_campaign=show&utm_source=hn&utm_medium=comment why do people do this to their own personal blog?
- jdegrootlutzner 5y agoI 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.
- tambourine_man 5y agoIsn’t HTTP_REFERER not enough to pinpoint the traffic that came from HN?
- jdegrootlutzner 5y agoAbout 1/4 of the traffic that used the link above did not have HTTP_REFERER set. This portion of the traffic would show up as "Direct / None" on Plausible
- tambourine_man 5y agoDo you know why that is? Private mode or something similar?
- hbn 5y agoPretty cool, just wanted to point out the pencil cursor doesn't really map to the cursor location properly in Safari (confirmed this works properly in Chrome). The pencil appears down and to the right of the cursor, so you end up drawing up and to the left of the pencil, and it also makes it hard to click HTML elements like the checkboxes in the projects section.
- chrismorgan 5y ago• 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-demo.html 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.
- crookshanked 5y agoSeconding, check the focus-visible especially on the textarea/selects.
- genezeta 5y agoAlso in this vein: PaperCSS https://www.getpapercss.com/ https://www.getpapercss.com/
- Zababa 5y agoVery nice. Small nitpick: clicking on the text of the radio button works, but it doesn't for the checkbox.
- teg4n_ 5y agoNoticed it too, they didn't put ids on the input elements
- tambourine_man 5y agoCongratulations Chris, this is really nice. Lots of cool ideas in this CSS
- penguin_booze 5y agoTIL: border-image CSS property [0] [0] https://developer.mozilla.org/en-US/docs/Web/CSS/border-image https://developer.mozilla.org/en-US/docs/Web/CSS/border-imag...
- cambaceres 5y agoBeautiful! Would love a checkmark in the checkbox instead of a star though, now it looks very similar to the radiobutton.
- quickthrower2 5y agoSafari iOS note: selected checkbox and option appears as asterisk, which is odd. Anyway, very nice theme. I think XKCD should use it!