Show HN: Better HN on Mobile Browser

I got sick of looking at the crowded mobile look of HN. It needed breathing room. Plus I wanted to use iOS’s system font (ditto on Android). Here’s a CSS stylesheet you can paste into a Safari extension like Makeover (free).

body, table, td, span {font-family:system-ui !important;font-size:1rem !important;}

#hnmain > tbody > tr > td > table:not(.itemlist) > tbody > tr > td {padding:0.5rem !important;}

table.itemlist {margin:1.2rem !important;}

td.votelinks {padding-left:0.9rem !important;padding-right:0.6rem !important;}

div.votearrow {margin-top:0.38rem !important;}

div.votearrow::before {content:'' !important; display:inline-block !important; width:1rem !important; height:1rem !important; background: rgba(0,0,0,0.05) !important; border:solid 1px rgba(0,0,0,0.1) !important; border-radius:100px !important; margin-left:-0.256rem !important; margin-top:-0.13rem !important;}

td.title {line-height:1.5 !important;}

td.subtext {padding-top:0.25rem !important; line-height:1.5 !important;}

tr.spacer {height:1.2rem !important;}

table.fatitem {margin-top:0.5rem !important; margin-bottom:-2.5rem !important;max-width:78vw !important; overflow-wrap:break-word !important;}

table.fatitem .toptext {max-width:78vw !important; overflow-wrap:break-word !important;}

table.comment-tree {max-width:97vw !important; overflow-wrap:break-word !important;}