Hacker News Reader

It would also be handy to have some visual guides for the indentation levels of nested comments as on Reddit. I've hacked my own indentation marks using a CSS injection for now, but this is clearly still not optimal:

    @-moz-document url-prefix(https://news.ycombinator.com/) {
      td { vertical-align: top }
      td > img { background: repeating-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 38px, rgba(0,0,0,0.3) 38px, rgba(0,0,0,0.3) 40px); margin-top: 4px; height: 12px!important; }
      div.votearrow { padding-bottom: 3px; background: url('http://localhost/uparrow.png') !important; background-size: 12px 20px !important; width: 12px!important;}
    }

I've also increased the size of the voting arrow because it's just uncomfortably small. By Fitt's law [0], smaller buttons require more time and effort to click!

[0] https://en.wikipedia.org/wiki/Fitts%27s_law

View on HN

td.ind > img { background: repeating-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 38px, rgba(0,0,0,0.1) 38px, rgba(0,0,0,0.1) 40px); margin-top: 0px; height: 100%; } table.comment-tree td, table.comment-tree tr, table.comment-tree th, table.comment-tree, table.comment-tree tbody, table.comment-tree table { margin: 0; padding: 0; border-spacing: 0; } table.comment-tree td.default { padding: 0.5em 0.5em 1em 0.5em; } table.comment-tree td.ind { padding: 0 0.5em; }

td.ind > img { opacity: 0 } td.ind { background: linear-gradient(to left, rgba(246,246,240,1) 0px, rgba(246,246,240,1) 14px, rgba(246,246,240,0) 14px), repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0.03) 39px, rgba(0,0,0,0) 40px); }

background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='20'><polygon points='0,20 12,20 6,0' style='fill:rgb(179,179,179);stroke:none;' /></svg>") !important;