
Cleaner Hacker News - primigenus
https://github.com/Primigenus/Cleaner-Hacker-News
======
jgv
I enjoy the Georgify theme by Tuhin Kumar. It's a highly legible theme and is
available as a userstyle or Chrome extension.
<http://tuhinkumar.com/portfolio/georgify-for-hacker-news/>

~~~
exch
The typography is nice and clear but there is a bit too much white space
between the entries for my taste.

Additionally, this app does not work when viewing HN through a secure
connection. This is a deal breaker for me unfortunately.

------
SoftwareMaven
I just want bigger buttons on mobile devices. I do most of my reading on a
tablet and almost never vote because the effort of zooming in to make the
buttons targetable is just too much. Even dealing with typing in this tiny
entry box is highly obnoxious.

~~~
mynegation
At least on the iPhone, I use an app (<http://itunes.apple.com/us/app/news-
yc/id434787119?mt=8>). You can find hackernews apps on iPad too, but browser
works fine for me.

~~~
saurik
The apps normally make reading comments much more difficult by a) enforcing a
very large font size and/or b) only showing a single level of comments at a
time. AFAIK news:yc does both of these things.

~~~
mike
news:yc has a small text font setting and a nested comments setting which
shows all comments rather than just one level at a time.

~~~
saurik
Awesome! When it first came out it certainly did not ;P. (The main developer
works with me on Cydia, and I complained bitterly about the font and comments
issues; I'm surprised he didn't tell me he changed the behavior.)

(edit: Tried it out, and it still isn't as usable as the website. It still has
larger fonts and only shows three short lines from each comment at a time. The
list of articles also has variable sized rows that often overflow onto
multiple lines with other text at the same level: difficult to skim the titles
quickly. I'd much prefer a subtle change to the mobile HN website to fix the
buttons ;P.)

------
Klinky
I actually like Hacker News' condensed retro web look. It has a very
lightweight bare metal feel to it. I am not really a fan of designs that have
"foofy" margins which make the noise to signal ratio higher.

~~~
scott_s
I'm surprised you think that margins decrease the signal-to-noise ratio. I
find generous margins make text easier to read - which is why print magazines
and newspapers will split text into columns even when the entirety of a page
is taken up by one story.

~~~
javert
Aren't columns actually used because it's easier to read shorter lines of text
than long ones?

~~~
scott_s
That was what I just said, yes.

~~~
javert
You seemed to be suggesting that it had something to do with margins, which is
actually a different issue than column width. In a newspaper, you can have a
lot of columns with small margins, for example.

You also seemed to be suggesting that it had something to do with separating
different stories on the same page.

~~~
scott_s
When you have one column of text, as in the frontpage of HN, large margins
implies a narrow column of text.

My point about separate stories is that it is _independent_ of them. Magazines
and newspapers layout their stories in columns. I was anticipating someone
saying "Yes, but they also show multiple stories on one page." But magazines
and newspapers still use narrow columns of text even when they have a single
story on the page.

~~~
javert
Thanks for the clarification.

------
primigenus
I created this two months ago as an experiment to see if I could improve the
readability of the site. Every month someone creates one of these but I've
never been happy with them so I wanted to see if I could do better myself.

I then applied it and let it sit for two months to give myself some time to
try it out. I decided I like it, so I've kept it, and now it's time to share
it and see if you like it and what improvements you'd want to see.

~~~
jQueryIsAwesome
To check it out without using the chrome extension one can paste this piece of
Javascript in the URL

    
    
      javascript:(function(){var st = document.createElement('link');st.type = "text/css";st.href = "https://raw.github.com/Primigenus/Cleaner-Hacker-News/master/cleaner-hn.css";st.rel = "stylesheet";document.body.appendChild(st)})()
    

Latest chrome deletes the "javascript:" part so you may have to write it
manually.

~~~
i_cannot_hack
CTRL+SHIFT+J (or CMD+ALT+J on Mac) brings up the Javascript Console, where you
can paste the code directly.

Also, "text/css" in the script should be replaced with "style/css" in order
for it to work.

~~~
jQueryIsAwesome
I copied the "text/css" from the source of this page; it works just fine.

------
mapleoin
I came here to yell at you that you didn't include a screenshot. But since no
one else was complaining about it, I looked again and read all the text in the
README and found the small normal paragraph that says I should open the
screenshot.png file in the repo.

Can't you just include that in the README? github supports any markup format
you want in READMEs.

~~~
primigenus
Good point. I just added a link to the screenshot near the top of the README.

------
deepkut
The designer inside of me is loving this. Thank you.

While I also love the retro feel of the regular HN, this is just so much
easier on the eyes. And when considering how long I spend on HN these days,
this is probably a good idea... My eyes will thank me in the future :)

------
overshard
And here is a version that is a greasemonkey script so that you don't have to
install an extra plugin (for Chrome anyways). Just download in Chrome or drag
and drop onto Chrome.

<https://github.com/overshard/greasemonkey-cleanerhn>

<http://userscripts.org/scripts/show/128106>

(Direct GitHub Raw Link) [https://github.com/overshard/greasemonkey-
cleanerhn/raw/mast...](https://github.com/overshard/greasemonkey-
cleanerhn/raw/master/cleaner_hn.user.js)

------
rubergly
It seems like a lot of people maintain code for these stylesheets on github
(so it's easy for the developer to maintain), and then publish to stylebot or
stylish (so it's easy for the user to update and maintain). I've always
wondered why there's not better integration between the two. It seems like it
should be pretty easy to create a service like stylebot that pulls stylesheets
from github repos (just from master, of course).

------
annon
Looks good, but the textured background definitely doesn't help readability.
The lighter grey on the visited text is fairly difficult to read against it.

------
_ankit_
Nice, I personally like this one better because it has bigger type:

<http://stylebot.me/styles/248>

~~~
godDLL
Looks like something I did a while back. <http://comfy-helvetica.jottit.com/>

Anyone up to porting this to more browsers? Cause I'm still using it, and that
has to be for something.

------
goblin89
Thanks. My fork (bigger fonts, less wide page):
<https://github.com/strogonoff/Cleaner-Hacker-News>.

------
xpose2000
I absolutely love this idea and new styling. Ive forked it to provide bigger
font sizes for people like me who are kinda blind.
[https://github.com/xpose2000/Cleaner-Hacker-
News/commit/2cce...](https://github.com/xpose2000/Cleaner-Hacker-
News/commit/2cce055427528cab607e020cbc681c921fb1fe44)

------
sad_panda
Could this be made to also eliminate articles regarding certain topics or from
certain sources? I really hate the proliferation of gadgety religious
flamewars, and the enabling of bloggers whose modus operandi is just to stoke
the fires of these ridiculous squabbles.

~~~
primigenus
That's a different read of "cleaner" than I had intended, but you're free to
fork :-)

------
BasDirks
why the noise bg? can that ponytrick die already?

------
dbh937
Absoloutely love the theme. I use <http://hn.gethifi.com/> on my phone for
Hacker News, so this theme makes the desktop experience a lot more consistent
with my mobile experience

------
flyingyeti
Looks great, nice work.

I'm curious whether subtlepatterns.com minds people hotlinking their images
from custom CSS files?

<http://subtlepatterns.com/?page_id=890#faqbox-left>

~~~
primigenus
I should probably fix this, but right now I'm not too concerned since it's not
like hundreds of people are using the style. Thanks for the tip though.

~~~
swanson
I've sent you a pull request for moving this to a gh-pages branch. It
shouldn't take more than a few minutes.

------
dnewcome
Hacking HN content helped me more with readability than hacking the style. I
wrote a userjs to apply kill filters <https://github.com/dnewcome/hn-plonk>

~~~
tomku
You should also mention that it adds vi-style keybindings for the main page,
which is at least as awesome as the killfile. I use RES on Reddit mainly for
its keybinds, and I've been looking for something similar for HN for ages.
Thanks!

------
munchor
I really like it, and I also reported this issue:

<https://github.com/Primigenus/Cleaner-Hacker-News/issues/1>

That's the only problem for me, good job!

~~~
SeoxyS
Ouch, font rendering on Windows/Linux is quite bad. I think that might be also
why your headers looks unbalanced. Here's what it looks like on my computer; a
lot better.

<http://akhun.com/seo/skitch/Hacker_News-20120311-110315.png>

You can tweak it for yourself by changing the padding in

    
    
        body > center > table > tbody > tr:first-child > td > table

------
Tim_M
I once tried reddit's default look, its old mobile look and its new beta
mobile look on my psp. All 3 looked terrible so I was very surprised that HN
looked perfect on both. It doesn't need any fixing.

------
nickpresta
I much prefer Hacker News +:

[https://chrome.google.com/webstore/detail/oieefcckcbbgniifdh...](https://chrome.google.com/webstore/detail/oieefcckcbbgniifdhhialgkmghahjgl)

It includes keyboard shortcuts, too!

~~~
chrisdroukas
Oh wow, that is nice. It looks a lot like Gmail.

------
glimcat
Tweaked it a bit for better readability. Text size, spacing, width, a few
colors, background texture...maybe a few other things.

<http://pastebin.com/DMURgDsv>

------
deepkut
*Do note that for those applying to YC, the styling does not carry over to the application pages. The entire page is orange.

This is not an unbearable problem or anything, but just wanted to point it
out!

------
Vaanir
Thanks, looks nice.

Does anyone else find the font type and size more difficult to read? The size
seems smaller but it's 2px bigger, hmm.

Edit: I increased the font size to 18 px inside of Stylebot to better fit my
needs.

------
chrisdroukas
It doesn't fix the appearance of the comments section, but lately I've been
browsing the homepage via <http://hckrnews.com/>.

------
hellotoby
You can also add these stylesheets to Safari using the User CSS plugin, found
here: <http://code.grid.in.th/>

------
radarsat1
Any screenshots? I'd like to preview before going to the trouble of installing
some special browser extension..

~~~
thehermit
There is one included in the repo.

[https://github.com/Primigenus/Cleaner-Hacker-
News/raw/master...](https://github.com/Primigenus/Cleaner-Hacker-
News/raw/master/screenshot.png)

------
saxamaphone69
Would be great to see a Stylish version for Firefox (and Chrome) users. Nice
work.

------
duaneb
Looks slick. I wish I knew enough HTML/CSS to hack this.

------
mayop100
This should definitely be made permanent.

