Skip to content

Commit 0d8d043

Browse files
unclecodeunclecode
committed
feat(docs): add brand book and page copy functionality
- Add comprehensive brand book with color system, typography, components - Add page copy dropdown with markdown copy/view functionality - Update mkdocs.yml with new assets and branding navigation - Use terminal-style ASCII icons and condensed menu design
1 parent 3fe49a7 commit 0d8d043

File tree

4 files changed

+2111
-3
lines changed

4 files changed

+2111
-3
lines changed

‎docs/md_v2/assets/page_actions.css‎

Lines changed: 388 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,388 @@
1+
/* ==== File: assets/page_actions.css ==== */
2+
/* Page Actions Dropdown - Terminal Style */
3+
4+
/* Wrapper - positioned in content area */
5+
.page-actions-wrapper {
6+
position: absolute;
7+
top: 1.3rem;
8+
right: 1rem;
9+
z-index: 1000;
10+
}
11+
12+
/* Floating Action Button */
13+
.page-actions-button {
14+
position: relative;
15+
display: inline-flex;
16+
align-items: center;
17+
gap: 0.5rem;
18+
background: #3f3f44;
19+
border: 1px solid #50ffff;
20+
color: #e8e9ed;
21+
padding: 0.75rem 1rem;
22+
border-radius: 6px;
23+
font-family: 'Dank Mono', Monaco, monospace;
24+
font-size: 0.875rem;
25+
cursor: pointer;
26+
transition: all 0.2s ease;
27+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
28+
}
29+
30+
.page-actions-button:hover {
31+
background: #50ffff;
32+
color: #070708;
33+
transform: translateY(-2px);
34+
box-shadow: 0 6px 16px rgba(80, 255, 255, 0.3);
35+
}
36+
37+
.page-actions-button::before {
38+
content: '▤';
39+
font-size: 1.2rem;
40+
line-height: 1;
41+
}
42+
43+
.page-actions-button::after {
44+
content: '▼';
45+
font-size: 0.6rem;
46+
transition: transform 0.2s ease;
47+
}
48+
49+
.page-actions-button.active::after {
50+
transform: rotate(180deg);
51+
}
52+
53+
/* Dropdown Menu */
54+
.page-actions-dropdown {
55+
position: absolute;
56+
top: 3.5rem;
57+
right: 0;
58+
z-index: 1001;
59+
background: #1a1a1a;
60+
border: 1px solid #3f3f44;
61+
border-radius: 8px;
62+
min-width: 280px;
63+
opacity: 0;
64+
visibility: hidden;
65+
transform: translateY(-10px);
66+
transition: all 0.2s ease;
67+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
68+
overflow: hidden;
69+
}
70+
71+
.page-actions-dropdown.active {
72+
opacity: 1;
73+
visibility: visible;
74+
transform: translateY(0);
75+
}
76+
77+
.page-actions-dropdown::before {
78+
content: '';
79+
position: absolute;
80+
top: -8px;
81+
right: 1.5rem;
82+
width: 0;
83+
height: 0;
84+
border-left: 8px solid transparent;
85+
border-right: 8px solid transparent;
86+
border-bottom: 8px solid #3f3f44;
87+
}
88+
89+
/* Menu Header */
90+
.page-actions-header {
91+
background: #3f3f44;
92+
padding: 0.5rem 0.75rem;
93+
border-bottom: 1px solid #50ffff;
94+
font-family: 'Dank Mono', Monaco, monospace;
95+
font-size: 0.7rem;
96+
color: #a3abba;
97+
text-transform: uppercase;
98+
letter-spacing: 0.05em;
99+
}
100+
101+
.page-actions-header::before {
102+
content: '┌─';
103+
margin-right: 0.5rem;
104+
color: #50ffff;
105+
}
106+
107+
/* Menu Items */
108+
.page-actions-menu {
109+
list-style: none;
110+
margin: 0;
111+
padding: 0.25rem 0;
112+
}
113+
114+
.page-action-item {
115+
display: block;
116+
padding: 0;
117+
}
118+
119+
ul>li.page-action-item::after{
120+
content: '';
121+
}
122+
.page-action-link {
123+
display: flex;
124+
align-items: center;
125+
gap: 0.5rem;
126+
padding: 0.5rem 0.75rem;
127+
color: #e8e9ed;
128+
text-decoration: none !important;
129+
font-family: 'Dank Mono', Monaco, monospace;
130+
font-size: 0.8rem;
131+
transition: all 0.15s ease;
132+
cursor: pointer;
133+
border-left: 3px solid transparent;
134+
}
135+
136+
.page-action-link:hover:not(.disabled) {
137+
background: #3f3f44;
138+
border-left-color: #50ffff;
139+
color: #50ffff;
140+
text-decoration: none;
141+
}
142+
143+
.page-action-link.disabled {
144+
opacity: 0.5;
145+
cursor: not-allowed;
146+
}
147+
148+
.page-action-link.disabled:hover {
149+
background: transparent;
150+
color: #e8e9ed;
151+
text-decoration: none;
152+
}
153+
154+
/* Icons using ASCII/Terminal characters */
155+
.page-action-icon {
156+
font-size: 1rem;
157+
width: 1.5rem;
158+
text-align: center;
159+
font-weight: bold;
160+
color: #50ffff;
161+
}
162+
163+
.page-action-link:hover:not(.disabled) .page-action-icon {
164+
color: #50ffff;
165+
}
166+
167+
.page-action-link.disabled .page-action-icon {
168+
color: #666;
169+
}
170+
171+
/* Specific icons */
172+
.icon-copy::before {
173+
content: '⎘'; /* Copy/duplicate symbol */
174+
}
175+
176+
.icon-view::before {
177+
content: '⎙'; /* Document symbol */
178+
}
179+
180+
.icon-ai::before {
181+
content: '⚡'; /* Lightning/AI symbol */
182+
}
183+
184+
/* Action Text */
185+
.page-action-text {
186+
flex: 1;
187+
}
188+
189+
.page-action-label {
190+
display: block;
191+
font-weight: 600;
192+
margin-bottom: 0.05rem;
193+
line-height: 1.3;
194+
}
195+
196+
.page-action-description {
197+
display: block;
198+
font-size: 0.7rem;
199+
color: #a3abba;
200+
line-height: 1.2;
201+
}
202+
203+
/* Badge */
204+
.page-action-badge {
205+
display: inline-block;
206+
background: #f59e0b;
207+
color: #070708;
208+
padding: 0.125rem 0.5rem;
209+
border-radius: 12px;
210+
font-size: 0.65rem;
211+
font-weight: 600;
212+
text-transform: uppercase;
213+
letter-spacing: 0.05em;
214+
}
215+
216+
/* External link indicator */
217+
.page-action-external::after {
218+
content: '→';
219+
margin-left: 0.25rem;
220+
font-size: 0.75rem;
221+
}
222+
223+
/* Divider */
224+
.page-actions-divider {
225+
height: 1px;
226+
background: #3f3f44;
227+
margin: 0.25rem 0;
228+
}
229+
230+
/* Success/Copy feedback */
231+
.page-action-copied {
232+
background: #50ff50 !important;
233+
color: #070708 !important;
234+
border-left-color: #50ff50 !important;
235+
}
236+
237+
.page-action-copied .page-action-icon {
238+
color: #070708 !important;
239+
}
240+
241+
.page-action-copied .page-action-icon::before {
242+
content: '✓';
243+
}
244+
245+
/* Mobile Responsive */
246+
@media (max-width: 768px) {
247+
.page-actions-wrapper {
248+
top: 0.5rem;
249+
right: 0.5rem;
250+
}
251+
252+
.page-actions-button {
253+
padding: 0.6rem 0.8rem;
254+
font-size: 0.8rem;
255+
}
256+
257+
.page-actions-dropdown {
258+
min-width: 260px;
259+
max-width: calc(100vw - 2rem);
260+
right: -0.5rem;
261+
}
262+
263+
.page-action-link {
264+
padding: 0.6rem 0.8rem;
265+
font-size: 0.8rem;
266+
}
267+
268+
.page-action-description {
269+
font-size: 0.7rem;
270+
}
271+
}
272+
273+
/* Animation for tooltip/notification */
274+
@keyframes slideInFromTop {
275+
from {
276+
transform: translateY(-20px);
277+
opacity: 0;
278+
}
279+
to {
280+
transform: translateY(0);
281+
opacity: 1;
282+
}
283+
}
284+
285+
.page-actions-notification {
286+
position: fixed;
287+
top: calc(var(--header-height) + 0.5rem);
288+
right: 50%;
289+
transform: translateX(50%);
290+
z-index: 1100;
291+
background: #50ff50;
292+
color: #070708;
293+
padding: 0.75rem 1.5rem;
294+
border-radius: 6px;
295+
font-family: 'Dank Mono', Monaco, monospace;
296+
font-size: 0.875rem;
297+
font-weight: 600;
298+
box-shadow: 0 4px 12px rgba(80, 255, 80, 0.4);
299+
animation: slideInFromTop 0.3s ease;
300+
pointer-events: none;
301+
}
302+
303+
.page-actions-notification::before {
304+
content: '✓ ';
305+
margin-right: 0.5rem;
306+
}
307+
308+
/* Hide on print */
309+
@media print {
310+
.page-actions-button,
311+
.page-actions-dropdown {
312+
display: none !important;
313+
}
314+
}
315+
316+
/* Overlay for mobile */
317+
.page-actions-overlay {
318+
display: none;
319+
position: fixed;
320+
top: 0;
321+
left: 0;
322+
right: 0;
323+
bottom: 0;
324+
background: rgba(0, 0, 0, 0.5);
325+
z-index: 998;
326+
opacity: 0;
327+
transition: opacity 0.2s ease;
328+
}
329+
330+
.page-actions-overlay.active {
331+
display: block;
332+
opacity: 1;
333+
}
334+
335+
@media (max-width: 768px) {
336+
.page-actions-overlay {
337+
display: block;
338+
}
339+
}
340+
341+
/* Keyboard focus styles */
342+
.page-action-link:focus {
343+
outline: 2px solid #50ffff;
344+
outline-offset: -2px;
345+
}
346+
347+
.page-actions-button:focus {
348+
outline: 2px solid #50ffff;
349+
outline-offset: 2px;
350+
}
351+
352+
/* Loading state */
353+
.page-action-link.loading {
354+
pointer-events: none;
355+
opacity: 0.7;
356+
}
357+
358+
.page-action-link.loading .page-action-icon::before {
359+
content: '⟳';
360+
animation: spin 1s linear infinite;
361+
}
362+
363+
@keyframes spin {
364+
from { transform: rotate(0deg); }
365+
to { transform: rotate(360deg); }
366+
}
367+
368+
/* Terminal-style border effect on hover */
369+
.page-actions-dropdown:hover {
370+
border-color: #50ffff;
371+
}
372+
373+
/* Footer info */
374+
.page-actions-footer {
375+
background: #070708;
376+
padding: 0.4rem 0.75rem;
377+
border-top: 1px solid #3f3f44;
378+
font-size: 0.65rem;
379+
color: #666;
380+
text-align: center;
381+
font-family: 'Dank Mono', Monaco, monospace;
382+
}
383+
384+
.page-actions-footer::before {
385+
content: '└─';
386+
margin-right: 0.5rem;
387+
color: #3f3f44;
388+
}

0 commit comments

Comments
 (0)