articles: ?skim=1 — the skimmer's-eye view as a URL, headings/media only

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

app/blog/ArticleEnhance.jsx

@@ -131,6 +131,15 @@ export default function ArticleEnhance({ lang, languages }) {
       cleanups.push(() => play.removeEventListener('click', render));
     });
 
+    // --- skim mode (?skim=1) -------------------------------------------
+    // Refactoring English's skimmer test as a URL: headings, figures, code
+    // and tables stay; prose paragraphs fold away. Dev/review tool — the
+    // page ships unchanged without the param.
+    if (new URLSearchParams(window.location.search).get('skim') === '1') {
+      const prose = article.querySelector('.prose');
+      if (prose) prose.classList.add('prose-skim');
+    }
+
     return () => cleanups.forEach((fn) => fn());
   }, [lang, languages]);
 

app/blog/blog.module.css

@@ -428,8 +428,25 @@
 .article .prose :global(.embed-facade-soundcloud) {
   display: flex;
   align-items: center;
-  min-height: 110px;
-  padding: 1rem 4.5rem 1rem 1.25rem;
+  gap: 1rem;
+  min-height: 96px;
+  padding: 0.9rem 1.1rem;
+}
+
+/* Static waveform-ish bars — decorative, drawn at build time, nothing remote. */
+.article .prose :global(.embed-facade-soundcloud)::before {
+  content: "";
+  flex: 1;
+  height: 34px;
+  margin-left: 0.25rem;
+  background-image: repeating-linear-gradient(
+    to right,
+    var(--border) 0 2px,
+    transparent 2px 6px
+  );
+  -webkit-mask-image: linear-gradient(to bottom, transparent 12%, black 45%, black 70%, transparent 92%);
+  mask-image: linear-gradient(to bottom, transparent 12%, black 45%, black 70%, transparent 92%);
+  opacity: 0.9;
 }
 
 .article .prose :global(.embed-play) {
@@ -450,11 +467,13 @@
 }
 
 .article .prose :global(.embed-facade-soundcloud .embed-play) {
-  left: auto;
-  right: 1rem;
-  transform: translateY(-50%);
+  position: static;
+  transform: none;
+  flex: none;
+  order: -1;
   width: 2.8rem;
   height: 2.8rem;
+  font-size: 0.95rem;
 }
 
 .article .prose :global(.embed-play:hover) {
@@ -463,7 +482,7 @@
 }
 
 .article .prose :global(.embed-facade-soundcloud .embed-play:hover) {
-  transform: translateY(-50%) scale(1.06);
+  transform: scale(1.06);
 }
 
 .article .prose :global(.embed-fallback) {
@@ -580,6 +599,12 @@
   font-variant-ligatures: none;
 }
 
+/* ?skim=1 (ArticleEnhance) — the skimmer's-eye view: structure and media
+   stay, prose paragraphs fold. What's left should still tell the story. */
+.article .prose.prose-skim p {
+  display: none;
+}
+
 /* Code blocks break out of the 68ch prose measure on wide screens: code
    wants ~120 mono columns, prose wants its measure. The breakout centers on
    the core (which is viewport-centered), capped so it never slides under the