TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Ask HN: How would you change the HN stylesheet with 10 or less lines?

1 pointsby AliAdamsalmost 12 years ago
I know that Hacker News is about the community rather than the usability, and I know that the look has almost become iconic, but there is always part of me that wants to tweak the site a bit - maybe make it a little more mobile/touch friendly etc.<p>So many people before me have come up with great ideas but normally requiring a big change to the site (DOM etc), but I was wondering if we could make the smallest change, just a few lines to the css, what would the talent on HN come up with.<p>So here is your challenge if you choose to accept it this Saturday!:-<p>If you could add (or change) 10 lines in the HN css file, what would they be?

2 comments

impishjalmost 12 years ago
I would add this 10 line Media Query: (link: <a href="https://gist.github.com/impishj/6057353" rel="nofollow">https:&#x2F;&#x2F;gist.github.com&#x2F;impishj&#x2F;6057353</a>)<p>@media only screen and (max-width:650px) { table { width:100% } .pagetop a:first-child { display:block;width:100%;padding:0px;margin:0px;clear:both;border:none; } .pagetop a { padding:0px 0px 12px 0px; } .title a { padding:8px 14px 8px 10px;margin:0px 0px 0px 0px;color:#000000;background-color:#ff6600;vertical-align:middle;line-height:200%; } span.comhead { display:inline-block;padding-top:6px; } .subtext a { margin-top:3px;padding:4px 11px 4px 11px;display:inline-block; } .subtext a:last-child { border:solid 1px #ff6600; } table tr td:nth-child(2) { padding: 2px 10px 2px 0px; margin-right:10px; } table tr td.subtext { background-color:#f6f6ef;} } textarea { width:100% }
impishjalmost 12 years ago
Line 6 updated to avoid style dropping on hover in desktop environments:<p>.subtext a, .subtext a:hover, .subtext a:visited { margin-top:3px;padding:4px 11px 4px 11px;display:inline-block; }