Skip to content

Improved Hacker News by colebot

Screenshot of Improved Hacker News

Details

Authorcolebot

LicenseCC BY-SA - Creative Commons Attribution-ShareAlike

Categorynews.ycombinator.com

Created

Updated

Code size1.9 kB

Code checksum4e9eef10

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Hacker News looks terrible. This style makes Hacker News look a whole lot better!

Notes

v.1.0.0-
I built this style in about 15 minutes.

Source code

/* ==Userstyle==
@name        Better Hacker News
@namespace   news.ycombinator.com
@version     1.0.0
@description Hacker News looks terrible. This style makes Hacker News look a whole lot better!
@author      Cole Ruth
==/Userstyle== */

@-moz-document domain("news.ycombinator.com") {
body {
    background-color: #e0e0e0;
    font-family: sans-serif;
}

#hnmain {
    background-color: white;
    box-shadow: 0 0 15px #cecece;
    padding: 10px;
    border-radius: 18px;
}
#hnmain > tbody > tr:nth-child(1) {
    display: none;
}
#hnmain > tbody > tr:nth-child(2) > td {
    padding: 10px;
    border-radius: 10px;
    background: linear-gradient(90deg, #ff6600, #ff4400)
}
#hnmain > tbody > tr:nth-child(2) > td > table > tbody > tr > td:first-child {
    padding-right: 10px!important;
}
#hnmain > tbody > tr:nth-child(2) > td > table > tbody > tr {
    text-transform: capitalize;
}
.pagetop,
.pagetop a:link {
    color: white;
}
.pagetop a:visited {
    color: white;
}
#pagespace {
    height: 20px!important;
}
.spacer {
    height: 15px!important;
}
.athing .votelinks a .votearrow {
    margin-left: 5px;
    margin-right: 8px
}
.title:has(.morelink) {
    padding: 10px 0;
    margin-bottom: 15px;
    display: inline-block;
}
.morelink {
    background-color: #e0e0e0;
    padding: 10px;
    border-radius: 10px;
}
.morelink:hover {
    background-color: #cecece;
}
.morelink:visited {
    color: black;
}
.morelink::after {
    content: "▶";
    margin-left: 8px;
}

form {
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    display: inline-block;
    box-shadow: 0 0 15px #cecece;
    text-transform: capitalize;
}
textarea,
button,
input {
    background-color: #e0e0e0;
    border: none;
    border-radius: 5px;
    padding: 10px;
    text-transform: capitalize;
}
a[href=forgot] {
    display: block;
}
}

Reviews

No reviews yet.