Home

Nate Wienert

Developer, Designer. Creator of 2u.fm, GameGum & obtvse.

HackerNews Aligned

I spent a little time putting together a HackerNews stylesheet. I wanted something clean and with better alignment. For now its just a proof of concept with plenty of bugs on sub-pages, but check it out.

HN Aligned

My main goal was to align the most important information for easy skimming. I kept the spacing tight as I enjoy the density. It’ not perfect, I wish I could right-align the points, but I couldn’t figure out a way to do it. Also needs work for sub-pages.

If you’re using Chrome, grab the Stylebot and paste this in:

Update: fixed styling on sub-pages

``` body { margin: 35px 0 0; }

table { background: none; }

/* header */

table td[bgcolor] { margin: 0 0 20px 0; padding: 5px; display: block; background-color: #eee; position: fixed; z-index: 100; top: 0; left: 0; width: 100%; box-sizing: border-box; }

table td[bgcolor] b a { font-size: 12px; width: 99px; }

table td[bgcolor] a { font-size: 12px; }

.pagetop b { margin-right: 20px; }

table tr[style]:nth-child(2) { height: 15px ; }

tbody tr:nth-child(3) table { margin-left: 0; display: block; }

tbody tbody tr:nth-child(3n) { height: 12px ; }

tbody { position: relative; }

/* hide numbering */

tbody tbody td.title:first-child { font-size: 1px; visibility: hidden; }

.title:nth-child(3) { position: relative; z-index: 1; padding: 0 0 2px 0; }

.title a { font-size: 14px; }

.title a:visited { color: #999; }

.subtext { padding: 2px 0; color: #fff; position: relative; }

.subtext * { z-index: 10; color: #444; }

/* points */

.subtext span { font-weight: bold; position: absolute; left: 12px; top: 1px; word-spacing: 40px; white-space: nowrap; width: 50px; overflow: hidden; color: #999; font-size: 11px; z-index: 0; }

/* upvote */

a[id^=up], a[id^=down] { visibility: hidden; }

table table tr:hover a[id^=up], table table tr:hover a[id^=down] { visibility: visible; }

/* under title */

.subtext a { font-size: 11px; color: #999; }

/* url */

.title .comhead { position: absolute; top: 21px; left: 160px; font-size: 10px; width: 100px; text-overflow: ellipsis; overflow: hidden; color: #999; }

/* username */

.subtext a:nth-child(2) { position: absolute; left: 280px; }

/* flag */

.subtext a:nth-child(4) { position: absolute; left: 380px; top: 2px; color: #ccc; display: none; }

.subtext:hover a:nth-child(4) { display: block; }

/* comments */

.subtext a:nth-child(3) { position: absolute; left: 60px; }

/* comments list */

font { line-height: 1.4em; font-family: Georgia; font-size: 14px; } ```