• 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.
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.
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.
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.
About 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
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?
• 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.