|
1 | | -/* ============================================================================= |
2 | | - Nextra look for Mintlify — clones the visual language of docs.wasmer.io |
3 | | - (stock `nextra-theme-docs` v4) on top of Mintlify's classic theme. |
4 | | -
|
5 | | - Reversible: restore style.css.orig.bak + docs.json.orig.bak to revert. |
6 | | - Accent lives in docs.json `colors` (currently Nextra blue #006BE6 — set it |
7 | | - back to "#d97757" there for the Edge Python orange; everything else stays). |
8 | | -
|
9 | | - Tokens extracted from nextra-theme-docs@4.6.1 + the rendered docs.wasmer.io. |
10 | | - ============================================================================= */ |
11 | | - |
12 | | -:root { |
13 | | - /* Nextra neutrals (light) */ |
14 | | - --np-border: 229 231 235; /* gray-200 hairline, ~#e5e7eb */ |
15 | | - --np-border-soft: 240 241 243; /* gray-100 */ |
16 | | - --np-code-bg: 255 255 255; /* code surface = pure white */ |
17 | | - --np-inline-bg: 246 247 249; /* inline-code chip */ |
18 | | - --np-muted: 107 114 128; /* gray-500 muted text */ |
19 | | - --np-accent: 0 107 230; /* #006BE6 Nextra blue (mirror of docs.json) */ |
20 | | - |
21 | | - --np-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, |
22 | | - "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", |
23 | | - "Segoe UI Emoji"; |
24 | | - --np-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, |
25 | | - Consolas, "Liberation Mono", "Courier New", monospace; |
26 | | - |
27 | | - --np-radius: 0.5rem; |
28 | | - --np-radius-sm: 0.375rem; |
29 | | -} |
30 | | - |
31 | | -.dark { |
32 | | - --np-border: 38 38 42; /* ~gray-800 */ |
33 | | - --np-border-soft: 31 31 35; |
34 | | - --np-code-bg: 17 17 17; /* #111 like Nextra dark */ |
35 | | - --np-inline-bg: 31 31 35; |
36 | | - --np-muted: 156 163 175; /* gray-400 */ |
37 | | - --np-accent: 77 163 255; /* #4DA3FF dark-mode blue */ |
38 | | -} |
39 | | - |
40 | | -/* ============================================================================= |
41 | | - Typography — Nextra uses the system sans/mono stacks |
42 | | - ============================================================================= */ |
43 | | -body, |
44 | | -#content-area, |
45 | | -#sidebar, |
46 | | -#table-of-contents, |
47 | | -mdx-content { |
48 | | - font-family: var(--np-font-sans); |
49 | | - -webkit-font-smoothing: antialiased; |
50 | | -} |
51 | | - |
52 | | -code, pre, kbd, samp, |
53 | | -code-block, code-group, |
54 | | -mdx-content :not(pre) > code { |
55 | | - font-family: var(--np-font-mono); |
56 | | -} |
57 | | - |
58 | | -/* Headings: bold, tight tracking like Nextra */ |
59 | | -#page-title, |
60 | | -mdx-content h1 { |
61 | | - letter-spacing: -0.025em; |
62 | | - font-weight: 700; |
63 | | -} |
64 | | -mdx-content h2 { |
65 | | - letter-spacing: -0.02em; |
66 | | - font-weight: 600; |
67 | | -} |
68 | | -mdx-content p, |
69 | | -mdx-content li { |
70 | | - line-height: 1.75; |
71 | | -} |
72 | | - |
73 | | -/* breadcrumb / eyebrow: muted gray, not the accent colour */ |
74 | | -eyebrow, |
75 | | -#content-area eyebrow { |
76 | | - color: rgb(var(--np-muted)) !important; |
77 | | - font-weight: 500; |
78 | | -} |
79 | | - |
80 | | -/* ============================================================================= |
81 | | - Top navbar — Nextra: hairline bottom border, compact search |
82 | | - ============================================================================= */ |
83 | | -#navbar, |
84 | | -#header { |
85 | | - border-bottom: 1px solid rgb(var(--np-border)); |
86 | | -} |
87 | | - |
88 | | -nav-logo, |
89 | | -.nav-logo { |
90 | | - font-size: 1.1rem !important; |
91 | | - font-weight: 700; |
92 | | - letter-spacing: -0.01em; |
93 | | -} |
94 | | - |
95 | | -/* shrink Mintlify's oversized centre search toward Nextra's compact box */ |
96 | | -#search-bar-entry { |
97 | | - max-width: 22rem; |
98 | | -} |
99 | | - |
100 | | -/* ============================================================================= |
101 | | - Left sidebar — Nextra: small font, primary-tinted active pill |
102 | | - ============================================================================= */ |
103 | | -#sidebar, |
104 | | -#sidebar-content { |
105 | | - font-size: 0.875rem; |
106 | | -} |
107 | | - |
108 | | -sidebar-group-header, |
109 | | -sidebar-title { |
110 | | - font-weight: 600; |
111 | | - letter-spacing: 0.01em; |
112 | | -} |
113 | | - |
114 | | -/* active page: light-blue pill + blue text (Mintlify gives blue text via |
115 | | - docs.json primary; we add the primary/10 background Nextra uses) */ |
116 | | -#sidebar a[data-active], |
117 | | -#sidebar a[data-active-deepest] { |
118 | | - background-color: rgb(var(--np-accent) / 0.1) !important; |
119 | | - color: rgb(var(--np-accent)) !important; |
120 | | - font-weight: 500; |
121 | | -} |
122 | | - |
123 | | -/* ============================================================================= |
124 | | - Right table of contents — muted, small |
125 | | - ============================================================================= */ |
126 | | -#table-of-contents, |
127 | | -toc { |
128 | | - font-size: 0.8rem; |
129 | | -} |
130 | | -toc-item { |
131 | | - color: rgb(var(--np-muted)); |
132 | | -} |
133 | | - |
134 | | -/* ============================================================================= |
135 | | - Code — Nextra: pure-white surface, gray-200 border, radius 0.5rem |
136 | | - ============================================================================= */ |
137 | | -code-block, |
138 | | -code-group { |
139 | | - background-color: rgb(var(--np-code-bg)) !important; |
140 | | - border: 1px solid rgb(var(--np-border)) !important; |
141 | | - border-radius: var(--np-radius) !important; |
142 | | -} |
143 | | -code-block pre, |
144 | | -code-group pre { |
145 | | - background-color: transparent !important; |
146 | | -} |
147 | | - |
148 | | -/* inline code: neutral bordered chip (not accent-coloured) */ |
149 | | -mdx-content :not(pre) > code { |
150 | | - background-color: rgb(var(--np-inline-bg)); |
151 | | - border: 1px solid rgb(var(--np-border)); |
152 | | - border-radius: var(--np-radius-sm); |
153 | | - padding: 0.1em 0.36em; |
154 | | - font-size: 0.85em; |
155 | | - color: inherit; |
156 | | -} |
157 | | - |
158 | | -/* ============================================================================= |
159 | | - Callouts (your <Note>) — Nextra: rounded, blue tint, left accent bar |
160 | | - ============================================================================= */ |
161 | | -callout { |
162 | | - border-radius: var(--np-radius) !important; |
163 | | - border: 1px solid rgb(var(--np-accent) / 0.3) !important; |
164 | | - border-left: 3px solid rgb(var(--np-accent)) !important; |
165 | | - background-color: rgb(var(--np-accent) / 0.06) !important; |
166 | | -} |
167 | | - |
168 | | -/* ============================================================================= |
169 | | - Cards (your <Card>/<CardGroup>) — Nextra: rounded, hover -> accent border |
170 | | - ============================================================================= */ |
171 | | -card { |
172 | | - border-radius: var(--np-radius) !important; |
173 | | - border: 1px solid rgb(var(--np-border)) !important; |
174 | | - transition: border-color 0.15s ease, box-shadow 0.15s ease; |
175 | | -} |
176 | | -card:hover { |
177 | | - border-color: rgb(var(--np-accent) / 0.6) !important; |
178 | | - box-shadow: 0 1px 3px rgb(0 0 0 / 0.06); |
179 | | -} |
180 | | - |
181 | | -/* ============================================================================= |
182 | | - Tables — hairline borders, subtle header fill, rounded container |
183 | | - ============================================================================= */ |
184 | | -mdx-content table { |
185 | | - border: 1px solid rgb(var(--np-border)); |
186 | | - border-radius: var(--np-radius); |
187 | | - border-collapse: separate; |
188 | | - border-spacing: 0; |
189 | | - overflow: hidden; |
190 | | - font-size: 0.9rem; |
191 | | -} |
192 | | -mdx-content th { |
193 | | - background-color: rgb(var(--np-border-soft)); |
194 | | - font-weight: 600; |
195 | | -} |
196 | | -mdx-content th, |
197 | | -mdx-content td { |
198 | | - border-bottom: 1px solid rgb(var(--np-border-soft)); |
199 | | -} |
200 | | -mdx-content tr:last-child td { |
201 | | - border-bottom: 0; |
202 | | -} |
203 | | - |
204 | | -/* ============================================================================= |
205 | | - Footer / pagination polish |
206 | | - ============================================================================= */ |
207 | | -#footer, |
208 | | -footer { |
209 | | - border-top: 1px solid rgb(var(--np-border)); |
210 | | -} |
211 | | -mdx-content hr { |
212 | | - border-color: rgb(var(--np-border-soft)); |
213 | | -} |
| 1 | +/* Resize the font of navegation logo. */ |
| 2 | + |
| 3 | +.nav-logo { font-size: 1.1rem !important; } |
0 commit comments