Template:HackerNews/styles.css

/* Hacker News card styles. Scoped by container class to avoid global bleed. */
.mw-hn {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0;
  background: #fff;
  line-height: 1.45;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Header */
.mw-hn-header {
  font-size: 0.9em;
  color: #475569;
  margin-bottom: 6px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.mw-hn-header svg {
  flex: 0 0 auto;
  vertical-align: middle;
  width: 18px;
  height: 18px;
}

.mw-hn-header .mw-hn-logo { width:18px;height:18px;display:inline-block; }
.mw-hn-header .mw-hn-logo::before {
  content:"▲"; font-weight:700; font-size:14px; line-height:18px; color:#f60;
  display:inline-block; text-align:center; width:18px;
}




/* Title */
.mw-hn-title {
  font-weight: 600;
  margin: 2px 0 6px 0;
  color: #0f172a;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Body excerpt */
.mw-hn blockquote.mw-hn-text {
  margin: 6px 0 10px 0;
  padding: 0 0 0 12px;
  border-left: 3px solid #e2e8f0;
  color: #0f172a;
}
.mw-hn blockquote.mw-hn-text p {
  margin: 0.4em 0;
}

/* Meta line */
.mw-hn-meta {
  font-size: 0.85em;
  color: #475569;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.mw-hn-meta a {
  color: #0f6efd; /* MediaWiki default-ish link blue */
  text-decoration: none;
}
.mw-hn-meta a:hover,
.mw-hn-meta a:focus {
  text-decoration: underline;
}
.mw-hn-meta time {
  white-space: nowrap;
}

/* Compact layout on narrow screens */
@media (max-width: 420px) {
  .mw-hn { padding: 10px 12px; }
  .mw-hn-header { font-size: 0.88em; gap: 6px; }
  .mw-hn-title { margin: 2px 0 4px 0; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .mw-hn {
    background: #0b0f17;
    border-color: #243040;
  }
  .mw-hn-header,
  .mw-hn-meta { color: #c7d2fe; }
  .mw-hn-title,
  .mw-hn blockquote.mw-hn-text { color: #e5e7eb; }
  .mw-hn blockquote.mw-hn-text { border-left-color: #334155; }
  .mw-hn-meta a { color: #8ab4ff; }
}

/* Print */
@media print {
  .mw-hn { border-color: #bbb; background: #fff; }
  .mw-hn-meta a { text-decoration: underline; color: #000; }
}