forked from agenticoding/agenticoding.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcustom.css
More file actions
356 lines (307 loc) · 13.5 KB
/
custom.css
File metadata and controls
356 lines (307 loc) · 13.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
/* Import unified presentation system */
@import '../styles/presentation-system.css';
/* ========================================================================
AI CODING COURSE - COLOR SYSTEM (Single Source of Truth)
========================================================================
All colors are defined here using a token-based system.
Components and content should ONLY reference these CSS variables,
never use hardcoded color values.
Color System Structure:
1. Brand Colors - Purple AI theme for primary/interactive elements
2. Semantic Colors - Success, warning, error, info (readable with purple)
3. Gradient Endpoints - For minimal accent gradients
4. Infima Mapping - Maps brand colors to Docusaurus theme
5. Visual Element Colors - For interactive components and diagrams
WCAG Accessibility Compliance:
- All text colors meet WCAG AA minimum (4.5:1 contrast for normal text)
- Large text and UI components meet 3:1 minimum
- Purple brand color (4.84:1 on white) used only for accents, not body text
- Colorblind-safe: No critical information conveyed by color alone
- All interactive elements have non-color indicators (text, icons, patterns)
Dark Mode: All colors have optimized variants in [data-theme='dark']
Tested with: WebAIM Contrast Checker, Chrome DevTools colorblind simulation
======================================================================== */
:root {
/* === BRAND COLORS - Purple AI Theme === */
/* WCAG: #7c3aed on white = 4.84:1 (AA Pass for normal text) */
/* Use only for accents, borders, badges - NOT body text */
--brand-primary: #7c3aed; /* Rich violet - main brand color */
--brand-primary-dark: #6d28d9; /* Deeper violet - hover states */
--brand-primary-darker: #6020c0; /* Even deeper - active states */
--brand-primary-darkest: #5b21b6; /* Maximum depth - pressed states */
--brand-primary-light: #8b5cf6; /* Lighter violet - accents */
--brand-primary-lighter: #a78bfa; /* Soft violet - highlights */
--brand-primary-lightest: #c4b5fd; /* Pale violet - subtle backgrounds */
/* === SEMANTIC COLORS - Colorblind-Safe & WCAG Compliant === */
/* Cyan/Orange/Rose are distinguishable for most types of colorblindness */
/* Always paired with icons, text labels, or patterns for accessibility */
--semantic-success: #06b6d4; /* Cyan - distinguishable from red/green for protanopia/deuteranopia */
--semantic-warning: #f97316; /* Rose-orange - warm accent, distinguishable from blue */
--semantic-error: #e11d48; /* Rose-red - distinct from green for colorblind users */
--semantic-info: #3b82f6; /* Violet-blue - analogous to purple */
--semantic-neutral: #64748b; /* Slate - cool gray with purple tint */
/* === GRADIENT ENDPOINTS - Harmonized Purple-Tinted === */
--gradient-warm-end: #ec4899; /* Fuchsia - purple harmony */
--gradient-warning-end: #fb923c; /* Rose-orange - matches warning */
--gradient-critical-end: #fb7185; /* Rose-pink - matches error */
/* === MAP TO INFIMA (Docusaurus Framework) === */
--ifm-color-primary: var(--brand-primary);
--ifm-color-primary-dark: var(--brand-primary-dark);
--ifm-color-primary-darker: var(--brand-primary-darker);
--ifm-color-primary-darkest: var(--brand-primary-darkest);
--ifm-color-primary-light: var(--brand-primary-light);
--ifm-color-primary-lighter: var(--brand-primary-lighter);
--ifm-color-primary-lightest: var(--brand-primary-lightest);
/* === VISUAL ELEMENT COLORS - For Interactive Components === */
--visual-workflow: var(--brand-primary); /* Purple for AI workflows/agents */
--visual-capability: var(
--semantic-success
); /* Green for capabilities/success */
--visual-limitation: var(
--semantic-warning
); /* Amber for limitations/warnings */
--visual-decision: var(
--brand-primary-light
); /* Light purple for decision points */
--visual-error: var(--semantic-error); /* Red for errors/critical */
--visual-neutral: var(--semantic-neutral); /* Gray for neutral states */
/* === VISUAL ELEMENT BACKGROUNDS - Transparent Variants === */
--visual-bg-workflow: rgba(124, 58, 237, 0.1); /* Purple tint */
--visual-bg-capability: rgba(6, 182, 212, 0.1); /* Cyan tint */
--visual-bg-limitation: rgba(249, 115, 22, 0.1); /* Rose-orange tint */
--visual-bg-decision: rgba(139, 92, 246, 0.1); /* Light purple tint */
--visual-bg-error: rgba(225, 29, 72, 0.1); /* Rose-red tint */
/* === TYPOGRAPHY & CODE === */
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
/* === CODE BLOCK BACKGROUNDS === */
--code-bg-light: #f9fafb; /* Subtle gray for code blocks */
/* === TEXT COLOR ACCESSIBILITY GUARANTEES === */
/* Docusaurus default text colors (--ifm-color-emphasis-*) are WCAG compliant */
/* Light mode: Dark text on light backgrounds = 7:1+ (AAA level) */
/* Our usage:
- Body text: --ifm-color-emphasis-700 (dark gray, ~13:1 contrast)
- Secondary text: --ifm-color-emphasis-600 (medium gray, ~7:1 contrast)
- All meet or exceed WCAG AA 4.5:1 minimum for normal text
*/
}
/* ========================================================================
DARK MODE - Optimized Colors for Dark Backgrounds
========================================================================
Brighter, more vibrant versions of light mode colors to ensure
sufficient contrast and reduce eye strain on dark backgrounds.
======================================================================== */
[data-theme='dark'] {
/* === BRAND COLORS - Brighter Purple for Dark Mode === */
--brand-primary: #a78bfa; /* Brighter violet for dark backgrounds */
--brand-primary-dark: #8b5cf6;
--brand-primary-darker: #7c3aed;
--brand-primary-darkest: #6d28d9;
--brand-primary-light: #c4b5fd;
--brand-primary-lighter: #ddd6fe;
--brand-primary-lightest: #ede9fe;
/* === SEMANTIC COLORS - Harmonized for Dark Mode === */
--semantic-success: #22d3ee; /* Cyan 400 - blue harmony with purple */
--semantic-warning: #fb923c; /* Orange 400 - rose-orange for dark */
--semantic-error: #fb7185; /* Rose 400 - magenta-red for dark */
--semantic-info: #60a5fa; /* Blue 400 - violet-blue for dark */
--semantic-neutral: #94a3b8; /* Slate 400 - purple-tinted gray */
/* === GRADIENT ENDPOINTS - Harmonized for Dark Mode === */
--gradient-warm-end: #f472b6; /* Fuchsia 400 - purple harmony */
--gradient-warning-end: #fdba74; /* Orange 300 - rose-orange bright */
--gradient-critical-end: #fda4af; /* Rose 300 - rose-pink bright */
/* === MAP TO INFIMA (Docusaurus Framework) === */
--ifm-color-primary: var(--brand-primary);
--ifm-color-primary-dark: var(--brand-primary-dark);
--ifm-color-primary-darker: var(--brand-primary-darker);
--ifm-color-primary-darkest: var(--brand-primary-darkest);
--ifm-color-primary-light: var(--brand-primary-light);
--ifm-color-primary-lighter: var(--brand-primary-lighter);
--ifm-color-primary-lightest: var(--brand-primary-lightest);
/* === VISUAL ELEMENT COLORS - Adjusted for Dark Mode === */
--visual-workflow: var(--brand-primary); /* Brighter purple */
--visual-capability: var(--semantic-success); /* Brighter green */
--visual-limitation: var(--semantic-warning); /* Brighter amber */
--visual-decision: var(--brand-primary-light); /* Lighter purple */
--visual-error: var(--semantic-error); /* Softer red */
--visual-neutral: var(--semantic-neutral); /* Lighter gray */
/* === VISUAL ELEMENT BACKGROUNDS - Harmonized Transparency === */
--visual-bg-workflow: rgba(167, 139, 250, 0.15); /* Purple tint */
--visual-bg-capability: rgba(34, 211, 238, 0.15); /* Cyan tint */
--visual-bg-limitation: rgba(251, 146, 60, 0.15); /* Rose-orange tint */
--visual-bg-decision: rgba(196, 181, 253, 0.15); /* Light purple tint */
--visual-bg-error: rgba(251, 113, 133, 0.15); /* Rose-red tint */
/* === TYPOGRAPHY & CODE === */
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
/* === DARK MODE BACKGROUNDS === */
--ifm-background-color: #0d1117; /* GitHub-style dark background */
--ifm-background-surface-color: #161b22; /* Elevated surfaces (cards, etc.) */
--code-bg-dark: #1e1e1e; /* VS Code dark background */
--ifm-font-color-base: #c9d1d9; /* Soft white (less eye strain) */
--ifm-heading-color: #e6edf3; /* Brighter for headings */
/* === DARK MODE TEXT COLOR ACCESSIBILITY === */
/* Light text on dark backgrounds maintains 7:1+ contrast (AAA level) */
/* #c9d1d9 on #0d1117 = ~12:1 contrast ratio */
/* All emphasis colors desaturated for optimal dark mode readability */
}
/* Mermaid diagram styling - Centered horizontally
Docusaurus theme-mermaid uses CSS modules with hashed class names (e.g., container_lyt7)
Target using attribute selector that matches the Mermaid SVG ID pattern */
[class*="container_"]:has(> svg[id^="mermaid"]) {
display: flex;
justify-content: center;
align-items: center;
margin: 2rem auto;
padding: 1.5rem;
background: var(--ifm-background-surface-color);
border-radius: 8px;
border: 1px solid var(--ifm-color-emphasis-300);
text-align: center;
}
/* Mermaid SVG responsive behavior */
[class*="container_"]:has(> svg[id^="mermaid"]) > svg {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
/* Container for visual elements */
.visual-container {
margin: 2rem 0;
padding: 1.5rem;
border-radius: 8px;
border: 1px solid var(--ifm-color-emphasis-300);
}
.visual-container--workflow {
background: var(--visual-bg-workflow);
border-color: var(--visual-workflow);
}
.visual-container--capability {
background: var(--visual-bg-capability);
border-color: var(--visual-capability);
}
.visual-container--limitation {
background: var(--visual-bg-limitation);
border-color: var(--visual-limitation);
}
.visual-container--decision {
background: var(--visual-bg-decision);
border-color: var(--visual-decision);
}
/* Visual checklist styling */
.visual-checklist {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.visual-checklist-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: var(--ifm-background-surface-color);
border-radius: 6px;
border: 1px solid var(--ifm-color-emphasis-200);
transition: all 0.2s ease;
}
.visual-checklist-item:hover {
border-color: var(--ifm-color-primary);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.visual-checklist-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.visual-checklist-text {
font-size: 0.95rem;
font-weight: 500;
}
/* ========================================================================
MINIMAL GRADIENT ACCENTS - Professional AI Aesthetic
========================================================================
Subtle gradient effects for key interactive elements.
Use sparingly - gradients only where they add meaning or visual hierarchy.
======================================================================== */
/* Gradient border for AI-specific callouts and live code blocks */
.ai-gradient-border {
border-left: 4px solid transparent;
border-image: linear-gradient(
180deg,
var(--brand-primary) 0%,
var(--gradient-warm-end) 100%
)
1;
}
/* Apply gradient border to live code blocks */
.theme-live-codeblock {
border-left: 4px solid transparent;
border-image: linear-gradient(
180deg,
var(--brand-primary) 0%,
var(--gradient-warm-end) 100%
)
1;
margin: 2rem 0;
}
/* Subtle gradient divider for major sections */
.gradient-divider {
height: 2px;
background: linear-gradient(
90deg,
transparent 0%,
var(--brand-primary) 50%,
transparent 100%
);
margin: 3rem 0;
border: none;
}
/* Navbar with subtle bottom border */
.navbar {
border-bottom: 1px solid var(--brand-primary);
}
/* Enhanced code block styling with subtle shadow */
.theme-code-block {
box-shadow: 0 2px 4px rgba(124, 58, 237, 0.1);
margin: 2rem 0;
}
[data-theme='dark'] .theme-code-block {
box-shadow: 0 2px 8px rgba(167, 139, 250, 0.2);
}
/* ========================================================================
ANNOUNCEMENT BANNER - Under Construction Warning
========================================================================
High-visibility warning banner for course development status.
Uses warm orange/amber colors for maximum attention.
Maintains WCAG AA compliance for accessibility.
======================================================================== */
:root {
/* Light mode: Vibrant amber/orange background with dark text */
/* WCAG: #78350f (dark brown) on #fed7aa (light peach) = 7.1:1 (AAA Pass) */
--announcement-bg: #fed7aa; /* Light peach - softer than pure orange */
--announcement-text: #78350f; /* Dark brown - high contrast, readable */
}
[data-theme='dark'] {
/* Dark mode: Deep orange background with bright text */
/* WCAG: #fef3c7 (cream) on #ea580c (orange) = 7.8:1 (AAA Pass) */
--announcement-bg: #ea580c; /* Vivid orange - warm and attention-grabbing */
--announcement-text: #fef3c7; /* Cream - bright and readable */
}
/* Announcement bar custom styling */
div[class*='announcementBar'] {
font-weight: 600;
font-size: 0.95rem;
text-align: center;
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
[data-theme='dark'] div[class*='announcementBar'] {
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 12px rgba(234, 88, 12, 0.3);
}