feat: blog identity, unified code renderer, logo-bright syntax palette

Blog section
- Year-as-poster list layout with sticky spine, warm blogAccent color
- Split BlogMeta into byline (top) and colophon (bottom)
- Magazine HR treatment scoped to blog routes
- Drop 100ch content cap so blog matches docs width

Layout
- Add theme.layout.gutterFluid (clamp(2rem, 5vw, 5rem)) token
- Navbar and docs/blog/hero content share the same fluid gutter
- HeroContent styled component replaces plain .hero-content class
- Update markdown-to-jsx to 9.7.15 (restores releases page)

Syntax highlighting
- Unify all code blocks through HighlightedCode component — static
  CodeBlock, interactive LiveEdit, and HomepageHeroEditor share the
  same annotation pipeline and token rendering
- Extract codeTextMixin so all code blocks share font weight, colors,
  family, and letter-spacing
- CSS grammar extension: tokenize CSS value keywords (inline-block,
  ease-in-out, all, etc.) as constants
- TSX grammar extension: re-tokenize __html template literals as JS
  so dangerouslySetInnerHTML script content gets full highlighting
- TSX grammar extension: recognize styled.div<Generic> template
  literals so their CSS content still renders with CSS sub-grammar
- JSX tag depth annotator: 4-level complementary palette (cyan,
  blue, amber, teal) stamped on tag fragments only, not embedded
  JS inside attribute expressions
- Property access chain depth: stamp deep class on 2nd+ member so
  the leaf of props.theme.fg renders distinctly
- Optional chaining fix: stamp property-access on identifiers after
  ?. so the depth counter continues through them
- Function machinery group: attr-name, arrow, and parameter share
  brand pink with function calls
- Operators removed from theme dict so arrow wins cascade
- Code palette matches PlatonicLogo brightness profile in dark mode
  (L 0.82, high chroma across all chromatic tokens)
- Warm-tinted neutrals (hue 60) so code text feels inky not disabled
- codeProperty and codePropertyDeep for chain members
- Medium font weight in light mode, light weight in dark mode

Author: quantizor

.gitignore

@@ -16,3 +16,6 @@ __diff_output__
 .next
 next-env.d.ts
 *.tsbuildinfo
+
+# agent state
+.claude/

app/blog/blog.css

@@ -1,12 +1,18 @@
 /* Route-level overrides for blog pages.
    Static CSS to avoid the createGlobalStyle SSR -> client hydration flash. */
 
-[data-e2e-id='content'] {
-  max-width: 100ch;
-}
-
 [data-e2e-id='content'] img {
   max-width: 100%;
   height: auto;
   border-radius: 4px;
 }
+
+/* Magazine-style section break: short warm rule, generous air. */
+[data-e2e-id='content'] hr {
+  border: 0;
+  margin: 3.5rem auto;
+  width: 4rem;
+  height: 2px;
+  background: var(--sc-color-blogAccent);
+  opacity: 0.6;
+}

app/homepage.css

@@ -11,15 +11,6 @@
   padding-bottom: 3rem;
 }
 
-.hero-content {
-  box-sizing: border-box;
-  font-family: var(--font-sans);
-  margin: 0 auto;
-  max-width: 72rem;
-  padding: 4rem 2rem 0;
-  width: 100%;
-}
-
 .hero-tagline {
   font-family: var(--font-display);
   font-weight: var(--sc-fontWeight-display);
@@ -51,10 +42,6 @@
 }
 
 @media (max-width: 62.5em) {
-  .hero-content {
-    padding: 5rem 2rem 0;
-  }
-
   .hero-tagline,
   .hero-subtitle {
     text-align: center;

app/page.tsx

@@ -1,7 +1,7 @@
 import CelebrationEffect from '../components/CelebrationEffect';
 import Footer from '../components/Footer';
 import HomepageBadges from '../components/HomepageBadges';
-import HomepageHeroEditor from '../components/HomepageHeroEditor';
+import HomepageHeroEditor, { HeroContent } from '../components/HomepageHeroEditor';
 import LatestBlogPost from '../components/LatestBlogPost';
 import { HomepageLogos, HomepageShowcase } from '../components/HomepageShowcase';
 import HomepageGettingStartedContent from '../components/HomepageGettingStarted';
@@ -13,7 +13,7 @@ export default function Index() {
       <CelebrationEffect />
 
       <div className="hero-header">
-        <div className="hero-content">
+        <HeroContent>
           <HomepageHeroEditor>
             <LatestBlogPost />
 
@@ -24,7 +24,7 @@ export default function Index() {
 
             <HomepageBadges />
           </HomepageHeroEditor>
-        </div>
+        </HeroContent>
 
         <p className="hero-used-by">Used by folks at</p>
         <HomepageLogos />

components/BlogListPage.tsx

@@ -5,37 +5,37 @@ import DocsLayout from './DocsLayout';
 import Link from './Link';
 import rem from '../utils/rem';
 import { theme, font } from '../utils/theme';
-import { linkStyle } from './Link';
 import { formatDate } from '../utils/formatDate';
 import { postsByYear, years } from '../utils/blog';
-import DotSeparator from './DotSeparator';
 
 export default function BlogListPage() {
   return (
     <DocsLayout title="Blog">
-      <p>
+      <Lede>
         Articles, tutorials, and announcements from the styled-components community. Originally published on{' '}
         <Link href="https://medium.com/styled-components" inline>
           Medium
         </Link>
         .
-      </p>
+      </Lede>
 
       {years.map(year => (
         <YearSection key={year}>
-          <YearHeading id={year}>{year}</YearHeading>
+          <Year id={year} aria-label={`Posts from ${year}`}>
+            {year}
+          </Year>
           <PostList>
             {postsByYear[year].map(post => (
               <PostItem key={post.slug}>
                 <PostLink href={`/blog/${post.slug}`} unstyled>
                   <PostTitle>{post.title}</PostTitle>
+                  {post.description && <PostDescription>{post.description}</PostDescription>}
+                  <PostMeta>
+                    <Author>{post.author}</Author>
+                    <Divider>—</Divider>
+                    <time dateTime={post.date}>{formatDate(post.date)}</time>
+                  </PostMeta>
                 </PostLink>
-                <PostMeta>
-                  <Author>{post.author}</Author>
-                  <DotSeparator />
-                  <time dateTime={post.date}>{formatDate(post.date)}</time>
-                </PostMeta>
-                {post.description && <PostDescription>{post.description}</PostDescription>}
               </PostItem>
             ))}
           </PostList>
@@ -45,76 +45,111 @@ export default function BlogListPage() {
   );
 }
 
+const Lede = styled.p`
+  font-family: ${font.sans};
+  font-size: ${theme.text.md};
+  color: ${theme.color.textSecondary};
+  max-width: 60ch;
+  margin-bottom: ${theme.space[16]};
+`;
+
 const YearSection = styled.section`
-  margin-top: ${theme.space[8]};
+  display: grid;
+  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
+  gap: ${rem(48)};
+  margin-bottom: ${theme.space[16]};
+
+  @container content (max-width: 700px) {
+    grid-template-columns: 1fr;
+    gap: ${rem(12)};
+  }
 `;
 
-const YearHeading = styled.h2`
-  font-size: ${theme.text.xl};
-  font-weight: ${theme.fontWeight.bold};
-  margin: 0 0 ${rem(8)} 0;
-  padding-bottom: ${rem(8)};
-  border-bottom: 1px solid ${theme.color.border};
+const Year = styled.h2`
+  font-family: ${font.display};
+  font-size: clamp(3rem, 7vw, 4.5rem);
+  font-weight: ${theme.fontWeight.display};
+  line-height: 0.9;
+  letter-spacing: -0.03em;
+  color: ${theme.color.blogAccent};
+  margin: 0;
+  position: sticky;
+  top: ${rem(90)};
+  align-self: start;
+  font-variant-numeric: tabular-nums;
+
+  @container content (max-width: 700px) {
+    position: static;
+    font-size: clamp(2.5rem, 12vw, 3.5rem);
+  }
 `;
 
 const PostList = styled.div`
   display: flex;
   flex-direction: column;
 `;
 
-const PostItem = styled.div`
-  padding: ${rem(20)} 0;
-  border-bottom: 1px solid ${theme.color.border};
+const PostItem = styled.article`
+  padding: ${rem(24)} 0;
 
-  &:last-child {
-    border-bottom: none;
+  & + & {
+    border-top: 1px solid ${theme.color.blogAccentMuted};
+  }
+
+  &:first-child {
+    padding-top: ${rem(8)};
   }
 `;
 
 const PostLink = styled(Link)`
-  ${linkStyle}
+  display: block;
+  color: inherit;
+  text-decoration: none;
 `;
 
 const PostTitle = styled.h3`
   font-family: ${font.display};
-  font-size: ${theme.text.xl};
-  font-weight: ${theme.fontWeight.medium};
-  margin: 0 0 ${rem(6)} 0;
-  color: inherit;
-  transition: color ${theme.duration.normal};
+  font-size: ${theme.text['2xl']};
+  font-weight: ${theme.fontWeight.display};
+  line-height: 1.15;
+  letter-spacing: -0.01em;
+  margin: 0 0 ${rem(10)} 0;
+  color: ${theme.color.text};
+  transition: color ${theme.duration.normal} ${theme.ease.out};
 
   ${PostLink}:hover & {
-    opacity: 0.8;
+    color: ${theme.color.blogAccent};
   }
 
   @container content (max-width: 600px) {
-    font-size: ${theme.text.lg};
+    font-size: ${theme.text.xl};
   }
 `;
 
+const PostDescription = styled.p`
+  font-family: ${font.sans};
+  font-size: ${theme.text.base};
+  line-height: 1.55;
+  margin: 0 0 ${rem(12)};
+  color: ${theme.color.textSecondary};
+  max-width: 62ch;
+`;
+
 const PostMeta = styled.div`
   font-family: ${font.sans};
   font-size: ${theme.text.sm};
-  color: ${theme.color.textSecondary};
+  color: ${theme.color.textMuted};
   display: flex;
   flex-wrap: wrap;
-  gap: ${rem(8)};
-  align-items: center;
+  gap: ${rem(10)};
+  align-items: baseline;
 `;
 
 const Author = styled.span`
   font-weight: ${theme.fontWeight.semibold};
-  color: ${theme.color.textMuted};
-`;
-
-const PostDescription = styled.p`
-  font-family: ${font.sans};
-  font-size: ${theme.text.base};
-  margin: ${rem(8)} 0 0;
-  line-height: 1.5;
   color: ${theme.color.textSecondary};
+`;
 
-  @container content (max-width: 500px) {
-    display: none;
-  }
+const Divider = styled.span.attrs({ 'aria-hidden': 'true' })`
+  color: ${theme.color.blogAccentMuted};
 `;