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

Size1.9 kB

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.