Skip to content

Commit 3a760af

Browse files
zTgxzTgx
committed
style(docs): update documentation site styling and navigation
- add Font Awesome stylesheet for icon support - add Python and Rust SDK links to navigation bar - remove examples link from navigation bar - update color scheme from amber to rose with new primary colors (#AF788B for light mode, #C9A0AE for dark mode) - adjust navbar padding and layout for better alignment - remove footer configuration and related CSS - implement new hero banner design with rose color scheme - create responsive layout with flex-based positioning - add feature pills and principles card to homepage - update syntax highlighting colors for better contrast - add prevent-scroll functionality for homepage hero section
1 parent 0f6b011 commit 3a760af

6 files changed

Lines changed: 321 additions & 1583 deletions

File tree

‎docs/docusaurus.config.ts‎

Lines changed: 6 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ const config: Config = {
1616
url: 'https://vectorless.dev',
1717
baseUrl: '/',
1818

19+
stylesheets: [
20+
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css',
21+
],
22+
1923
organizationName: 'vectorlessflow',
2024
projectName: 'vectorless',
2125

@@ -69,73 +73,12 @@ const config: Config = {
6973
target: '_self' // This makes the logo click follow the link in the same window
7074
},
7175
items: [
76+
{to: '/docs/sdk/python', label: 'Python', position: 'left'},
77+
{to: '/docs/sdk/rust', label: 'Rust', position: 'left'},
7278
{to: '/docs/intro', label: 'Documentation', position: 'left'},
73-
// {
74-
// href: 'https://github.com/vectorlessflow/vectorless/tree/main/examples',
75-
// label: 'Examples',
76-
// position: 'left',
77-
// target: '_self',
78-
// },
7979
{to: '/blog', label: 'Blog', position: 'left'},
8080
],
8181
},
82-
footer: {
83-
style: 'light',
84-
links: [
85-
{
86-
title: 'Product',
87-
items: [
88-
{
89-
label: 'Getting Started',
90-
to: '/docs/intro',
91-
},
92-
{
93-
label: 'Documentation',
94-
to: '/docs/intro',
95-
},
96-
{
97-
label: 'Blog',
98-
to: '/blog',
99-
},
100-
],
101-
},
102-
{
103-
title: 'Integrations',
104-
items: [
105-
{
106-
label: 'Python SDK',
107-
href: 'https://pypi.org/project/vectorless/',
108-
},
109-
{
110-
label: 'Rust Crate',
111-
href: 'https://crates.io/crates/vectorless',
112-
},
113-
{
114-
label: 'API Reference',
115-
to: '/docs/api-reference',
116-
},
117-
],
118-
},
119-
{
120-
title: 'Community',
121-
items: [
122-
{
123-
label: 'GitHub',
124-
href: 'https://github.com/vectorlessflow/vectorless',
125-
},
126-
{
127-
label: 'Report a Bug',
128-
href: 'https://github.com/vectorlessflow/vectorless/issues',
129-
},
130-
{
131-
label: 'Apache 2.0 License',
132-
href: 'https://github.com/vectorlessflow/vectorless/blob/main/LICENSE',
133-
},
134-
],
135-
},
136-
],
137-
copyright: `Copyright \u00A9 ${new Date().getFullYear()} Vectorless`,
138-
},
13982
prism: {
14083
theme: prismThemes.github,
14184
darkTheme: prismThemes.dracula,

‎docs/src/css/custom.css‎

Lines changed: 64 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,66 @@
11
/**
22
* Any CSS included here will be global. The classic template
3-
* bundles Infima by default. Infima is a CSS framework designed to
3+
* bundles Infira by default. Infima is a CSS framework designed to
44
* work well for content-centric websites.
55
*
6-
* Color scheme: dark-first with amber accent.
6+
* Color scheme: rose accent.
77
*/
88

99
:root {
10-
--primary: #F59E0B;
11-
--primary-dark: #D97706;
12-
--primary-deeper: #B45309;
13-
--primary-light: #FBBF24;
14-
--primary-soft: rgba(245, 158, 11, 0.12);
10+
--primary: #AF788B;
11+
--primary-dark: #8B5E6F;
12+
--primary-deeper: #6D4A58;
13+
--primary-light: #C9A0AE;
14+
--primary-soft: rgba(175, 120, 139, 0.12);
1515
--accent-tech: #5E6AD2;
1616
--accent-green: #10B981;
17-
--text: #1F2937;
18-
--text-light: #6B7280;
17+
--text: #1E293B;
18+
--text-light: #5B6E8C;
1919
--bg: #FFFFFF;
20-
--bg-secondary: #F9FAFB;
21-
--bg-offset: #F3F4F6;
20+
--bg-secondary: #F6F8FA;
21+
--bg-offset: #F6F8FA;
2222
--card-bg: #FFFFFF;
23-
--border: #E5E7EB;
23+
--border: #E2E8F0;
2424
--code-bg: #0F172A;
2525
--code-text: #E2E8F0;
26-
--code-comment: #6B7280;
27-
--code-keyword: #5E6AD2;
28-
29-
--ifm-color-primary: #F59E0B;
30-
--ifm-color-primary-dark: #D97706;
31-
--ifm-color-primary-darker: #B45309;
32-
--ifm-color-primary-darkest: #92400E;
33-
--ifm-color-primary-light: #FBBF24;
34-
--ifm-color-primary-lighter: #FCD34D;
35-
--ifm-color-primary-lightest: #FDE68A;
26+
--code-comment: #6272A4;
27+
--code-keyword: #FF79C6;
28+
29+
--ifm-color-primary: #AF788B;
30+
--ifm-color-primary-dark: #8B5E6F;
31+
--ifm-color-primary-darker: #6D4A58;
32+
--ifm-color-primary-darkest: #573D4A;
33+
--ifm-color-primary-light: #C9A0AE;
34+
--ifm-color-primary-lighter: #D4B3BF;
35+
--ifm-color-primary-lightest: #E6CDD6;
3636
--ifm-code-font-size: 95%;
3737
--ifm-background-color: #FFFFFF;
38-
--docusaurus-highlighted-code-line-bg: rgba(245, 158, 11, 0.08);
38+
--docusaurus-highlighted-code-line-bg: rgba(175, 120, 139, 0.08);
3939
}
4040

4141
[data-theme='dark'] {
42-
--text: #EDF2F8;
43-
--text-light: #9AA4BF;
44-
--bg: #141720;
45-
--bg-secondary: #1A1F27;
46-
--bg-offset: #1A1F27;
47-
--card-bg: #1E2430;
48-
--border: #2A3040;
49-
--primary-soft: rgba(245, 158, 11, 0.12);
50-
--code-bg: #0E1117;
51-
--code-text: #CBD5E1;
52-
--code-comment: #6B7280;
53-
--code-keyword: #5E6AD2;
54-
55-
--ifm-color-primary: #FBBF24;
56-
--ifm-color-primary-dark: #F59E0B;
57-
--ifm-color-primary-darker: #D97706;
58-
--ifm-color-primary-darkest: #B45309;
59-
--ifm-color-primary-light: #FCD34D;
60-
--ifm-color-primary-lighter: #FDE68A;
61-
--ifm-color-primary-lightest: #FEF3C7;
62-
--docusaurus-highlighted-code-line-bg: rgba(245, 158, 11, 0.15);
63-
--ifm-background-color: #141720;
42+
--text: #EEF2FF;
43+
--text-light: #8B9AB0;
44+
--bg: #0A0C10;
45+
--bg-secondary: #11151A;
46+
--bg-offset: #11151A;
47+
--card-bg: #131720;
48+
--border: #1E293B;
49+
--primary-soft: rgba(201, 160, 174, 0.15);
50+
--code-bg: #010409;
51+
--code-text: #E2E8F0;
52+
--code-comment: #6272A4;
53+
--code-keyword: #FF79C6;
54+
55+
--ifm-color-primary: #C9A0AE;
56+
--ifm-color-primary-dark: #AF788B;
57+
--ifm-color-primary-darker: #8B5E6F;
58+
--ifm-color-primary-darkest: #6D4A58;
59+
--ifm-color-primary-light: #D4B3BF;
60+
--ifm-color-primary-lighter: #E0C5CE;
61+
--ifm-color-primary-lightest: #E6CDD6;
62+
--docusaurus-highlighted-code-line-bg: rgba(175, 120, 139, 0.15);
63+
--ifm-background-color: #0A0C10;
6464
}
6565

6666
/* ===== Navbar ===== */
@@ -69,13 +69,26 @@
6969
border-bottom: none !important;
7070
box-shadow: none !important;
7171
height: 68px !important;
72-
padding: 0 1.5rem !important;
72+
padding: 0 !important;
7373
}
7474

7575
.navbar__inner {
7676
height: 68px !important;
7777
max-width: 1280px;
7878
margin: 0 auto;
79+
display: flex;
80+
align-items: center;
81+
width: 100%;
82+
}
83+
84+
.navbar__items {
85+
flex: 1;
86+
display: flex;
87+
justify-content: center;
88+
}
89+
90+
.navbar__items--right {
91+
flex: 0;
7992
}
8093

8194
.navbar__brand {
@@ -109,58 +122,11 @@
109122
color: var(--primary) !important;
110123
}
111124

112-
[data-theme='dark'] .navbar {
113-
background-color: var(--bg) !important;
114-
border-bottom-color: var(--border) !important;
115-
}
116-
117-
[data-theme='dark'] .navbar__title {
118-
color: var(--text) !important;
119-
}
120-
121-
[data-theme='dark'] .navbar__link {
122-
color: var(--text-light) !important;
123-
}
124-
125-
[data-theme='dark'] .navbar__link:hover {
126-
color: var(--primary) !important;
127-
}
128-
129-
[data-theme='dark'] .navbar__link--active {
130-
color: var(--primary) !important;
131-
}
132-
133-
/* ===== Footer ===== */
134-
.footer {
135-
background-color: transparent !important;
136-
padding: 5rem 1.5rem 1.5rem;
137-
}
138-
139-
.footer__title {
140-
font-size: 0.85rem;
141-
font-weight: 700;
142-
text-transform: uppercase;
143-
letter-spacing: 0.08em;
144-
color: var(--text);
145-
margin-bottom: 1rem;
146-
}
147-
148-
.footer__link-item {
149-
font-size: 0.92rem;
150-
color: var(--text-light);
151-
line-height: 2;
152-
transition: color 0.15s;
153-
}
154-
155-
.footer__link-item:hover {
156-
color: var(--primary);
157-
}
158-
159-
.footer__link-item svg {
160-
display: none;
125+
/* ===== Prevent scroll on homepage ===== */
126+
html:has(.heroBanner) {
127+
overflow: hidden;
161128
}
162129

163-
.footer__copyright {
164-
font-size: 0.88rem;
165-
color: var(--text-light);
130+
html:has(.heroBanner) body {
131+
overflow: hidden;
166132
}

0 commit comments

Comments
 (0)