Skip to content

Instantly share code, notes, and snippets.

@cllu
Last active October 14, 2017 00:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cllu/276fb0cd574006f4f343ef1515dac5ce to your computer and use it in GitHub Desktop.
Save cllu/276fb0cd574006f4f343ef1515dac5ce to your computer and use it in GitHub Desktop.
HelvetiNews - A Minimalist Theme for HackerNews from http://www.helvetinews.com/
// ==UserScript==
// @name HelvetiNews
// @namespace http://tampermonkey.net/
// @version 0.2
// @description A Minimalist Theme for HackerNews
// @author dwynings
// @match https://news.ycombinator.com/*
// @downloadURL https://gist.githubusercontent.com/cllu/276fb0cd574006f4f343ef1515dac5ce/raw/HelvetiNews.user.js
// @resource styles https://gist.githubusercontent.com/cllu/276fb0cd574006f4f343ef1515dac5ce/raw/hn.css
// @grant GM_addStyle
// @grant GM_getResourceText
// ==/UserScript==
(function() {
'use strict';
GM_addStyle (GM_getResourceText ("styles"));
})();
body {
font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
color: #444 !important;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
/*background: #F8F7F3;*/
background: #F9F9F9;
color: #828282;
margin: 0;
}
body > center > table {
width: 100%;
background-color: transparent;
/*background: red;*/
}
body > center > table > tbody > tr:first-child > td {
background: white;
position: absolute;
width: 100%;
height: 45px;
border-bottom: 4px solid #fc7010;
z-index: 2;
}
body > center > table > tbody > tr:first-child a[href="http://ycombinator.com"] {
display: none;
}
body > center > table > tbody > tr:first-child > td > table {
padding: 10px;
margin: 0 auto;
width: 960px;
}
.pagetop {
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif !important;
font-size: 14px;
display: block;
margin-top: 11px;
margin-left: 150px;
height: 40px;
color: white !important;
}
.pagetop a {
padding: 4px;
display: inline-block;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: 14px;
line-height: 16px;
color: #333 !important;
}
.pagetop b {
padding: 4px;
color: #3d3a32 !important;
font: bold 26px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif !important;
position: absolute;
top: 4px;
margin-left: -195px;
display: block;
}
.pagetop a[href="news"] {
min-width: 170px;
padding-right: 0px;
color: #3d3a32 !important;
font: bold 26px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif !important;
position: absolute;
top: 0px;
}
.topsel a:link, .topsel a:visited {
color: #fc7010 !important;
font-weight: bold;
}
.subtext a[href^="item?id="] {
font-weight: bold;
color: #5e5e5e;
}
.comhead a:link, .subtext a:visited, .subtext a:link, tr:hover > .title {
color: #828282 !important;
}
body > center > table > tbody > tr:nth-child(3) > td {
padding: 30px 0;
}
body > center > table > tbody > tr:nth-child(3) > td > table {
width: 960px;
margin: 0 auto;
margin-top: 25px;
}
.title {
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif !important;
font-size: 14px !important;
color: #cdcdcd !important;
/*font-weight: 500;*/
font-weight: bold;
transition: all .3s linear;
-o-transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
.title a:link {
color: #414141;
}
.title a:visited {
color: #8b8b8b;
}
body > center > table > tbody > tr:nth-child(3) > td > table > tbody > tr:first-child > td:nth-child(2).title > a {
font-size: 18px;
}
body > center > table > tbody > tr:nth-child(3) > td > table > tbody > tr:first-child > td:nth-child(2).title > a:visited {
color: #414141;
}
.subtext {
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif !important;
font-size: 12px !important;
color: #444 !important;
/*padding-bottom: 10px;*/
padding-bottom: 4px;
/*padding-top: 2px;*/
}
td, .default, .comhead, .yclinks, .dead, .comhead a {
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif !important;
font-size: 13px !important;
color: #444 !important;
font-weight: normal;
}
.comment {
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif !important;
font-size: 14px !important;
color: #222 !important;
font-weight: normal;
line-height: 1.54em;
}
.comment font {
color: #222;
}
/*.default, */
.comment {
display: block;
width: 550px;
}
.comhead a:link, .subtext a:visited {
color: #828282 !important;
text-decoration: none !important;
}
body > center > table > tbody > tr:nth-child(3) > td > form, body > center > table > tbody > tr > td > table {
width: 960px;
margin: 0 auto;
}
.default u {
text-decoration: none;
}
.default, .default a {
border-bottom: none;
/*
font-size: 13px;*/
font-size: 14px;
color: #777;
text-decoration: none !important;
}
.default .comhead a {
font-size: 13px;
}
.comment p font a, .comment p font a:link, .comment a:visited, .comment a:link {
text-decoration: none;
border-bottom: 1px dashed #777;
transition: none;
-o-transition: none;
-moz-transition: none;
-webkit-transition: none;
}
.comment p font a:hover, .comment p a:hover, .comment font a:hover {
border-bottom: 1px solid #fc7010;
}
a[href^=reply] {
border-bottom: 1px dashed #777;
transition: none;
-o-transition: none;
-moz-transition: none;
-webkit-transition: none;
font-weight: bold;
font-size: 12px;
color: #777 !important;
}
a[href^=reply]:hover {
border-bottom: 1px solid #fc7010;
}
.comment p, .comment + p {
/*m
argin: 8px 0 0 0;*/
margin-top: 1em;
}
::selection, ::-webkit-selection, ::-moz-selection {
background: #fc7010;
color: #fff;
text-shadow: none;
}
center a img {
padding-left: 8px;
padding-right: 8px;
}
a {
text-decoration: none;
transition: color .3s linear;
-o-transition: color .3s linear;
-moz-transition: color .3s linear;
-webkit-transition: color .3s linear;
}
a:hover, .pagetop a:hover, .comhead a:hover, .subtext a:hover, .title a:hover, .topsel a:link, .topsel a:visited, .yclinks a:hover,.pagetop a[href="news"]:hover, td[valign="top"] a[id^="up"]:hover:before, td[valign="top"] a[id^="down"]:hover:before, a[id^="up"]:hover:before, body > center > table > tbody > tr:nth-child(3) > td > table > tbody > tr:first-child > td:nth-child(2).title > a:hover {
text-decoration: none !important;
color: #fc7010 !important;
}
.yclinks {
border-top: 4px solid #fc7010 !important;
padding-top: 20px;
height: 100px;
background: white;
position: absolute;
left: 0;
width: 100%;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: 14px !important;
color: white !important;
}
tbody tr:nth-child(4) center form {
position: absolute;
margin-top: 80px;
margin-left: 95px;
}
tbody tr:nth-child(4) center form input {
float: right;
margin-left: 10px;
}
.yclinks a {
color: #333 !important;
margin-right: 5px;
margin-left: 5px;
padding: 2px 4px;
margin-left: 2px;
margin-right: 4px;
}
#hnmain > tbody > tr:nth-child(4) > td > center > br {
display: none;
}
table td[bgcolor] {
background: none;
}
body center table tbody tr td form {
padding-top: 60px;
}
form[method="get"] {
padding-top: 1px;
}
tbody tr td center font[color] {
font-size: 30px;
position: absolute;
margin-left: -6px;
line-height: 28px;
z-index: -2;
}
form {
z-index: 2;
}
/*td[value="title"] {
background: red;
}*/
textarea[name="text"] {
margin-top: -60px;
}
textarea[wrap="virtual"] {
margin-top: 0px;
}
center table[class^="comment"] a img {
z-index: -2;
display: block;
}
a[id^="up"] {
/*padding: 10px;*/
width: 30px;
height: 20px;
display: inline-block;
float: left;
position: relative;
z-index: 1;
}
a[id^="up"]:before {
position: absolute;
left: 14px;
color: #838383;
font-size: 14px;
line-height: 18px;
/*font-size: 16px;
line-height: 21px;*/
text-align: left;
content: "\25b2";
}
td[valign="top"] a[id^="up"], a[id^="down"] {
width: 30px;
height: 20px;
display: inline-block;
float: left;
position: relative;
z-index: 1;
}
td[valign="top"] a[id^="up"]:before, td[valign="top"] a[id^="down"]:before {
position: absolute;
left: 7px;
color: #838383;
font-size: 16px;
line-height: 21px;
text-align: right;
}
td[valign="top"] a[id^="up"]:before {
content: "\25B2";
}
td[valign="top"] a[id^="down"]:before {
content: "\25BC";
}
td[valign="top"] center {
width: 30px;
margin-right: 0px;
}
td[valign="top"] {
width: 20px;
}
a > img:first-child {
opacity: 0;
}
table[bgcolor="#ffffaa"] {
/*background: red !important;*/
margin-top: 30px;
}
table[bgcolor="#ffffaa"] .pagetop {
margin-left: 0px;
color: #444 !important;
height: auto !important;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif !important;
font-size: 14px !important;
}
table[bgcolor="#ffffaa"] .pagetop a {
font-size: 14px !important;
padding: 0px !important;
}
.comhead a[href="user?id=dwynings"], .subtext a[href="user?id=dwynings"] {
color: #09F!important;
}
.comhead a[href="user?id=dwynings"]:hover, .subtext a[href="user?id=dwynings"]:hover {
color: #fc7010 !important;
}
td p {
font-size: 14px !important;
width: 550px;
line-height: 1.54em !important;
}
table td:nth-child(3) .pagetop {
margin-left: 0px;
}
.pagetop font {
color: #fc7010;
font-weight: bold;
font-size: 14px;
}
input[type="text"], input[type="password"], input[type="email"], textarea, select {
border: 1px solid #ccc;
padding: 6px 4px;
outline: none;
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777;
margin: 0;
/*max-width: 100%;*/
display: block;
background: #fff;
}
textarea {
color: #222 !important;
font: 14px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
/*min-width: 550px;*/
line-height: 1.54em !important;
}
select {
padding: 0;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
/*border: 1px solid #aaa;*/
border: 1px solid #fca265;
/*color: #444;*/
/*color: #fc7010;*/
/*-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow: 0 0 3px rgba(0,0,0,.2);*/
-moz-box-shadow: 0 0 3px rgba(252,112,16,0.2);
-webkit-box-shadow: 0 0 3px rgba(252,112,16,0.2);
box-shadow: 0 0 3px rgba(252,112,16,0.2);
}
td {
font-size: 14px !important;
line-height: 1.48em;
}
input[name="t"], input[name="u"], textarea[name="x"] {
width: 510px;
}
textarea[name="text"] {
width: 550px;
}
.comment font[color="#aeaeae"] {color: #AEAEAE;}
.comment font[color="#bebebe"] {color: #BEBEBE;}
.comment font[color="#cecece"] {color: #CECECE;}
.comment font[color="#dedede"] {color: #DEDEDE;}
.comment font[color="#eeeeee"] {color: #EEEEEE;}
.comment font[color="#eee"] {color: #EEEEEE;}
.votearrow{display:none;}
/*input[type="submit"] {
background: transparent;
border: 2px solid #fc7010;
padding: 2px 12px;
color: #555;
display: inline-block;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px rgba(255, 255, 255, .75);
cursor: pointer;
margin-bottom: 20px;
line-height: 21px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-webkit-border-radius: 150px;
border-radius: 150px;
text-transform: capitalize;
text-shadow: none;
transition: all .3s linear;
-o-transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
input[type="submit"]:hover {
color: white;
background: #fc7010;
text-shadow: none;
}
input[type="submit"]:active{
margin-top: 4px;
}*/
/*body { font-family:Verdana; font-size:10pt; color:#828282; }
td { font-family:Verdana; font-size:10pt; color:#828282; }
.admin td { font-family:Verdana; font-size:8.5pt; color:#000000; }
.subtext td { font-family:Verdana; font-size: 7pt; color:#828282; }
input { font-family:Courier; font-size:10pt; color:#000000; }
input[type=\"submit\"] { font-family:Verdana; }
textarea { font-family:Courier; font-size:10pt; color:#000000; }
a:link { color:#000000; text-decoration:none; }
a:visited { color:#828282; text-decoration:none; }
.default { font-family:Verdana; font-size: 10pt; color:#828282; }
.admin { font-family:Verdana; font-size:8.5pt; color:#000000; }
.title { font-family:Verdana; font-size: 10pt; color:#828282; }
.adtitle { font-family:Verdana; font-size: 9pt; color:#828282; }
.subtext { font-family:Verdana; font-size: 7pt; color:#828282; }
.yclinks { font-family:Verdana; font-size: 8pt; color:#828282; }
.pagetop { font-family:Verdana; font-size: 10pt; color:#222222; }
.comhead { font-family:Verdana; font-size: 8pt; color:#828282; }
.comment { font-family:Verdana; font-size: 9pt; }
.dead { font-family:Verdana; font-size: 9pt; color:#dddddd; }
.comment a:link, .comment a:visited { text-decoration:underline;}
.dead a:link, .dead a:visited { color:#dddddd; }
.pagetop a:visited { color:#000000;}
.topsel a:link, .topsel a:visited { color:#ffffff; }
.subtext a:link, .subtext a:visited { color:#828282; }
.subtext a:hover { text-decoration:underline; }
.comhead a:link, .subtext a:visited { color:#828282; }
.comhead a:hover { text-decoration:underline; }
.default p { margin-top: 8px; margin-bottom: 0px; }
.pagebreak {page-break-before:always}
pre { overflow: auto; padding: 2px; max-width:600px; }
pre:hover {overflow:auto}*/
@cllu
Copy link
Author

cllu commented Oct 14, 2017

All credit goes to @druwynings. To add this user script, ensure TamperMonkey is installed, and then click the Raw button for file HelvetiNews.user.js (direct link). TamperMonkey should be able to redirect you to the UserScript installation page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment