Separators: 2px thin, pure dark/blue; h2 underline gets trapezoid clip-path

Author: MMesch

src/components/layout/SectionSeparator.tsx

@@ -1,64 +1,54 @@
-type Segment = { w: number; dark: boolean };
+type Color = "dark" | "blue" | "red" | "white";
+type Segment = { w: number; c: Color };
+
+const D = (w: number): Segment => ({ w, c: "dark" });
+const B = (w: number): Segment => ({ w, c: "blue" });
+const R = (w: number): Segment => ({ w, c: "red"  });
+const W = (w: number): Segment => ({ w, c: "white" });
 
 const VARIANTS: Record<number, Segment[]> = {
-  1: [
-    { w: 21, dark: true  }, { w:  7, dark: false }, { w: 22, dark: true  },
-    { w:  7, dark: false }, { w: 15, dark: true  }, { w:  8, dark: false },
-    { w: 14, dark: true  }, { w:  6, dark: false },
-  ],
-  2: [
-    { w:  6, dark: false }, { w: 22, dark: true  }, { w: 19, dark: false },
-    { w: 19, dark: true  }, { w:  8, dark: false }, { w: 15, dark: true  },
-    { w: 11, dark: false },
-  ],
-  3: [
-    { w: 26, dark: true  }, { w: 17, dark: false }, { w: 24, dark: true  },
-    { w: 15, dark: false }, { w: 11, dark: true  }, { w:  7, dark: false },
-  ],
-  4: [
-    { w:  8, dark: true  }, { w:  5, dark: false }, { w: 12, dark: true  },
-    { w:  8, dark: false }, { w: 13, dark: true  }, { w:  8, dark: false },
-    { w: 10, dark: true  }, { w:  9, dark: false }, { w: 13, dark: true  },
-    { w:  7, dark: false }, { w:  7, dark: true  },
-  ],
-  5: [
-    { w: 14, dark: false }, { w:  4, dark: true  }, { w: 17, dark: false },
-    { w: 13, dark: true  }, { w:  9, dark: false }, { w: 11, dark: true  },
-    { w: 11, dark: false }, { w: 15, dark: true  }, { w:  6, dark: false },
-  ],
-  6: [
-    { w:  7, dark: true  }, { w:  7, dark: false }, { w:  9, dark: true  },
-    { w:  7, dark: false }, { w: 11, dark: true  }, { w:  7, dark: false },
-    { w: 11, dark: true  }, { w:  7, dark: false }, { w: 10, dark: true  },
-    { w:  8, dark: false }, { w:  9, dark: true  }, { w:  7, dark: false },
-  ],
-  7: [
-    { w:  5, dark: true  }, { w:  6, dark: false }, { w:  7, dark: true  },
-    { w:  7, dark: false }, { w:  9, dark: true  }, { w:  7, dark: false },
-    { w: 10, dark: true  }, { w:  6, dark: false }, { w:  8, dark: true  },
-    { w:  7, dark: false }, { w:  9, dark: true  }, { w:  6, dark: false },
-    { w:  7, dark: true  }, { w:  6, dark: false },
-  ],
-  8: [
-    { w:  3, dark: true  }, { w:  6, dark: false }, { w: 19, dark: true  },
-    { w:  8, dark: false }, { w:  5, dark: true  }, { w: 17, dark: false },
-    { w: 11, dark: true  }, { w:  6, dark: false }, { w: 13, dark: true  },
-    { w: 12, dark: false },
-  ],
+  // home: after hero | blog: after header
+  1: [ D(21), B(7), D(22), B(7), D(15), B(8), D(14), B(6) ],
+
+  // home: after "Who we work with" | careers: after header
+  2: [ B(6), D(22), B(19), D(19), B(8), D(15), B(11) ],
+
+  // home: after "How we work with you" | sponsor: after header
+  3: [ D(26), B(17), D(24), B(15), D(11), B(7) ],
+
+  // services: after header  — no accent, dense rhythm
+  4: [ D(8), B(5), D(12), B(8), D(13), B(8), D(10), B(9), D(13), B(7), D(7) ],
+
+  // (unused)  — pure blue/dark
+  5: [ B(14), D(4), B(17), D(13), B(9), D(11), B(11), D(15), B(6) ],
+
+  // home: before blog
+  6: [ D(7), B(7), D(9), B(7), D(11), B(7), D(11), B(7), D(10), B(8), D(9), B(7) ],
+
+  7: [ D(5), B(6), D(7), B(7), D(9), B(7), D(10), B(6), D(8), B(7), D(9), B(6), D(7), B(6) ],
+
+  8: [ D(3), B(6), D(19), B(8), D(5), B(17), D(11), B(6), D(13), B(12) ],
+};
+
+const COLOR_MAP: Record<Color, string> = {
+  dark:  "#1d1d1b",
+  blue:  "var(--ifm-color-blue-jupyter)",
+  red:   "var(--ifm-color-accent-red)",
+  white: "#ffffff",
 };
 
 type Variant = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 
 export default function SectionSeparator({ variant = 1 }: { variant?: Variant }) {
   const segments = VARIANTS[variant];
   return (
-    <div style={{ display: "flex", gap: "4px", height: "4px", alignItems: "stretch", width: "100%", backgroundColor: "white" }}>
-      {segments.map(({ w, dark }, i) => (
+    <div style={{ display: "flex", gap: "2px", height: "2px", alignItems: "stretch", width: "100%", backgroundColor: "white" }}>
+      {segments.map(({ w, c }, i) => (
         <div
           key={i}
           style={{
             flex: w,
-            backgroundColor: dark ? "#1d1d1b" : "var(--ifm-color-blue-jupyter)",
+            backgroundColor: COLOR_MAP[c],
             clipPath: "polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%)",
           }}
         />

src/css/custom.css

@@ -301,6 +301,7 @@ ul {
   height: 3px;
   background: var(--ifm-color-accent-red);
   margin-top: 10px;
+  clip-path: polygon(3px 0%, 100% 0%, calc(100% - 3px) 100%, 0% 100%);
 }
 
 .page-content h2.text--center::after {

src/pages/index.tsx

@@ -54,15 +54,15 @@ function HomeContent() {
 
       {/* ── Trusted By ────────────────────────────────────────────────────── */}
       <Section fullHeight>
-        <h2 className="text--center"><span className="highlight">Who</span> we work with</h2>
+        <h2 className="text--center">Who we work with</h2>
         <LogoGrid />
       </Section>
 
       <SectionSeparator variant={2} />
 
       {/* ── How we work with you (services) ───────────────────────────────── */}
       <Section fullHeight>
-        <h2 className="text--center"><span className="highlight">How</span> we work with you</h2>
+        <h2 className="text--center">How we work with you</h2>
         <CardGrid cols={3}>
           <li>
             <Card bg="transparent" className={styles.topics_card}>
@@ -97,7 +97,7 @@ function HomeContent() {
       {/* ── What we work on (projects) ────────────────────────────────────── */}
       <div className={styles.projects_overview_container}>
         <Section>
-          <h2 className="text--center"><span className="highlight">What</span> we work on</h2>
+          <h2 className="text--center">What we work on</h2>
         </Section>
 
         <SplitSection image={<img src={JupyterPictureUrl} alt="JupyterLab interfaces" style={{ maxWidth: "100%" }} />}>