Skip to content

Commit 69ffe4e

Browse files
sirdeggensirdeggen
committed
Improve design of docs
1 parent bb95e3f commit 69ffe4e

26 files changed

Lines changed: 395 additions & 312 deletions

‎docs-site/src/components/EditOnGitHub.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.root {
22
margin-top: 3rem;
33
padding-top: 1.25rem;
4-
border-top: 1px solid var(--dev-border);
4+
border-top: 1px solid rgba(255, 157, 0, 0.12);
55
}
66

77
.link {
@@ -16,5 +16,5 @@
1616
}
1717

1818
.link:hover {
19-
color: var(--dev-cyan);
19+
color: var(--dev-orange-2);
2020
}

‎docs-site/src/components/Footer.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,5 @@
1919
}
2020

2121
.links a:hover {
22-
color: var(--dev-cyan);
22+
color: var(--dev-orange-2);
2323
}

‎docs-site/src/components/Header.module.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
.logoIcon {
6868
font-family: var(--dev-font-mono);
6969
font-size: 0.85rem;
70-
color: var(--dev-cyan);
70+
color: var(--dev-orange);
7171
font-weight: 700;
7272
}
7373

@@ -96,13 +96,13 @@
9696

9797
.navLink:hover {
9898
color: var(--dev-fg);
99-
background: rgba(255, 255, 255, 0.05);
99+
background: rgba(255, 157, 0, 0.06);
100100
text-decoration: none;
101101
}
102102

103103
.navLink.active {
104-
color: var(--dev-cyan);
105-
background: var(--dev-cyan-dim);
104+
color: var(--dev-orange-2);
105+
background: var(--dev-orange-dim);
106106
}
107107

108108
.right {
@@ -123,7 +123,7 @@
123123

124124
.githubLink:hover {
125125
color: var(--dev-fg);
126-
background: rgba(255, 255, 255, 0.05);
126+
background: rgba(255, 157, 0, 0.06);
127127
}
128128

129129
@media (max-width: 900px) {

‎docs-site/src/components/SearchBox.module.css‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,20 @@
66
}
77

88
.input {
9-
background: var(--dev-bg-elevated);
10-
border: 1px solid var(--dev-border);
11-
border-radius: 6px;
9+
background: rgba(18, 19, 27, 0.86);
10+
border: 1px solid rgba(255, 157, 0, 0.12);
11+
border-radius: 8px;
1212
color: var(--dev-text);
1313
font-size: 0.875rem;
1414
padding: 6px 10px;
1515
width: 200px;
1616
outline: none;
17-
transition: border-color 0.15s, width 0.2s;
17+
transition: border-color 0.15s, width 0.2s, box-shadow 0.15s;
1818
}
1919

2020
.input:focus {
21-
border-color: var(--dev-cyan);
21+
border-color: var(--dev-orange);
22+
box-shadow: 0 0 0 3px rgba(255, 157, 0, 0.12);
2223
width: 260px;
2324
}
2425

@@ -29,8 +30,8 @@
2930
.kbd {
3031
font-size: 0.7rem;
3132
color: var(--dev-text-dim);
32-
background: var(--dev-bg-elevated);
33-
border: 1px solid var(--dev-border);
33+
background: rgba(255, 157, 0, 0.07);
34+
border: 1px solid rgba(255, 157, 0, 0.16);
3435
border-radius: 4px;
3536
padding: 2px 5px;
3637
pointer-events: none;
@@ -45,10 +46,10 @@
4546
width: 420px;
4647
max-height: 480px;
4748
overflow-y: auto;
48-
background: var(--dev-bg-elevated);
49-
border: 1px solid var(--dev-border);
49+
background: var(--dev-surface-2);
50+
border: 1px solid rgba(255, 157, 0, 0.16);
5051
border-radius: 8px;
51-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
52+
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
5253
list-style: none;
5354
margin: 0;
5455
padding: 6px;
@@ -66,15 +67,15 @@
6667

6768
.result:hover,
6869
.result:focus {
69-
background: var(--dev-bg);
70+
background: rgba(255, 157, 0, 0.06);
7071
outline: none;
7172
}
7273

7374
.resultTitle {
7475
display: block;
7576
font-weight: 600;
7677
font-size: 0.875rem;
77-
color: var(--dev-cyan);
78+
color: var(--dev-orange-2);
7879
margin-bottom: 4px;
7980
}
8081

‎docs-site/src/components/ToC.module.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
color: var(--dev-fg-muted);
1818
padding: 0 0 0.5rem;
1919
margin-bottom: 0.25rem;
20-
border-bottom: 1px solid var(--dev-border);
20+
border-bottom: 1px solid rgba(255, 157, 0, 0.12);
2121
}
2222

2323
.list {
@@ -52,6 +52,6 @@
5252
}
5353

5454
.link.active {
55-
color: var(--dev-cyan);
56-
border-left-color: var(--dev-cyan);
55+
color: var(--dev-orange-2);
56+
border-left-color: var(--dev-orange);
5757
}

‎docs-site/src/styles/callout.css‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
.callout {
2-
border-radius: 6px;
3-
border: 1px solid var(--dev-border-hi);
4-
border-left: 3px solid var(--dev-cyan);
5-
background: var(--dev-surface-2);
6-
margin: 1.25rem 0;
2+
border-radius: 8px;
3+
border: 1px solid rgba(255, 157, 0, 0.16);
4+
border-left: 3px solid var(--dev-orange);
5+
background: linear-gradient(180deg, rgba(255, 157, 0, 0.055), rgba(255, 255, 255, 0.018));
6+
margin: 1.5rem 0;
77
overflow: hidden;
8+
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
89
}
910

1011
.callout-title {
@@ -13,22 +14,22 @@
1314
font-weight: 600;
1415
letter-spacing: 0.06em;
1516
text-transform: uppercase;
16-
background: rgba(255, 255, 255, 0.03);
17-
border-bottom: 1px solid var(--dev-border);
17+
background: rgba(255, 157, 0, 0.045);
18+
border-bottom: 1px solid rgba(255, 157, 0, 0.12);
1819
padding: 0.5rem 0.875rem;
19-
color: var(--dev-cyan);
20+
color: var(--dev-orange-2);
2021
}
2122

2223
.callout-body {
2324
padding: 0.75rem 0.875rem;
2425
font-size: 0.875rem;
25-
color: rgba(226, 232, 240, 0.85);
26+
color: rgba(244, 240, 235, 0.86);
2627
}
2728

2829
.callout-body p:first-child { margin-top: 0; }
2930
.callout-body p:last-child { margin-bottom: 0; }
3031

31-
.callout.note { border-left-color: var(--dev-cyan); }
32+
.callout.note { border-left-color: var(--dev-orange); }
3233
.callout.info { border-left-color: var(--dev-cyan); }
3334
.callout.tip { border-left-color: var(--dev-green); }
3435
.callout.success { border-left-color: var(--dev-green); }
@@ -37,7 +38,7 @@
3738
.callout.error { border-left-color: var(--dev-red); }
3839
.callout.example { border-left-color: var(--dev-violet); }
3940

40-
.callout.note .callout-title,
41+
.callout.note .callout-title { color: var(--dev-orange-2); }
4142
.callout.info .callout-title { color: var(--dev-cyan); }
4243

4344
.callout.tip .callout-title,

‎docs-site/src/styles/code.css‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
.code-block {
22
position: relative;
33
border-radius: 8px;
4-
margin: 1.25rem 0;
5-
background: var(--dev-surface-2);
6-
border: 1px solid var(--dev-border-hi);
4+
margin: 1.5rem 0;
5+
background: #14151e;
6+
border: 1px solid rgba(255, 157, 0, 0.16);
77
overflow: hidden;
8+
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
89
}
910

1011
.code-block-header {
1112
display: flex;
1213
align-items: center;
1314
justify-content: space-between;
1415
padding: 0.4rem 1rem;
15-
background: var(--dev-surface);
16-
border-bottom: 1px solid var(--dev-border-hi);
16+
background: rgba(255, 157, 0, 0.045);
17+
border-bottom: 1px solid rgba(255, 157, 0, 0.14);
1718
}
1819

1920
.code-block-lang {
@@ -38,8 +39,8 @@
3839
}
3940

4041
.code-copy-btn:hover {
41-
color: var(--dev-cyan);
42-
border-color: var(--dev-cyan);
42+
color: var(--dev-orange-2);
43+
border-color: var(--dev-orange);
4344
}
4445

4546
.code-copy-btn.copied {

‎docs-site/src/styles/hero.css‎

Lines changed: 54 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
.bsv-hero {
22
position: relative;
33
margin: -2.5rem calc(-1 * var(--gap)) 3rem;
4-
padding: 5rem 2rem 5.5rem;
4+
padding: 5.5rem 2rem 5.75rem;
55
background:
6-
radial-gradient(ellipse at 60% 0%, rgba(34, 211, 238, 0.06) 0%, transparent 55%),
7-
radial-gradient(ellipse at 10% 80%, rgba(167, 139, 250, 0.05) 0%, transparent 50%),
8-
var(--dev-bg);
6+
linear-gradient(180deg, rgba(255, 157, 0, 0.1), rgba(255, 157, 0, 0) 45%),
7+
linear-gradient(135deg, #17100c 0%, #0d0b0a 44%, #090a10 100%);
98
color: var(--dev-fg);
109
text-align: center;
1110
overflow: hidden;
11+
border-bottom: 1px solid rgba(255, 157, 0, 0.1);
1212
}
1313

1414
.bsv-hero::before {
@@ -19,7 +19,7 @@
1919
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
2020
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
2121
background-size: 40px 40px;
22-
mask-image: radial-gradient(ellipse at 50% 0%, black 0%, transparent 70%);
22+
mask-image: linear-gradient(180deg, black 0%, transparent 78%);
2323
pointer-events: none;
2424
}
2525

@@ -33,68 +33,70 @@
3333
background: linear-gradient(
3434
90deg,
3535
transparent,
36-
var(--dev-cyan-glow) 30%,
37-
var(--dev-cyan) 50%,
38-
var(--dev-cyan-glow) 70%,
36+
var(--dev-orange-glow) 30%,
37+
var(--dev-orange) 50%,
38+
var(--dev-orange-glow) 70%,
3939
transparent
4040
);
4141
pointer-events: none;
4242
}
4343

4444
.bsv-hero__inner {
4545
position: relative;
46-
max-width: 760px;
46+
max-width: 980px;
4747
margin: 0 auto;
4848
z-index: 1;
4949
}
5050

5151
.bsv-hero__title {
5252
font-family: var(--dev-font-body);
53-
font-weight: 700;
54-
font-size: clamp(2.2rem, 5vw + 1rem, 4rem);
53+
font-weight: 800;
54+
font-size: 4.75rem;
5555
line-height: 1.05;
56-
letter-spacing: -0.03em;
56+
letter-spacing: 0;
5757
color: #f1f5f9;
58-
margin: 0 0 1.25rem;
58+
margin: 0 0 1.35rem;
59+
text-wrap: balance;
5960
}
6061

61-
.bsv-hero__title em {
62-
font-style: normal;
63-
color: var(--dev-cyan);
64-
text-shadow: 0 0 28px var(--dev-cyan-glow);
62+
.bsv-hero__title span {
63+
color: var(--dev-orange);
64+
text-shadow: 0 0 30px var(--dev-orange-glow);
6565
}
6666

6767
.bsv-hero__lede {
68-
font-size: 1rem;
68+
font-size: 1.15rem;
6969
line-height: 1.7;
70-
color: rgba(226, 232, 240, 0.6);
71-
max-width: 580px;
70+
color: var(--dev-fg-muted);
71+
max-width: 760px;
7272
margin: 0 auto 2.5rem;
73-
font-weight: 400;
73+
font-weight: 500;
74+
text-wrap: balance;
7475
}
7576

76-
.bsv-hero__cta {
77+
.bsv-hero .bsv-hero__cta {
7778
display: inline-flex;
7879
align-items: center;
7980
gap: 0.5rem;
80-
background: var(--dev-cyan);
81-
color: #0a0a14;
82-
padding: 0.6rem 1rem 0.6rem 1.4rem;
83-
border-radius: 6px;
81+
background: linear-gradient(180deg, var(--dev-orange-2), var(--dev-orange));
82+
color: #111018;
83+
padding: 0.8rem 1rem 0.8rem 1.45rem;
84+
border: 1px solid rgba(255, 190, 90, 0.75);
85+
border-radius: 999px;
8486
font-family: var(--dev-font-mono);
8587
font-weight: 700;
8688
font-size: 0.82rem;
8789
letter-spacing: 0.04em;
8890
text-decoration: none;
89-
box-shadow: 0 0 20px rgba(34, 211, 238, 0.2), 0 2px 8px rgba(0, 0, 0, 0.4);
91+
box-shadow: 0 0 28px rgba(255, 157, 0, 0.2), 0 12px 28px rgba(0, 0, 0, 0.4);
9092
transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
9193
}
9294

93-
.bsv-hero__cta:hover {
94-
background: #38e8ff;
95-
color: #0a0a14;
95+
.bsv-hero .bsv-hero__cta:hover {
96+
background: linear-gradient(180deg, #ffc166, #ff9d00);
97+
color: #111018;
9698
transform: translateY(-1px);
97-
box-shadow: 0 0 32px rgba(34, 211, 238, 0.35), 0 4px 16px rgba(0, 0, 0, 0.5);
99+
box-shadow: 0 0 36px rgba(255, 157, 0, 0.34), 0 16px 34px rgba(0, 0, 0, 0.48);
98100
text-decoration: none;
99101
}
100102

@@ -104,8 +106,28 @@
104106
justify-content: center;
105107
width: 26px;
106108
height: 26px;
107-
border-radius: 4px;
109+
border-radius: 999px;
108110
background: rgba(0, 0, 0, 0.2);
109111
font-weight: 700;
110112
font-size: 0.9rem;
111113
}
114+
115+
@media (max-width: 900px) {
116+
.bsv-hero {
117+
padding: 4rem 1.25rem 4.5rem;
118+
}
119+
120+
.bsv-hero__title {
121+
font-size: 3.15rem;
122+
}
123+
}
124+
125+
@media (max-width: 560px) {
126+
.bsv-hero__title {
127+
font-size: 2.35rem;
128+
}
129+
130+
.bsv-hero__lede {
131+
font-size: 1rem;
132+
}
133+
}

0 commit comments

Comments
 (0)