[cuddlecake]

> if HN is still one of the best places to communicate and post serious matters

citation needed.

Other than that, I would love to see a bit better semantic markup, not because I'm some sort of HTML purist who demands everything to be pure, but because it would make it easier to style with CSS (which I did, to add dark mode, bigger font sizes and max widths). Currently, it's nested tables with occasional classes and ids, but not for everything.

[jamiek88]

Can you share your css? Those are my beefs with HN. Need bigger font and max widths as well as a bigger ‘collapse thread’ target.

[cuddlecake]

table.fatitem,td.default{max-width:90ch}body,body>center>table,input,textarea{background-color:#262626!important}body>center>table>tbody>tr:first-child>td{background-color:#f60!important}.c00,.c00 a:link,a>u,a[href="http://www.ycombinator.com/apply/"],a[href="https://www.ycom... font,span.comment font a:link,span.yclinks a:link,table.fatitem tbody tr td,td.title a:link,td:nth-child(2):not(.subtext)>a:link,textarea,u a:link{color:#ccc!important;font-size:15px}table.fatitem tbody tr:nth-child(n+3):not(:last-child) td{color:#bbb!important}.admin td{color:#aaa!important}table.fatitem{margin:auto}table.comment-tree{margin:auto;border-left:2px solid #444}input,textarea{border:1px solid #828282!important}a.togg.clicky{margin-left:4px;margin-right:4px;font-size:16px}

[jamiek88]

Thank you!

[spiralx]

Here's mine which is a lot more spaced out, has larger text and moves the post controls to the same row as the post's author and score, with Reply floated off to the right on its own. It works with a user script that allows selecting a comment with the mouse and being able to use the keyboard to navigate up and down and vote or reply similarly to what RES provides.

    @import url("https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700");
    html,
    body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      letter-spacing: normal;
      word-spacing: normal;
    }
    body {
      font-size: 13pt;
      line-height: 1.5em;
    }
    .pagetop,
    .title {
      font: 15pt/1.5em 'Merriweather Sans', Arial, sans-serif;
    }
    .default,
    .comhead,
    .subtext,
    .reply,
    .comment,
    .autopagerize_page_info {
      font: 13pt/1.5em 'Merriweather Sans', Arial, sans-serif;
    }
    .profileform td {
      font: 13pt/1.5em 'Merriweather Sans', Arial, sans-serif;
      padding: 0.2em 0.5em;
    }
    .profileform input,
    .profileform select,
    .profileform textarea {
      font: 12pt/1.5em 'Merriweather Sans', Arial, sans-serif;
      padding: 0.1em 0.25em;
    }
    .profileform a {
      color: #37f !important;
      text-decoration: none !important;
      opacity: 0.7;
      transition: opacity 0.2s ease-in-out;
    }
    .profileform a:hover {
      opacity: 1;
    }
    .comment {
      max-width: 100%;
    }
    .itemlist .votelinks {
      vertical-align: middle !important;
    }
    .itemlist .title {
      padding: 0 0.25em 0.25em;
    }
    .itemlist .spacer {
      height: 0.5em !important;
    }
    .ind img[width = "40"] {
      width: 20px !important;
    }
    .ind img[width = "80"] {
      width: 40px !important;
    }
    .ind img[width = "120"] {
      width: 60px !important;
    }
    .ind img[width = "160"] {
      width: 80px !important;
    }
    .ind img[width = "200"] {
      width: 100px !important;
    }
    .ind img[width = "240"] {
      width: 120px !important;
    }
    .ind img[width = "280"] {
      width: 140px !important;
    }
    .ind img[width = "320"] {
      width: 160px !important;
    }
    .ind img[width = "360"] {
      width: 180px !important;
    }
    .ind img[width = "400"] {
      width: 200px !important;
    }
    .ind img[width = "440"] {
      width: 220px !important;
    }
    .ind img[width = "480"] {
      width: 240px !important;
    }
    .ind img[width = "520"] {
      width: 260px !important;
    }
    .ind img[width = "560"] {
      width: 280px !important;
    }
    .ind img[width = "600"] {
      width: 300px !important;
    }
    .ind img[width = "640"] {
      width: 320px !important;
    }
    .ind img[width = "680"] {
      width: 340px !important;
    }
    .ind img[width = "720"] {
      width: 360px !important;
    }
    .ind img[width = "760"] {
      width: 380px !important;
    }
    .ind img[width = "800"] {
      width: 400px !important;
    }
    a.hnuser {
      color: #37f !important;
      text-decoration: none !important;
      font-weight: bold;
      opacity: 0.7;
      transition: opacity 0.2s ease-in-out;
    }
    a.hnuser:hover {
      opacity: 1;
    }
    a.hnuser[title]::after {
      position: relative;
      top: -2px;
      content: attr(title);
      margin: 0 0.25em 0 0.5em;
      padding: 1px 3px;
      border-radius: 4px;
      color: #fff;
      background-color: #444;
      font-weight: normal;
      font-size: 0.8em;
    }
    a.hnuser.friends {
      padding: 0.1em 0.5em;
      border-radius: 0.2em;
      color: #fff !important;
      background-color: rgba(0,68,204,0.75);
    }
    .comhead .age a:hover {
      text-decoration: none;
    }
    .comhead a.togg {
      letter-spacing: 0.1em;
      color: #000;
    }
    .comhead a.togg:hover {
      text-decoration: none;
      font-weight: bold;
    }
    .default {
      position: relative;
      width: 100%;
    }
    .default > :first-child {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      border-bottom: solid 1px #888;
      padding: 0 0 0.25em;
    }
    .default > br {
      display: none;
    }
    .default .reply {
      height: 0px;
    }
    .default .reply a {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      text-decoration: none !important;
      text-transform: uppercase;
      color: #37f !important;
      font-weight: bold;
      font-size: 0.9rem;
    }
    .title > a {
      color: #121314;
      text-decoration: none;
    }
    .title > a:visited {
      color: #8e4700;
    }
    .title > a:hover {
      text-decoration: underline;
    }
    .subtext > a:last-child {
      color: #5a5aa0;
      text-decoration: none;
      font-weight: bold;
    }
    .subtext > a:last-child:visited {
      color: #c60;
    }
    .subtext > a:last-child:hover {
      text-decoration: underline;
    }
    .comment {
      padding: 0.25rem 0;
    }
    .comment .c00 {
      color: #121314 !important;
    }
    .comment .cce,
    .comment .c73,
    .comment .cdd {
      color: inherit !important;
      opacity: 0.8;
    }
    .comment > span > a,
    .comment > span > p a {
      padding-bottom: 1px;
      border-bottom-style: solid;
      border-bottom-width: 2px;
      border-bottom-color: rgba(51,119,255,0.5);
    }
    .comment > span > a,
    .comment > span > p a,
    .comment > span > a:link,
    .comment > span > p a:link {
      color: inherit;
    }
    .comment > span > a:visited,
    .comment > span > p a:visited {
      border-bottom-color: rgba(204,102,0,0.5);
    }
    .comment > span > a,
    .comment > span > p a,
    .comment > span > a:hover,
    .comment > span > p a:hover,
    .comment > span > a:link,
    .comment > span > p a:link,
    .comment > span > a:visited,
    .comment > span > p a:visited {
      text-decoration: none;
    }
    .comment > span > a:hover,
    .comment > span > p a:hover {
      color: #37f;
      transition: all ease-in 0.25s;
    }
    .comment > span > a:hover:visited,
    .comment > span > p a:hover:visited {
      color: #c60;
    }
    .svg-arrow {
      fill: #00f;
    }
    tr.spacer {
      height: 10px !important;
    }
    [op=threads] td.votelinks font,
    [op=threads] td.votelinks br,
    [op=threads] td.votelinks img {
      display: none;
    }
    [op=threads] .comtr .comhead .score {
      color: #9400d3;
      font-weight: bold;
    }
    [op=threads] .comtr .comhead .par a,
    [op=threads] .comtr .comhead a[href ^= edit],
    [op=threads] .comtr .comhead a[href ^= delete] {
      color: #37f;
    }
    .autopagerize_page_info {
      color: #828282 !important;
      display: inline-block;
      position: absolute;
      left: 2em;
      margin-top: 0.5em;
    }
    .autopagerize_link {
      color: currentColor !important;
      cursor: pointer;
    }

[jamiek88]

Oh wow! Just wanted to thank you for this!

Now to try and get it to run on iPadOS

[7yundao]

these can be done with your browser zoom in and dark mode plugins...