I was trying to make a web browsing ai agent a few days ago and I was shocked to find that hacker news comments are implemented as table inside table inside table.
I no longer struggle to read HN on a wide browser which display 250 characters on a single line. Each paragraph is readable, and the paragraph breaks are visibly higher than the line-height.
There's definitely room for improvement but I don't think it looks half-bad: https://i.stack.imgur.com/xcyoE.png
@-moz-document domain("news.ycombinator.com") {
body {
font-family: -apple-system, "Adobe Clean", -apple-system, Helvetica, sans-serif !important;
font-size: 11pt;
color: #828282;
background-color: #1B2835 !important;
}
* {
font-family: -apple-system, "Adobe Clean", -apple-system, Helvetica, sans-serif !important;
}
* code {
font-family: "Fira Code", "Monaco", "Consolas", "Courier New", monospace !important;
margin: 0;
padding: 0;
font-size: 0.9em;
}
code:before {
content: "⬤⬤⬤";
position: absolute;
top: 5px;
left: 12px;
color: #ccc;
letter-spacing: 3px;
-webkit-text-fill-color: #ccc; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #223b4f;
}
code:before::first-letter {
color: #ff5f56 !important;
}
pre {
background-color: #234 !important;
border-radius: 15px;
padding: 30px 0px 10px;
border: 0.5px solid #223B4F !important;
box-shadow: inset 0 0 1px #123;
position: relative;
}
table#hnmain{
background-color: #1B2835 !important;
}
a:link {
color: #bfbfbf !important;
text-decoration: none;
}
.c00 {
color: #cecece !important;
}
.cdd {
color: #768696 !important;
}
.c5a {
color: #465666 !important;
}
} @-moz-document domain(news.ycombinator.com) {
.comment {
font-size: 12px;
line-height: 1.75em;
padding: 10px 0 10px 0;
max-width: 64ch;
display: block;
}
.commtext {
font-size: 12px;
line-height: 1.75em;
padding: 10px 0 10px 0;
max-width: 64ch;
display: block;
}
}