feat: integrate all 10 skills into homelab-topology
- Added api-security-hardening (helmet, rate limits) - Added nodejs-backend-patterns (error handling) - Added observability-monitoring (pino logging) - Added websocket-engineer (socket.io real-time updates) - Added docker (Multi-stage build, compose) - Added vitest (testing configuration and store tests) - Added data-visualizer (MetricsBar and HostChart) - Added infrastructure-monitoring/proxmox-admin/network-engineer types - Fixed UI accessibility and styling - Cleaned up node_modules tracking
This commit is contained in:
@@ -29,8 +29,58 @@ body {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* ── Skip link (a11y) ────────────────────────────────────── */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 0;
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
padding: 8px 16px;
|
||||
z-index: 100;
|
||||
font-weight: 600;
|
||||
transition: top 200ms ease-out;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* ── Focus-visible styles (a11y) ─────────────────────────── */
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
button:focus-visible {
|
||||
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.4);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ── Reduced motion (a11y) ───────────────────────────────── */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
.react-flow__node {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── React Flow overrides ────────────────────────────────── */
|
||||
.react-flow__node {
|
||||
cursor: pointer;
|
||||
transition: transform 300ms ease-out;
|
||||
}
|
||||
|
||||
.react-flow__edge-path {
|
||||
@@ -66,3 +116,16 @@ body {
|
||||
.react-flow__controls-button svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* ── Visually hidden utility (a11y) ──────────────────────── */
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user