Show HN: Modern Hacker News with custom userstyles

Re:Show HN: Modern Hacker News with custom userstyles by Nadya on Tuesday November 10, 2015 @01:41PM (#10541354)

I don't think you have enough karma to vote on user posts. But this happens to voting on posts: http://i.imgur.com/NtcgQVf.png

I fixed it by adding margin-bottom:10px to .votearrow

On thread pages the .athing .rank still shows up which kind of looks bad (eg: http://i.imgur.com/EsQzNE3.png ) I'm trying to find a way to fix it without specifying new CSS for /item? URL.

I like a lot of what you did. Merged it with my current CSS. :)

[ Parent | on HN ]

Re:Show HN: Modern Hacker News with custom userstyles by wassago on Tuesday November 10, 2015 @04:49PM (#10542821)

Thanks for the heads up, wasn't even aware I'm missing elements due to the low karma.

Getting the styling done right here, is not that easy, as you can imagine the oldschool HTML doesn't really help. I was trying not to do multiple scopes for different pages in Stylish, but seems like I have to do CSS scoping to get rid of that .rank

[ Parent | on HN ]

Re:Show HN: Modern Hacker News with custom userstyles by Nadya on Tuesday November 10, 2015 @06:15PM (#10543375)

>Getting the styling done right here, is not that easy, as you can imagine the oldschool HTML doesn't really help.

Oh, I know. I've had HN entirely restyled since day 1. :) A bunch of nasty selectors with direct child, nth-child selectors, and attribute-selectors.

It annoys me that Stylish doesn't seem to support the :not() selector. I can use it in the inspector in Chrome but not in Stylish.

My personal favorite change was making the search more easily accessible by fixing it to the bottom right.

    form[action='//hn.algolia.com/'] {
      position: fixed;
      bottom: 0;
      right: 10px;
      opacity: 0.2;
      transition: .6s;
    }

    form[action='//hn.algolia.com/']:hover {
      opacity: 1;
    }

[ Parent | on HN ]