[HN Gopher] Show HN: A simple hand drawn HTML/CSS theme
___________________________________________________________________
Show HN: A simple hand drawn HTML/CSS theme
Author : chr15m
Score : 141 points
Date : 2021-12-14 13:53 UTC (9 hours ago)
(HTM) web link (chr15m.github.io)
(TXT) w3m dump (chr15m.github.io)
| wonderwonder wrote:
| Very neat and fun, well done!
| [deleted]
| Zababa wrote:
| Very nice. Small nitpick: clicking on the text of the radio
| button works, but it doesn't for the checkbox.
| saint-loup wrote:
| Hi, 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 wrote:
| Erratum: _more_ round. Rounder.
| gryzzly wrote:
| Looks very nice, but on Safari select box, checkboxes and radio
| buttons aren't working as intended.
| armchairhacker wrote:
| mobile safari as well
| Kunsang wrote:
| "-webkit-appearance: none" should fix this.
| callumprentice wrote:
| Love 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.
| sbashyal wrote:
| This looks great and would be great for certain use case like a
| website for kids.
| TuringTest wrote:
| And for prototyping, which I suppose is its primary use case
| stu2b50 wrote:
| Hi, 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.
| jack_riminton wrote:
| I love this
| chrismorgan wrote:
| * 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.
| crookshanked wrote:
| Seconding, check the focus-visible especially on the
| textarea/selects.
| jdegrootlutzner wrote:
| Very 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.
| ognarb wrote:
| ?utm_campaign=show&utm_source=hn&utm_medium=comment why do
| people do this to their own personal blog?
| jdegrootlutzner wrote:
| 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.
| hbn wrote:
| Pretty 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.
| genezeta wrote:
| Also in this vein: PaperCSS https://www.getpapercss.com/
| chrisweekly wrote:
| Awesome! (Rough.js comes to mind in this space.)
| torbTurret wrote:
| Nice! Reminds me of rough.js stuff:
|
| - 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)
| Kunsang wrote:
| Really nice. You could add "::file-selector-button" and
| "::-webkit-file-upload-button" to your button selectors to style
| the file input.
___________________________________________________________________
(page generated 2021-12-14 23:02 UTC)