Skip to content

Commit b50096b

Browse files
dannywillemsdannywillems
committed
Website: update design, using Claude
1 parent ab6d967 commit b50096b

File tree

7 files changed

+949
-75
lines changed

7 files changed

+949
-75
lines changed

‎website/docusaurus.config.ts‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,13 @@ const config: Config = {
6868

6969
themeConfig: {
7070
// Replace with your project's social card
71-
image: 'img/docusaurus-social-card.jpg',
71+
image: 'img/openmina-social-card.svg',
72+
// Default to dark mode
73+
colorMode: {
74+
defaultMode: 'dark',
75+
disableSwitch: false,
76+
respectPrefersColorScheme: false,
77+
},
7278

7379
// SEO improvements and metadata
7480
metadata: [
@@ -80,14 +86,14 @@ const config: Config = {
8086
{property: 'og:type', content: 'website'},
8187
{property: 'og:title', content: 'OpenMina Documentation'},
8288
{property: 'og:description', content: 'OpenMina is a Rust implementation of the Mina Protocol - a lightweight blockchain using zero-knowledge proofs.'},
83-
{property: 'og:image', content: 'https://o1-labs.github.io/openmina/img/docusaurus-social-card.jpg'},
89+
{property: 'og:image', content: 'https://o1-labs.github.io/openmina/img/openmina-social-card.svg'},
8490
{property: 'twitter:card', content: 'summary_large_image'},
8591
{property: 'twitter:title', content: 'OpenMina Documentation'},
8692
{property: 'twitter:description', content: 'OpenMina is a Rust implementation of the Mina Protocol - a lightweight blockchain using zero-knowledge proofs.'},
87-
{property: 'twitter:image', content: 'https://o1-labs.github.io/openmina/img/docusaurus-social-card.jpg'},
93+
{property: 'twitter:image', content: 'https://o1-labs.github.io/openmina/img/openmina-social-card.svg'},
8894
],
8995
navbar: {
90-
title: 'OpenMina',
96+
title: '',
9197
logo: {
9298
alt: 'OpenMina Logo',
9399
src: 'img/logo.svg',
@@ -105,12 +111,6 @@ const config: Config = {
105111
position: 'left',
106112
label: 'Developers',
107113
},
108-
{
109-
type: 'docSidebar',
110-
sidebarId: 'researchersSidebar',
111-
position: 'left',
112-
label: 'Researchers',
113-
},
114114
{
115115
href: 'https://o1-labs.github.io/openmina/api-docs/',
116116
label: 'API Docs',
@@ -142,10 +142,6 @@ const config: Config = {
142142
label: 'Developers',
143143
to: '/docs/developers/architecture',
144144
},
145-
{
146-
label: 'Researchers',
147-
to: '/docs/researchers/protocol',
148-
},
149145
{
150146
label: 'API Documentation',
151147
href: 'https://o1-labs.github.io/openmina/api-docs/',

‎website/sidebars.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const sidebars: SidebarsConfig = {
1717
nodeRunnersSidebar: [
1818
{
1919
type: 'category',
20-
label: 'Getting Started',
20+
label: 'Introduction',
2121
items: [
2222
'node-runners/getting-started',
2323
'node-runners/docker-installation',
@@ -61,7 +61,7 @@ const sidebars: SidebarsConfig = {
6161
developersSidebar: [
6262
{
6363
type: 'category',
64-
label: 'Getting Started',
64+
label: 'Introduction',
6565
items: [
6666
'developers/getting-started',
6767
'developers/updating-ocaml-node',

‎website/src/css/custom.css‎

Lines changed: 276 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,285 @@
11
/**
2-
* Any CSS included here will be global. The classic template
3-
* bundles Infima by default. Infima is a CSS framework designed to
4-
* work well for content-centric websites.
2+
* OpenMina Documentation Theme
3+
* Mina Protocol and o1js inspired design system
54
*/
65

7-
/* You can override the default Infima variables here. */
6+
/* Import Inter font for better typography */
7+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
8+
9+
/* Color Tokens - Mina/o1js inspired palette */
810
:root {
9-
--ifm-color-primary: #2e8555;
10-
--ifm-color-primary-dark: #29784c;
11-
--ifm-color-primary-darker: #277148;
12-
--ifm-color-primary-darkest: #205d3b;
13-
--ifm-color-primary-light: #33925d;
14-
--ifm-color-primary-lighter: #359962;
15-
--ifm-color-primary-lightest: #3cad6e;
11+
/* Light theme colors (softer gradients for light mode) */
12+
--bg: #ffffff;
13+
--surface: #f7f7f9;
14+
--text: #0b0c10;
15+
--muted: #4e4e4e;
16+
--accent: #7a3cff; /* purple - softer for light mode */
17+
--accent-2: #ff4da6; /* magenta - softer for light mode */
18+
--accent-3: #00a6cc; /* cyan - softer for light mode */
19+
--accent-orange: #ff8c42; /* Mina Protocol orange - softer for light mode */
20+
--border: rgba(0,0,0,0.08);
21+
--grad-primary: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
22+
--grad-orange: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-2) 100%);
23+
24+
/* Docusaurus overrides */
25+
--ifm-color-primary: #7a3cff;
26+
--ifm-color-primary-dark: #6930e6;
27+
--ifm-color-primary-darker: #6228d9;
28+
--ifm-color-primary-darkest: #5121b3;
29+
--ifm-color-primary-light: #8b48ff;
30+
--ifm-color-primary-lighter: #9356ff;
31+
--ifm-color-primary-lightest: #ab70ff;
1632
--ifm-code-font-size: 95%;
17-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
33+
--docusaurus-highlighted-code-line-bg: rgba(122, 60, 255, 0.1);
34+
35+
/* Typography */
36+
--ifm-font-family-base: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
37+
--ifm-heading-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
38+
--ifm-heading-font-weight: 600;
39+
--ifm-font-weight-bold: 600;
40+
41+
/* Global spacing and sizing */
42+
--ifm-global-radius: 12px;
43+
--ifm-button-border-radius: 12px;
44+
--ifm-navbar-height: 72px;
1845
}
1946

20-
/* For readability concerns, you should choose a lighter palette in dark mode. */
47+
/* Dark theme - Mina Protocol inspired */
2148
[data-theme='dark'] {
22-
--ifm-color-primary: #25c2a0;
23-
--ifm-color-primary-dark: #21af90;
24-
--ifm-color-primary-darker: #1fa588;
25-
--ifm-color-primary-darkest: #1a8870;
26-
--ifm-color-primary-light: #29d5b0;
27-
--ifm-color-primary-lighter: #32d8b4;
28-
--ifm-color-primary-lightest: #4fddbf;
29-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
49+
--bg: #0b0c10;
50+
--surface: #121317;
51+
--text: #ffffff;
52+
--muted: #a0a0a0;
53+
--accent: #b14cff; /* purple */
54+
--accent-2: #ff007a; /* magenta */
55+
--accent-3: #00cfff; /* cyan */
56+
--accent-orange: #ff6b35; /* Mina Protocol orange */
57+
--border: rgba(255,255,255,0.08);
58+
--grad-primary: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
59+
--grad-orange: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-2) 100%);
60+
61+
/* Docusaurus dark theme overrides */
62+
--ifm-color-primary: #b14cff;
63+
--ifm-color-primary-dark: #a033ff;
64+
--ifm-color-primary-darker: #9626ff;
65+
--ifm-color-primary-darkest: #7b00d9;
66+
--ifm-color-primary-light: #c266ff;
67+
--ifm-color-primary-lighter: #ce7aff;
68+
--ifm-color-primary-lightest: #e6b3ff;
69+
--docusaurus-highlighted-code-line-bg: rgba(177, 76, 255, 0.2);
70+
71+
/* Background colors */
72+
--ifm-background-color: var(--bg);
73+
--ifm-background-surface-color: var(--surface);
74+
--ifm-color-content: var(--text);
75+
--ifm-color-content-secondary: var(--muted);
76+
77+
/* Navbar */
78+
--ifm-navbar-background-color: rgba(18, 19, 23, 0.95);
79+
--ifm-navbar-link-color: var(--text);
80+
--ifm-navbar-link-hover-color: var(--accent-3);
81+
82+
/* Footer */
83+
--ifm-footer-background-color: var(--surface);
84+
--ifm-footer-color: var(--muted);
85+
--ifm-footer-link-color: var(--text);
86+
--ifm-footer-link-hover-color: var(--accent-3);
87+
88+
/* Cards */
89+
--ifm-card-background-color: var(--surface);
90+
--ifm-card-border-radius: 16px;
91+
}
92+
93+
/* Global typography improvements */
94+
html {
95+
font-family: var(--ifm-font-family-base);
96+
-webkit-font-smoothing: antialiased;
97+
-moz-osx-font-smoothing: grayscale;
98+
}
99+
100+
/* Enhanced navbar styling */
101+
.navbar {
102+
backdrop-filter: blur(8px);
103+
border-bottom: 2px solid transparent;
104+
border-image: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%) 1;
105+
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
106+
position: relative;
107+
}
108+
109+
.navbar::after {
110+
content: '';
111+
position: absolute;
112+
bottom: 0;
113+
left: 0;
114+
right: 0;
115+
height: 2px;
116+
background: linear-gradient(90deg, transparent 0%, var(--accent) 15%, var(--accent-orange) 35%, var(--accent-2) 55%, var(--accent-3) 80%, transparent 100%);
117+
opacity: 0.6;
118+
}
119+
120+
[data-theme='dark'] .navbar {
121+
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
122+
}
123+
124+
/* Navbar links with accent color on hover */
125+
.navbar__link:hover {
126+
color: var(--accent-3);
127+
}
128+
129+
/* Logo adjustments */
130+
.navbar__brand {
131+
margin-right: 2rem;
132+
}
133+
134+
.navbar__logo {
135+
height: 28px;
136+
width: auto;
137+
margin-right: 0.5rem;
138+
}
139+
140+
/* Logo visibility in dark mode */
141+
[data-theme='dark'] .navbar__logo {
142+
filter: brightness(0) invert(1);
143+
opacity: 0.9;
144+
}
145+
146+
[data-theme='dark'] .navbar__logo:hover {
147+
opacity: 1;
148+
filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(177, 76, 255, 0.4));
149+
}
150+
151+
/* Enhanced button styles */
152+
.button {
153+
font-weight: 500;
154+
transition: all 0.2s ease;
155+
}
156+
157+
.button--primary {
158+
background: var(--grad-primary);
159+
border: none;
160+
box-shadow: 0 2px 8px rgba(177, 76, 255, 0.3);
161+
}
162+
163+
.button--primary:hover {
164+
background: var(--grad-orange);
165+
transform: translateY(-1px);
166+
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
167+
}
168+
169+
/* Enhanced cards */
170+
.card {
171+
background: var(--surface);
172+
border: 1px solid var(--border);
173+
border-radius: var(--ifm-card-border-radius);
174+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
175+
transition: all 0.2s ease;
176+
}
177+
178+
.card:hover {
179+
transform: translateY(-2px);
180+
box-shadow: 0 4px 16px rgba(177, 76, 255, 0.2);
181+
border-color: rgba(177, 76, 255, 0.2);
182+
}
183+
184+
/* Code blocks */
185+
.prism-code {
186+
border-radius: 12px;
187+
}
188+
189+
/* Sidebar improvements */
190+
.theme-doc-sidebar-container {
191+
border-right: 2px solid transparent;
192+
border-image: linear-gradient(180deg, transparent 0%, var(--accent) 25%, var(--accent-orange) 50%, var(--accent-2) 75%, transparent 100%) 1;
193+
position: relative;
194+
}
195+
196+
.theme-doc-sidebar-container::after {
197+
content: '';
198+
position: absolute;
199+
top: 0;
200+
right: 0;
201+
bottom: 0;
202+
width: 2px;
203+
background: linear-gradient(180deg, transparent 0%, var(--accent) 25%, var(--accent-orange) 50%, var(--accent-2) 75%, transparent 100%);
204+
opacity: 0.3;
205+
}
206+
207+
/* Link improvements */
208+
a {
209+
color: var(--accent-3);
210+
text-decoration: none;
211+
}
212+
213+
a:hover {
214+
color: var(--accent-3);
215+
text-decoration: underline;
216+
}
217+
218+
/* Focus styles for accessibility */
219+
.navbar__link:focus,
220+
.button:focus,
221+
.card:focus,
222+
a:focus {
223+
outline: 2px solid var(--accent-3);
224+
outline-offset: 2px;
225+
}
226+
227+
/* Hero section background gradients for pages */
228+
.hero {
229+
background: linear-gradient(135deg, var(--bg) 0%, var(--surface) 100%);
230+
}
231+
232+
/* Improved table of contents */
233+
.table-of-contents {
234+
border-left: 2px solid transparent;
235+
border-image: var(--grad-primary) 1;
236+
}
237+
238+
.table-of-contents__link--active {
239+
color: var(--accent);
240+
border-left: 2px solid var(--accent);
241+
background: linear-gradient(90deg, rgba(177, 76, 255, 0.1) 0%, transparent 100%);
242+
margin-left: -2px;
243+
padding-left: 8px;
244+
border-radius: 0 4px 4px 0;
245+
}
246+
247+
/* Enhanced badges and pills */
248+
.badge {
249+
background: var(--surface);
250+
color: var(--text);
251+
border: 1px solid var(--border);
252+
border-radius: 8px;
253+
}
254+
255+
.badge--primary {
256+
background: var(--grad-primary);
257+
color: white;
258+
border: none;
259+
}
260+
261+
/* Responsive improvements */
262+
@media screen and (max-width: 996px) {
263+
.navbar__toggle {
264+
color: var(--text);
265+
}
266+
267+
.navbar-sidebar {
268+
background: var(--bg);
269+
border-right: 1px solid var(--border);
270+
}
271+
}
272+
273+
/* Performance optimization - reduce motion for users who prefer it */
274+
@media (prefers-reduced-motion: reduce) {
275+
.button,
276+
.card,
277+
.navbar__link {
278+
transition: none;
279+
}
280+
281+
.button--primary:hover,
282+
.card:hover {
283+
transform: none;
284+
}
30285
}

0 commit comments

Comments
 (0)