Editor blocks (checklist + collapsibles) & design standardization

src/components/Avatar.astro

@@ -21,7 +21,7 @@ const initials = name
   .avatar {
     width: var(--avatar-size);
     height: var(--avatar-size);
-    border-radius: 50%;
+    border-radius: var(--radius-circle);
     overflow: hidden;
     flex: 0 0 auto;
     display: inline-flex;

src/pages/about.astro

@@ -217,7 +217,7 @@ const links = [
     align-items: center;
     padding: 22px;
     border: 1px solid var(--line);
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
     background: var(--paper-2);
     color: inherit !important;
     text-decoration: none;

src/pages/authors/[handle].astro

@@ -204,7 +204,7 @@ const breadcrumbJsonLd = {
   .author-avatar-lg {
     width: 88px;
     height: 88px;
-    border-radius: 50%;
+    border-radius: var(--radius-circle);
     overflow: hidden;
     background: var(--paper-2);
     border: 1px solid var(--line);

src/pages/authors/index.astro

@@ -91,7 +91,7 @@ const contributors = authors
     gap: 18px;
     padding: 22px;
     border: 1px solid var(--line);
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
     background: var(--paper-2);
     color: inherit;
     text-decoration: none;
@@ -110,7 +110,7 @@ const contributors = authors
   .contributor-avatar {
     width: 56px;
     height: 56px;
-    border-radius: 50%;
+    border-radius: var(--radius-circle);
     overflow: hidden;
     background: var(--paper);
     border: 1px solid var(--line);

src/pages/blog/[slug].astro

@@ -107,7 +107,8 @@ const breadcrumbJsonLd = {
       <a href="/blog" class="article-back">← Back to archive</a>
 
       <div class="article-byline" style="margin-bottom: 4px;">
-        <span style="padding: 2px 10px; border: 1px solid var(--line-2); border-radius: 99px;"
+        <span
+          style="padding: 2px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-pill);"
           >{topicName(post.data.topicId)}</span
         >
         {

src/pages/community/index.astro

@@ -97,7 +97,7 @@ const channels = [
     gap: 12px;
     padding: 24px 24px 20px;
     border: 1px solid var(--line);
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
     background: var(--paper-2);
     color: inherit;
     text-decoration: none;

src/pages/contact.astro

@@ -121,7 +121,7 @@ const channels = [
     align-items: center;
     padding: 22px 22px;
     border: 1px solid var(--line);
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
     background: var(--paper-2);
     color: inherit;
     text-decoration: none;

src/pages/index.astro

@@ -216,6 +216,35 @@ const featuredTools = allTools
     </div>
   </section>
 
+  <!-- PLAYGROUND -->
+  <section class="section">
+    <div class="container">
+      <div class="section-head">
+        <div>
+          <div class="eyebrow">Tools</div>
+          <h2 class="section-title">Run the math yourself.</h2>
+        </div>
+        <a href="/playground" class="section-link">All tools →</a>
+      </div>
+      <div class="tools-grid">
+        {
+          featuredTools.map((tool) => (
+            <a href={`/playground/${tool.id}`} class="tool-card">
+              <div class="tool-visual">
+                <ToolGlyph id={tool.id} />
+              </div>
+              <h3 class="tool-name">{tool.data.name}</h3>
+              <p class="tool-desc">{tool.data.summary}</p>
+              <div class="tool-tag" style="color: var(--accent);">
+                · {tool.data.tag} ·
+              </div>
+            </a>
+          ))
+        }
+      </div>
+    </div>
+  </section>
+
   <!-- COMMUNITY -->
   <section class="section">
     <div class="container">
@@ -263,35 +292,6 @@ const featuredTools = allTools
     </div>
   </section>
 
-  <!-- PLAYGROUND -->
-  <section class="section">
-    <div class="container">
-      <div class="section-head">
-        <div>
-          <div class="eyebrow">Tools</div>
-          <h2 class="section-title">Run the math yourself.</h2>
-        </div>
-        <a href="/playground" class="section-link">All tools →</a>
-      </div>
-      <div class="tools-grid">
-        {
-          featuredTools.map((tool) => (
-            <a href={`/playground/${tool.id}`} class="tool-card">
-              <div class="tool-visual">
-                <ToolGlyph id={tool.id} />
-              </div>
-              <h3 class="tool-name">{tool.data.name}</h3>
-              <p class="tool-desc">{tool.data.summary}</p>
-              <div class="tool-tag" style="color: var(--accent);">
-                · {tool.data.tag} ·
-              </div>
-            </a>
-          ))
-        }
-      </div>
-    </div>
-  </section>
-
   <!-- CONTRIBUTE CTA -->
   <section class="section">
     <div class="container">
@@ -371,7 +371,7 @@ const featuredTools = allTools
     padding: 8px 14px;
     background: transparent;
     border: 1px solid var(--line);
-    border-radius: 99px;
+    border-radius: var(--radius-pill);
     color: var(--ink-2);
     font: inherit;
     font-size: 13px;
@@ -415,7 +415,7 @@ const featuredTools = allTools
     align-items: start;
     padding: 18px 22px;
     border: 1px solid var(--line);
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     background: var(--paper-2);
     color: inherit;
     text-decoration: none;

src/pages/playground/[tool].astro

@@ -113,7 +113,7 @@ const breadcrumbJsonLd = {
   }
   .tool-tag {
     padding: 3px 10px;
-    border-radius: 99px;
+    border-radius: var(--radius-pill);
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: var(--ink);

src/pages/playground/index.astro

@@ -304,7 +304,7 @@ const catalogTools = allTools.sort((a, b) => {
     color: var(--ink-3);
     padding: 3px 8px;
     border: 1px solid var(--line-2);
-    border-radius: 99px;
+    border-radius: var(--radius-pill);
   }
   .tool-card-live .tool-card-tag {
     color: var(--paper);
@@ -416,7 +416,7 @@ const catalogTools = allTools.sort((a, b) => {
     padding: 10px 14px;
     background: var(--paper-2);
     border: 1px solid var(--line);
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     color: var(--ink-3);
     transition:
       border-color 0.15s ease,
@@ -460,7 +460,7 @@ const catalogTools = allTools.sort((a, b) => {
   }
   .tools-catalog-scroll::-webkit-scrollbar-thumb {
     background: var(--line-2);
-    border-radius: 99px;
+    border-radius: var(--radius-pill);
   }
   .tools-catalog-scroll::-webkit-scrollbar-thumb:hover {
     background: var(--ink-3);
@@ -510,7 +510,7 @@ const catalogTools = allTools.sort((a, b) => {
     letter-spacing: 0.1em;
     padding: 3px 9px;
     border: 1px solid var(--line-2);
-    border-radius: 99px;
+    border-radius: var(--radius-pill);
     color: var(--ink-3);
     background: color-mix(in srgb, var(--paper-2) 90%, transparent);
   }

src/pages/topics/[id].astro

@@ -72,12 +72,10 @@ const breadcrumbJsonLd = {
   jsonLd={[collectionJsonLd, breadcrumbJsonLd]}
 >
   <div class="container blog-shell">
-    <div class="blog-head">
-      <div>
-        <div class="eyebrow page-eyebrow">Topic</div>
-        <h1 class="blog-h1">{topic.name}.</h1>
-        <p class="page-lede" style="max-width: 680px;">{topic.desc}</p>
-      </div>
+    <div class="page-head">
+      <div class="eyebrow page-eyebrow">Topic</div>
+      <h1 class="page-h1">{topic.name}.</h1>
+      <p class="page-lede" style="max-width: 680px;">{topic.desc}</p>
     </div>
 
     {

src/pages/write.astro

@@ -22,12 +22,7 @@ const repoUrl = SITE.repoUrl;
   <div style="padding: 32px 0 8px; text-align: center;">
     <h1 style="font-size: clamp(28px, 5vw, 40px); margin-bottom: 8px;">Write an article</h1>
     <p style="color: var(--ink-3); max-width: 620px; margin: 0 auto; line-height: 1.6;">
-      Draft your post here — no Markdown, no setup. When you’re done, download your post folder and
-      email it to us — we’ll take care of publishing. Comfortable with GitHub? You can open a pull
-      request instead. Prefer writing MDX by hand? See the <a
-        href={`${repoUrl}/blob/main/docs/writing-articles.md`}
-        style="color: var(--accent);">authoring guide</a
-      >.
+      Write your post, then download it and send it over — by email or pull request.
     </p>
   </div>