make it look like a multiline spectrum breadcrumb

Author: snowystinger

packages/dev/s2-docs/src/Layout.tsx

@@ -67,9 +67,11 @@ const components = {
 const subPageComponents = (previousPage?: Page) => ({
   ...components,
   h1: ({children, ...props}) => (
-    <div className={style({display: 'flex', alignItems: 'center', gap: 8})}>
-      <TitleLink href="./index.html">{previousPage?.exports?.title}</TitleLink>
-      <ChevronRightIcon styles={iconStyle({size: 'XL'})} />
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 4})}>
+      <div className={style({display: 'flex', alignItems: 'center', gap: 8})}>
+        <TitleLink href="./index.html">{previousPage?.exports?.title}</TitleLink>
+        <ChevronRightIcon styles={iconStyle({size: 'M'})} />
+      </div>
       <h1 {...props} id="top" style={{'--width-per-em': getTextWidth(children)} as any} className={h1}>{children}</h1>
     </div>
   )

packages/dev/s2-docs/src/Link.tsx

@@ -50,11 +50,11 @@ export function CodeLink(props: RACLinkProps) {
 
 const titleLink = style({
   ...focusRing(),
-  font: 'heading-3xl',
+  font: 'heading',
   fontSize: {
     // On mobile, adjust heading to fit in the viewport, and clamp between a min and max font size.
     default: 'clamp(35px, (100vw - 32px) / var(--width-per-em), 55px)',
-    lg: 'heading-3xl'
+    lg: 'heading'
   },
   marginY: 0,
   color: {