Skip to content

Commit 45c9a18

Browse files
MMeschMMesch
committed
SectionSeparator: pill segments with parallelogram clip-path and white gaps
1 parent 6561e24 commit 45c9a18

2 files changed

Lines changed: 64 additions & 135 deletions

File tree

‎src/components/layout/SectionSeparator.tsx‎

Lines changed: 63 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,68 @@
1-
import clsx from "clsx";
2-
import styles from "./styles.module.css";
1+
type Segment = { w: number; dark: boolean };
2+
3+
const VARIANTS: Record<number, Segment[]> = {
4+
1: [
5+
{ w: 21, dark: true }, { w: 7, dark: false }, { w: 22, dark: true },
6+
{ w: 7, dark: false }, { w: 15, dark: true }, { w: 8, dark: false },
7+
{ w: 14, dark: true }, { w: 6, dark: false },
8+
],
9+
2: [
10+
{ w: 6, dark: false }, { w: 22, dark: true }, { w: 19, dark: false },
11+
{ w: 19, dark: true }, { w: 8, dark: false }, { w: 15, dark: true },
12+
{ w: 11, dark: false },
13+
],
14+
3: [
15+
{ w: 26, dark: true }, { w: 17, dark: false }, { w: 24, dark: true },
16+
{ w: 15, dark: false }, { w: 11, dark: true }, { w: 7, dark: false },
17+
],
18+
4: [
19+
{ w: 8, dark: true }, { w: 5, dark: false }, { w: 12, dark: true },
20+
{ w: 8, dark: false }, { w: 13, dark: true }, { w: 8, dark: false },
21+
{ w: 10, dark: true }, { w: 9, dark: false }, { w: 13, dark: true },
22+
{ w: 7, dark: false }, { w: 7, dark: true },
23+
],
24+
5: [
25+
{ w: 14, dark: false }, { w: 4, dark: true }, { w: 17, dark: false },
26+
{ w: 13, dark: true }, { w: 9, dark: false }, { w: 11, dark: true },
27+
{ w: 11, dark: false }, { w: 15, dark: true }, { w: 6, dark: false },
28+
],
29+
6: [
30+
{ w: 7, dark: true }, { w: 7, dark: false }, { w: 9, dark: true },
31+
{ w: 7, dark: false }, { w: 11, dark: true }, { w: 7, dark: false },
32+
{ w: 11, dark: true }, { w: 7, dark: false }, { w: 10, dark: true },
33+
{ w: 8, dark: false }, { w: 9, dark: true }, { w: 7, dark: false },
34+
],
35+
7: [
36+
{ w: 5, dark: true }, { w: 6, dark: false }, { w: 7, dark: true },
37+
{ w: 7, dark: false }, { w: 9, dark: true }, { w: 7, dark: false },
38+
{ w: 10, dark: true }, { w: 6, dark: false }, { w: 8, dark: true },
39+
{ w: 7, dark: false }, { w: 9, dark: true }, { w: 6, dark: false },
40+
{ w: 7, dark: true }, { w: 6, dark: false },
41+
],
42+
8: [
43+
{ w: 3, dark: true }, { w: 6, dark: false }, { w: 19, dark: true },
44+
{ w: 8, dark: false }, { w: 5, dark: true }, { w: 17, dark: false },
45+
{ w: 11, dark: true }, { w: 6, dark: false }, { w: 13, dark: true },
46+
{ w: 12, dark: false },
47+
],
48+
};
349

450
type Variant = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
551

652
export default function SectionSeparator({ variant = 1 }: { variant?: Variant }) {
7-
return <div className={clsx(styles.sep, styles[`sep_v${variant}`])} />;
53+
const segments = VARIANTS[variant];
54+
return (
55+
<div style={{ display: "flex", gap: "4px", height: "4px", alignItems: "stretch", width: "100%", backgroundColor: "white" }}>
56+
{segments.map(({ w, dark }, i) => (
57+
<div
58+
key={i}
59+
style={{
60+
flex: w,
61+
backgroundColor: dark ? "#1d1d1b" : "var(--ifm-color-blue-jupyter)",
62+
clipPath: "polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%)",
63+
}}
64+
/>
65+
))}
66+
</div>
67+
);
868
}

‎src/components/layout/styles.module.css‎

Lines changed: 1 addition & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -53,138 +53,7 @@
5353
box-sizing: border-box;
5454
}
5555

56-
/* ─── SectionSeparator ─── */
57-
58-
.sep {
59-
width: 100%;
60-
height: 4px;
61-
flex-shrink: 0;
62-
}
63-
64-
/* 8 segments — medium pace, irregular widths */
65-
.sep_v1 {
66-
background: linear-gradient(to right,
67-
#1d1d1b 0%, #1d1d1b 21%,
68-
var(--ifm-color-blue-jupyter) 21%, var(--ifm-color-blue-jupyter) 28%,
69-
#1d1d1b 28%, #1d1d1b 50%,
70-
var(--ifm-color-blue-jupyter) 50%, var(--ifm-color-blue-jupyter) 57%,
71-
#1d1d1b 57%, #1d1d1b 72%,
72-
var(--ifm-color-blue-jupyter) 72%, var(--ifm-color-blue-jupyter) 80%,
73-
#1d1d1b 80%, #1d1d1b 94%,
74-
var(--ifm-color-blue-jupyter) 94%, var(--ifm-color-blue-jupyter) 100%
75-
);
76-
}
77-
78-
/* 7 segments — red-heavy, bold opener */
79-
.sep_v2 {
80-
background: linear-gradient(to right,
81-
var(--ifm-color-blue-jupyter) 0%, var(--ifm-color-blue-jupyter) 6%,
82-
#1d1d1b 6%, #1d1d1b 28%,
83-
var(--ifm-color-blue-jupyter) 28%, var(--ifm-color-blue-jupyter) 47%,
84-
#1d1d1b 47%, #1d1d1b 66%,
85-
var(--ifm-color-blue-jupyter) 66%, var(--ifm-color-blue-jupyter) 74%,
86-
#1d1d1b 74%, #1d1d1b 89%,
87-
var(--ifm-color-blue-jupyter) 89%, var(--ifm-color-blue-jupyter) 100%
88-
);
89-
}
90-
91-
/* 6 segments — wide, muscular */
92-
.sep_v3 {
93-
background: linear-gradient(to right,
94-
#1d1d1b 0%, #1d1d1b 26%,
95-
var(--ifm-color-blue-jupyter) 26%, var(--ifm-color-blue-jupyter) 43%,
96-
#1d1d1b 43%, #1d1d1b 67%,
97-
var(--ifm-color-blue-jupyter) 67%, var(--ifm-color-blue-jupyter) 82%,
98-
#1d1d1b 82%, #1d1d1b 93%,
99-
var(--ifm-color-blue-jupyter) 93%, var(--ifm-color-blue-jupyter) 100%
100-
);
101-
}
102-
103-
/* 11 segments — staccato */
104-
.sep_v4 {
105-
background: linear-gradient(to right,
106-
#1d1d1b 0%, #1d1d1b 8%,
107-
var(--ifm-color-blue-jupyter) 8%, var(--ifm-color-blue-jupyter) 13%,
108-
#1d1d1b 13%, #1d1d1b 25%,
109-
var(--ifm-color-blue-jupyter) 25%, var(--ifm-color-blue-jupyter) 33%,
110-
#1d1d1b 33%, #1d1d1b 46%,
111-
var(--ifm-color-blue-jupyter) 46%, var(--ifm-color-blue-jupyter) 54%,
112-
#1d1d1b 54%, #1d1d1b 64%,
113-
var(--ifm-color-blue-jupyter) 64%, var(--ifm-color-blue-jupyter) 73%,
114-
#1d1d1b 73%, #1d1d1b 86%,
115-
var(--ifm-color-blue-jupyter) 86%, var(--ifm-color-blue-jupyter) 93%,
116-
#1d1d1b 93%, #1d1d1b 100%
117-
);
118-
}
119-
120-
/* 9 segments — syncopated, red-anchored */
121-
.sep_v5 {
122-
background: linear-gradient(to right,
123-
var(--ifm-color-blue-jupyter) 0%, var(--ifm-color-blue-jupyter) 14%,
124-
#1d1d1b 14%, #1d1d1b 18%,
125-
var(--ifm-color-blue-jupyter) 18%, var(--ifm-color-blue-jupyter) 35%,
126-
#1d1d1b 35%, #1d1d1b 48%,
127-
var(--ifm-color-blue-jupyter) 48%, var(--ifm-color-blue-jupyter) 57%,
128-
#1d1d1b 57%, #1d1d1b 68%,
129-
var(--ifm-color-blue-jupyter) 68%, var(--ifm-color-blue-jupyter) 79%,
130-
#1d1d1b 79%, #1d1d1b 94%,
131-
var(--ifm-color-blue-jupyter) 94%, var(--ifm-color-blue-jupyter) 100%
132-
);
133-
}
134-
135-
/* 12 segments — rapid alternation */
136-
.sep_v6 {
137-
background: linear-gradient(to right,
138-
#1d1d1b 0%, #1d1d1b 7%,
139-
var(--ifm-color-blue-jupyter) 7%, var(--ifm-color-blue-jupyter) 14%,
140-
#1d1d1b 14%, #1d1d1b 23%,
141-
var(--ifm-color-blue-jupyter) 23%, var(--ifm-color-blue-jupyter) 30%,
142-
#1d1d1b 30%, #1d1d1b 41%,
143-
var(--ifm-color-blue-jupyter) 41%, var(--ifm-color-blue-jupyter) 48%,
144-
#1d1d1b 48%, #1d1d1b 59%,
145-
var(--ifm-color-blue-jupyter) 59%, var(--ifm-color-blue-jupyter) 66%,
146-
#1d1d1b 66%, #1d1d1b 76%,
147-
var(--ifm-color-blue-jupyter) 76%, var(--ifm-color-blue-jupyter) 84%,
148-
#1d1d1b 84%, #1d1d1b 93%,
149-
var(--ifm-color-blue-jupyter) 93%, var(--ifm-color-blue-jupyter) 100%
150-
);
151-
}
152-
153-
/* 14 segments — very rapid, nearly even */
154-
.sep_v7 {
155-
background: linear-gradient(to right,
156-
#1d1d1b 0%, #1d1d1b 5%,
157-
var(--ifm-color-blue-jupyter) 5%, var(--ifm-color-blue-jupyter) 11%,
158-
#1d1d1b 11%, #1d1d1b 18%,
159-
var(--ifm-color-blue-jupyter) 18%, var(--ifm-color-blue-jupyter) 25%,
160-
#1d1d1b 25%, #1d1d1b 34%,
161-
var(--ifm-color-blue-jupyter) 34%, var(--ifm-color-blue-jupyter) 41%,
162-
#1d1d1b 41%, #1d1d1b 51%,
163-
var(--ifm-color-blue-jupyter) 51%, var(--ifm-color-blue-jupyter) 57%,
164-
#1d1d1b 57%, #1d1d1b 65%,
165-
var(--ifm-color-blue-jupyter) 65%, var(--ifm-color-blue-jupyter) 72%,
166-
#1d1d1b 72%, #1d1d1b 81%,
167-
var(--ifm-color-blue-jupyter) 81%, var(--ifm-color-blue-jupyter) 87%,
168-
#1d1d1b 87%, #1d1d1b 94%,
169-
var(--ifm-color-blue-jupyter) 94%, var(--ifm-color-blue-jupyter) 100%
170-
);
171-
}
172-
173-
/* 10 segments — skipped beat, long gap mid-line */
174-
.sep_v8 {
175-
background: linear-gradient(to right,
176-
#1d1d1b 0%, #1d1d1b 3%,
177-
var(--ifm-color-blue-jupyter) 3%, var(--ifm-color-blue-jupyter) 9%,
178-
#1d1d1b 9%, #1d1d1b 28%,
179-
var(--ifm-color-blue-jupyter) 28%, var(--ifm-color-blue-jupyter) 36%,
180-
#1d1d1b 36%, #1d1d1b 41%,
181-
var(--ifm-color-blue-jupyter) 41%, var(--ifm-color-blue-jupyter) 58%,
182-
#1d1d1b 58%, #1d1d1b 69%,
183-
var(--ifm-color-blue-jupyter) 69%, var(--ifm-color-blue-jupyter) 75%,
184-
#1d1d1b 75%, #1d1d1b 88%,
185-
var(--ifm-color-blue-jupyter) 88%, var(--ifm-color-blue-jupyter) 100%
186-
);
187-
}
56+
/* ─── SectionSeparator — rendered as pill divs in SectionSeparator.tsx ─── */
18857

18958
@media (max-width: 996px) {
19059
.section {

0 commit comments

Comments
 (0)