Skip to content

Instantly share code, notes, and snippets.

@adamghill
Created January 28, 2022 22:57
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adamghill/e3f55abb920238e67f10f1dd772667ad to your computer and use it in GitHub Desktop.
Save adamghill/e3f55abb920238e67f10f1dd772667ad to your computer and use it in GitHub Desktop.
Hacker News Readable CSS
/* https://userstyles.org/styles/133201/hacker-news-readable */
/* reset */
body, td, table, input, textarea, .pagetop, *
{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
body
{
background: #fafafa;
margin: 0;
}
.pagetop,
.pagetop a
{
color: rgba(0, 0, 0, 0.5);
}
.brandname
{
display: none;
}
table
{
font-size: 14px;
}
#hnmain
{
width: 800px;
background: transparent;
}
#hnmain > tbody > tr:last-child img
{
display: none;
}
#hnmain > tbody > tr:last-child table td
{
background: transparent;
}
#hnmain > tbody > tr > td
{
background: transparent;
}
#hnmain > tbody > tr > td[bgcolor] > table
{
padding: 0 0 20px 0 !important;
}
#hnmain > tbody > tr > td[bgcolor] > table > tbody > tr > td
{
font-weight: 400;
}
#hnmain > tbody > tr > td[bgcolor] > table tbody tr td:first-child a
{
background: #F06D3C;
color: #fff;
height: 50px;
line-height: 50px;
width: 50px;
display: block;
text-align: center;
}
#hnmain > tbody > tr > td[bgcolor] > table tbody tr td:first-child a:after
{
content: "HN";
font-weight: 700;
}
#hnmain > tbody > tr > td[bgcolor] > table tbody tr td:first-child a img
{
display: none;
}
#hnmain > tbody > tr > td[bgcolor] > table tbody tr td:nth-child(2) .pagetop
{
color: #fafafa;
padding-left: 10px;
font-size: 14px;
}
#hnmain > tbody > tr > td[bgcolor] > table tbody tr td .pagetop
{
font-size: 14px;
}
#hnmain > tbody > tr > td[bgcolor] > table tbody tr td .pagetop a:hover
{
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: 2px;
}
.spacer
{
display: none;
}
.title,
.sitebit,
.subtext
{
font-family: inherit;
font-size: inherit;
text-align: left;
position: relative;
}
.itemlist
{
width: 100%;
}
.votelinks a
{
display: block;
position: relative;
left: -4px;
top: -2px;
}
.votearrow
{
background-image: none;
margin: 0;
width: 100%;
}
.votearrow:after
{
content: "▲";
display: block;
background: #F06D3C;
color: #fff;
text-align: center;
width: 14px;
height: 14px;
line-height: 13px;
border-radius: 100%;
font-size: 8px;
-webkit-transition: all 0.15s;
}
.votearrow:hover:after
{
-webkit-transform: scale(1.3);
}
.athing + tr .subtext
{
position: relative;
}
.athing + tr .subtext
{
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding-bottom: 16px;
}
.athing td
{
padding: 16px 0 4px;
}
.athing .title:first-child
{
padding-left: 20px;
}
.athing .title a:link,
.athing .title a:visited
{
color: rgba(0, 0, 0, 0.9);
font-size: 18px;
}
.athing .title .rank
{
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 100%;
display: inline-block;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.05);
font-weight: 700;
font-size: 12px;
color: #555;
position: absolute;
left: 0;
}
.athing .title .comhead
{
display: none;
}
.subtext
{
color: rgba(0, 0, 0, 0.5);
}
.subtext a:link,
.subtext a:visited
{
color: rgba(0, 0, 0, 0.5) !important;
}
.subtext a:hover
{
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: 2px;
}
.comment-tree .default .comhead
{
font-size: 14px !important;
color: rgba(0,0,0,0.5);
}
.comment-tree .comment
{
font-size: 14px !important;
color: rgba(0,0,0,0.5);
line-height: 1.42em;
}
#hnmain table
{
width: 100%;
}
#hnmain form textarea
{
display: block;
width: 100%;
box-sizing: border-box;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.05);
font-weight: 400;
font-size: 14px;
padding: 10px;
outline: none;
}
#hnmain form input[type=submit]
{
border: solid 1px #F06D3C;
height: 32px;
background: transparent;
border-radius: 32px;
padding: 0 12px;
color: #F06D3C;
cursor: pointer;
}
.itemlist tr:last-child .title
{
padding: 10px 0;
}
.itemlist tr:last-child .title a
{
border: solid 1px #F06D3C;
height: 32px;
line-height: 32px;
background: transparent;
border-radius: 32px;
padding: 0 12px;
color: #F06D3C;
display: inline-block;
}
td.ind
{
width: 0px;
}
td.votelinks
{
width: 0px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment