123
user profile image

Some attention to detail, an exercise in minimalism for season three of The CodePen Pattern Rodeo.

The <hr> element is used to add some finesse to a responsive and beautifully typeset article.

Added functionality on hover of the hr similar to that of Kudos. Unfortunately, the JS library I'm using for the hover intent is a little buggy, and it times correctly 66% of the time.

I wanted to add extra functionality to the hr but @jakealbaugh filled a lot of use cases and @trhino killed it with the progress bar. I already had a progress bar, and I didn't want to make that redundant, so I went with something like Kudos. It could be used to like portions of text or to add them to a favourites/bookmarking tool.

If you appreciate it, throw me a vote by hearting this pen.

(oh, and the ::selection is pink [blue in the dark version] just for fun)

Updates:

  • A progress bar at the top show's how much you've read. Calculation could probably be much simpler, but I wanted to figure it out myself with no real JS experience. It works and I'm okay with it.
  • A dark version is available. Try setting the SCSS variable $dark to true :)

Comments

  1. Yup, that's the stuff! One thing, though: you could fix the line-height of the header when resizing the window. At some points, the header wraps on 2 lines and there's a great distance between the two of them. (I too OCD over details :) ) Good luck dude, your entry is superb!

  2. @zerospree Thanks! I'm only seeing the header wrapping on widths < 350px. I fixed it there, but are you seeing it anywhere else?

  3. @zerospree I can't seem to replicate it :\

  4. Eh, no real need to stress over it. It only happens on a range of 6-7 pixels, right before a media query is triggered. On production it wouldn't ever be noticed anyway :p

  5. @zerospree But we'll notice it and that's all that matters, right?

  6. ^ haha, I like your style.

  7. Love the typography and overall style :)

  8. Pretty cool! I like the dark version more.

  9. @hackthevoid, this is beautifully executed. As far as the competition is concerned, most of why I love this isn't related to the hr style, which is the only reason I am not giving you a heart...yet.

  10. Nice :D Medium is da best

  11. @jakealbaugh how about now? :)

    I wanted to add extra functionality to the hr but you filled a lot of use cases and @trhino killed it with the progress bar. I already had a progress bar, and I didn't want to make that redundant, so I went with something like Kudos. It could be used to like portions of text or to add them to a favourites/bookmarking tool.

  12. @hackthevoid ok fine :)

  13. @hackthevoid you've now liked and removed your like of my submission twice, and when I looked up whether or not it was a bug, I see that you've favorited nearly every submission except the two you are "competing" with which is how you got so many views.

    This is only a game. It does not really matter whether or not you win. The spirit of the competition is coming up with cool code, so I am going to keep my favorite of your pen in spite of this because I actually like your pen—mostly for reasons unrelated to the hr—and am not looking for you to like mine.

    I understand wanting to win the competition—that is why I cared enough to check up on you to begin with—but I don't want us to lose the spirit of the competition in the process.

  14. 'Grats dude!

  15. Well, I get home and find out my reply didn't post. I'll try this again.

    @jakealbaugh hey I'm sorry that it seems like I was being unsportsmanlike, I'd like to clear that up.

    I got a "Could not heart this Pen" error a number of times while going through and liking everyone's Pens, which, I did do for both visibility and to support everyone.

    I didn't understand what you meant by every submission except the two I am "competing" with until I went through all the entries. There were 4 or 5 entries throughout which I had not liked, and then there was yours and the winning Pen.

    I actually unliked the winning Pen yesterday because although liking all the smaller Pens didn't mean anything more than a futile gesture, liking the higher ranked Pens meant I actually liked them. Turns out I didn't like the winning one because of its implementation (I thought it was a bit overdone), but it was clever as hell, nonetheless. In fact, I favoured another Pen to win—which happened to be yours.

    I felt your submission was more elegant and provided for more useful use cases.

    As for yours being unliked twice, I remember the first time because I had cycled through all the levels of hearts and liked it again. As for the second, I can only think it was one of those errors I got.

    I didn't mean to offend you or anyone else, and I'm sorry if I have. Codepen has one of the coolest communities on the web, and even this interaction is a pretty good example of that. You seem like a chill guy and I hope to learn from you. That's why I tagged you when I made my functionality update; to see what you thought. You gave me a :) and a heart and that was enough approval for me, so thank you.

    I'm a fairly inexperienced kid on a site full of pros, so I'm not looking to outmatch or cheat anyone, just to learn from everyone and contribute what I can.

    I have to say, I really appreciate the fact that you cared enough to confront me about this.

    See you around, LLAP.

  16. @hackthevoid Thank you for the honest response and explanation. Congrats on the win. I wasn't offended, just wanted to make sure we were keeping this about code and not about winning. I am going to follow you now— consider it a handshake.

  17. @jakealbaugh Well, since I'm already following you, I'm going to heart your comment— consider it my ServerHelloDone response :)

  18. @hackthevoid giving me your CodePen swag was unnecessary but very appreciated. Thank you. I look forward to continuing to pen with you. Way to make this community that much better.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...