blogs.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="https://openaireview.org/blogs.html" />
<title>Blogs — OpenAIReview</title>
<meta name="description" content="Posts from the OpenAIReview team on AI review and the verification of AI-accelerated science.">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-P2VZL2X4NX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-P2VZL2X4NX');
</script>
<script>
MathJax = {
  tex: { inlineMath: [['\\(', '\\)']], processEscapes: true },
  startup: { typeset: false }
};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" async></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lora:wght@600;700&display=swap" rel="stylesheet">
<style>
:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --border: #e5e7eb;
  --text: #1a1a2e;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --accent: #800000;
  --accent-light: #fdf2f2;
  --accent-hover: #600000;
  --orange-light: #fffbeb;
  --orange-border: #fde68a;
  --red-light: #fef2f2;
  --red-border: #fecaca;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 14px 28px -8px rgba(60,0,0,0.22), 0 6px 10px -6px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  position: relative;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ── Header ── */
.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header .logo { font-size: 16px; font-weight: 700; color: var(--accent); letter-spacing: -0.3px; }
.header-links { margin-left: auto; display: flex; gap: 20px; font-size: 14px; font-weight: 500; }
.header-links a { color: var(--text-secondary); transition: color 0.15s; }
.header-links a:hover { color: var(--text); }
.header-links a { white-space: nowrap; }
@media (max-width: 480px) { div.header-links { gap: 12px; font-size: 12px; } div.header-links a.home-link { display: none; } }
.header-links a.current { color: var(--text); font-weight: 600; }

/* ── Hero ── */
.hero { max-width: 1240px; margin: 0 auto; padding: 64px 32px 40px; text-align: center; }
.hero h1 {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: clamp(24px, 3.5vw, 44px);
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.15;
}

/* ── Paper grid ── */
.grid-section { max-width: 1240px; margin: 0 auto; padding: 8px 32px 48px; }
.collection-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding-bottom: 16px; margin: 16px 0 20px; border-bottom: 1px solid var(--border);
}
.collection-head h2 { font-family: 'Lora', Georgia, 'Times New Roman', serif; font-size: 27px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 20px; }
.filters label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.filters .sort { margin-left: auto; }
.filters select {
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.filters select:hover { border-color: #d1d5db; color: var(--text); }
.filters select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
.filters select:focus { outline: none; border-color: var(--accent); }
.empty { grid-column: 1 / -1; text-align: center; padding: 48px 16px; color: var(--text-secondary); font-size: 14px; border: 1px dashed var(--border); border-radius: var(--radius); }
.issue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.issue-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  color: inherit;
  box-shadow: var(--shadow-md);
  transition: transform 0.18s, box-shadow 0.18s;
}
.issue-card.moderate { border-top-color: #d97706; }
.issue-card.minor { border-top-color: #9ca3af; }
.issue-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.issue-card .paper-field { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--accent); margin-bottom: 8px; }
.issue-card .paper-title { font-family: 'Lora', Georgia, serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 16px; }
.issue-card .issue { background: var(--bg); border-radius: var(--radius-sm); padding: 14px 16px; flex: 1; }
.issue-card .issue .badge { display: inline-block; margin-bottom: 8px; }
.issue-card .issue-title { font-size: 14.5px; line-height: 1.55; color: var(--text); }
.issue-card .card-meta strong { font-weight: 600; color: var(--text); }
.issue-card .card-meta { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--text-secondary); }
.issue-card .go { font-weight: 600; color: var(--accent); }


.badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.badge.critical, .badge.major { background: var(--red-light); color: #b91c1c; border: 1px solid var(--red-border); }
.badge.moderate { background: var(--orange-light); color: #92400e; border: 1px solid var(--orange-border); }
.badge.minor { background: #f3f4f6; color: #4b5563; border: 1px solid var(--border); }

.footer { max-width: 1240px; margin: 0 auto; padding: 16px 32px 48px; font-size: 12px; color: var(--text-muted); line-height: 1.6; }

@media (max-width: 1000px) { .issue-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px) {
  .header { padding: 0 16px; gap: 12px; }
  .header-links { gap: 14px; font-size: 13px; }
  .hero { padding: 40px 16px 28px; }
  .hero h1 { white-space: normal; }
  .grid-section, .footer { padding-left: 16px; padding-right: 16px; }
  .issue-grid { grid-template-columns: 1fr; }
}

/* ── List of posts ── */
.post-list { max-width: 820px; margin: 0 auto; padding: 8px 32px 64px; }
.post {
  display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 24px 28px; margin-bottom: 18px; color: inherit;
  transition: transform 0.18s, box-shadow 0.18s;
}
.post:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.post .date { font-size: 12px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--accent); }
.post h2 { font-family: 'Lora', Georgia, 'Times New Roman', serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 8px 0 8px; }
.post p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.post .go { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
@media (max-width: 800px) { .post-list { padding-left: 16px; padding-right: 16px; } }
</style>
</head>
<body>

<div class="header">
  <a class="logo" href="index.html">OpenAIReview</a>
  <div class="header-links">
    <a href="index.html" class="home-link">OpenVerification</a>
    <a href="reviewer.html">Review your paper</a>
    <a href="blogs.html" class="current">Blogs</a>
    <a href="https://github.com/ChicagoHAI/OpenAIReview" target="_blank">GitHub</a>
  </div>
</div>

<div class="hero-wrapper">
  <div class="hero">
    <h1>Blogs</h1>
  </div>
</div>

<div class="post-list" id="post-list"></div>

<script>
// One entry per post, newest first. To add a post, put its page in this folder and add an entry here.
const POSTS = [
  {
    title: 'AI-accelerated Science Needs Open-sourced Verification',
    date: 'October 2026',
    author: 'Dang Nguyen',
    summary: 'AI now produces mathematics faster than anyone can check it. We are launching OpenVerification, an open effort to find and confirm the errors in AI-generated papers, starting with the OpenAI math collection.',
    url: 'openverification.html',
  },
  {
    title: 'AI Review Systems Can Catch Errors in Research Papers',
    date: 'September 2026',
    author: 'Dang Nguyen',
    summary: 'We benchmark four AI review systems on real papers. The best one separates weak from strong papers 83% of the time, is right in 91% of its comments, and catches 72% of the errors we plant.',
    url: 'benchmark.html',
  },
  {
    title: 'AI-assisted Reviewing is Necessary and Should be Open',
    date: 'March 2026',
    author: 'Chenhao Tan',
    summary: 'Peer review is facing a death spiral. AI production tools are speeding it up. AI-assisted reviewing is necessary and should be open.',
    url: 'blog.html',
  },
];

function escapeHtml(text) {
  return text.replace(/[&<>"]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
}
document.getElementById('post-list').innerHTML = POSTS.map(post => `
  <a class="post" href="${escapeHtml(post.url)}">
    <div class="date">${escapeHtml(post.date)} &middot; ${escapeHtml(post.author)}</div>
    <h2>${escapeHtml(post.title)}</h2>
    <p>${escapeHtml(post.summary)}</p>
    <span class="go">Read the post &rarr;</span>
  </a>`).join('');
</script>
</body>
</html>