Ask HN: Why are the upvote arrows so small?
The .votearrow element on HN is 10x10px:
.votearrow { width: 10px; height: 10px; border: 0px; margin: 3px 2px 6px; background: url("triangle.svg"), linear-gradient(transparent, transparent) no-repeat; background-size: 10px; }
On mobile, I keep tapping the title instead of the arrow. I've been running this override via Stylus for a while:
.votearrow {
width: 40px;
height: 40px;
margin: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
cursor: pointer;
} I just zoom in on mobile if I really want to vote on something. I prefer that to the idea of a “mobile-first” site overhaul like much of the web has done. In nearly every case those efforts seem to make things worse. That's what I used to do until I discovered the Stylus extension and created an override for it. I think the change should apply to both (desktop and mobile). To be as unintrusive as possible, as per HN's general minimalist aesthetic. Also HN was designed to be used on a PC, not mobile, around what looked good enough to pg in the early 2000s. They're fairly large (larger than lowercase letters in the header text, comparable to uppercase). Glad you were able to fix it since you prefer them much larger. Since this is an action, I disagree that 10px is "fairly large". According to WCAG https://www.w3.org/WAI/WCAG22/Understanding/target-size-mini... It should be 24px minimum, we shouldn't be comparing with the title either. I know what you mean but it always seemed to me that voting is not a main feature, merely an accessory.