feat: Add CMD+K command palette with ninja-keys integration
Implement a command palette accessible via CMD+K/Ctrl+K using the ninja-keys web component. Features include: - New /api/cmd-k endpoint serving dynamic CV entries (experiences, projects, courses) - Language-aware responses with 1-hour cache headers - Scroll-to-section functionality for quick navigation - Enhanced keyboard shortcuts modal with CMD+K documentation - Comprehensive test coverage for API and UI interactions Also includes cleanup of deprecated debug test files and various UI polish improvements to contact form, themes, and action bar components.
This commit is contained in:
juanatsap
@@ -288,13 +288,21 @@
|
||||
bottom: 1.5rem !important;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
width: 50px !important;
|
||||
height: 50px !important;
|
||||
/* Fluid button size: scales from 36px at 380px to 50px at 900px */
|
||||
width: clamp(36px, calc(36px + (50 - 36) * ((100vw - 380px) / (900 - 380))), 50px) !important;
|
||||
height: clamp(36px, calc(36px + (50 - 36) * ((100vw - 380px) / (900 - 380))), 50px) !important;
|
||||
opacity: 1 !important; /* Full opacity on mobile (no transparency with blur bar) */
|
||||
transform: none !important;
|
||||
/* Position in 6-button layout: Download, Print, Shortcuts, Theme, Info, Back-to-top */
|
||||
/* Total width: 6 * 50px + 5 * 10px = 350px */
|
||||
left: calc(50% + 5px) !important; /* Fourth button */
|
||||
/* Position in 8-button layout: Search, Download, Print, Contact, Shortcuts, Theme, Info, Back-to-top */
|
||||
/* Fluid positioning: scales from +42px at 380px to +62px at 900px */
|
||||
left: calc(50% + clamp(42px, calc(42px + (62 - 42) * ((100vw - 380px) / (900 - 380))), 62px)) !important; /* Sixth button */
|
||||
}
|
||||
|
||||
/* Scale theme switcher icon */
|
||||
.color-theme-switcher iconify-icon {
|
||||
width: clamp(18px, calc(18px + (24 - 18) * ((100vw - 380px) / (900 - 380))), 24px) !important;
|
||||
height: clamp(18px, calc(18px + (24 - 18) * ((100vw - 380px) / (900 - 380))), 24px) !important;
|
||||
font-size: clamp(18px, calc(18px + (24 - 18) * ((100vw - 380px) / (900 - 380))), 24px) !important;
|
||||
}
|
||||
|
||||
/* Show theme colors at FULL opacity on mobile (no transparency with blur bar) */
|
||||
@@ -326,11 +334,10 @@
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
|
||||
/* REAL MOBILE DEVICES: 5 buttons without shortcuts */
|
||||
/* Download, Print, Theme, Info, Back-to-top */
|
||||
/* Total width: 5 * 50px + 4 * 10px = 290px */
|
||||
/* REAL MOBILE DEVICES: 7 buttons without shortcuts */
|
||||
/* Fifth position: +33px at 900px, +22px at 380px */
|
||||
.is-mobile-device .color-theme-switcher {
|
||||
left: calc(50% - 25px) !important; /* Third button (no gap) */
|
||||
left: calc(50% + clamp(22px, calc(22px + (33 - 22) * ((100vw - 380px) / (900 - 380))), 33px)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -477,6 +477,7 @@ iconify-icon {
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
overflow: visible; /* Allow tooltips to extend beyond button container */
|
||||
flex-wrap: nowrap; /* Keep buttons in single row */
|
||||
}
|
||||
|
||||
.action-buttons-right {
|
||||
@@ -484,6 +485,56 @@ iconify-icon {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
RESPONSIVE ACTION BUTTONS - Scale to fit
|
||||
Prevents button overflow on narrow screens
|
||||
======================================== */
|
||||
|
||||
/* Intermediate screens: shrink buttons to fit */
|
||||
@media (min-width: 901px) and (max-width: 1400px) {
|
||||
.action-buttons-right {
|
||||
flex-shrink: 1;
|
||||
min-width: 0; /* Allow shrinking */
|
||||
}
|
||||
|
||||
.action-buttons-right .action-btn {
|
||||
flex-shrink: 1;
|
||||
min-width: 40px; /* Minimum touchable size */
|
||||
padding: 0 0.5rem; /* Reduce padding as needed */
|
||||
}
|
||||
}
|
||||
|
||||
/* Narrow desktop: icon-only buttons that scale */
|
||||
@media (min-width: 541px) and (max-width: 900px) {
|
||||
.action-buttons-right {
|
||||
display: flex !important; /* Show on tablet */
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.action-buttons-right .action-btn {
|
||||
width: auto;
|
||||
min-width: 36px;
|
||||
padding: 0 0.4rem;
|
||||
font-size: 0; /* Icon only */
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.action-buttons-right .action-btn iconify-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Very narrow: use CSS clamp for fluid button sizing */
|
||||
@media (min-width: 901px) and (max-width: 1100px) {
|
||||
.action-btn {
|
||||
/* Fluid width that scales with viewport */
|
||||
width: clamp(35px, 4vw, 50px) !important;
|
||||
padding: 0 clamp(0.3rem, 0.8vw, 1rem) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
HTMX Loading Indicators
|
||||
========================================================================= */
|
||||
|
||||
@@ -2,6 +2,11 @@
|
||||
CONTACT FORM - Modal form styling
|
||||
============================================================================= */
|
||||
|
||||
/* Utility class to hide elements after form submission */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Contact Modal Specific Overrides */
|
||||
#contact-modal {
|
||||
max-width: 520px;
|
||||
@@ -256,10 +261,10 @@
|
||||
CONTACT BUTTON (Fixed Position)
|
||||
============================================================================= */
|
||||
|
||||
/* Contact Button - positioned above bottom buttons */
|
||||
.contact-btn {
|
||||
position: fixed;
|
||||
bottom: 14rem; /* Above zoom button */
|
||||
/* Contact Button - positioned above theme switcher (FIXED sidebar button only) */
|
||||
.fixed-btn.contact-btn {
|
||||
position: fixed !important; /* Override .has-tooltip position: relative */
|
||||
bottom: 18rem; /* Above theme switcher (14rem) */
|
||||
left: 2rem;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
@@ -277,16 +282,16 @@
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.contact-btn:hover {
|
||||
.fixed-btn.contact-btn:hover {
|
||||
opacity: 1;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
background: #3498db; /* Blue hover */
|
||||
}
|
||||
|
||||
.contact-btn.at-bottom {
|
||||
.fixed-btn.contact-btn.at-bottom {
|
||||
opacity: 1;
|
||||
background: #3498db; /* Blue when at bottom */
|
||||
background: #3498db !important; /* Blue when at bottom */
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
@@ -343,8 +348,8 @@
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Contact button mobile */
|
||||
.contact-btn {
|
||||
/* Contact button mobile (FIXED sidebar button only) */
|
||||
.fixed-btn.contact-btn {
|
||||
bottom: 13.5rem; /* Adjust for mobile button spacing */
|
||||
left: 1.5rem;
|
||||
width: 45px;
|
||||
|
||||
Reference in New Issue
Block a user