feat: enhance shortcuts modal and complete logos-to-icons rename

This commit includes graphical keyboard icons integration, modal styling
improvements, and comprehensive "Logos" to "Icons" terminology update.

Changes:
- Add graphical keyboard icons using Iconify MDI (Tab, Ctrl, Cmd, Esc, etc.)
- Implement color scheme: black title, green subtitle/headers, blue kbd elements
- Add visual boxes with borders and shadows for section grouping
- Change modal from 3-column to 2-column grid layout (900px width)
- Fix critical bug: all 5 sections now render (was only showing 2)

Rename "Logos" to "Icons" across entire codebase:
- Go models: ToggleLogos → ToggleIcons, ShowLogos → ShowIcons
- Routes: /toggle/logos → /toggle/icons
- Templates: desktop-logo-toggle → desktop-icon-toggle, #logoToggle → #iconToggle
- JavaScript: logoToggles → iconToggles, sync logic updated
- CSS: .show-logos → .show-icons
- UI JSON: toggleLogos → toggleIcons
- Comments and labels updated

Technical details:
- Rebuilt Go binary to fix template rendering error
- Fixed JSON struct tag: json:"toggleLogos" → json:"toggleIcons"
- Updated kbd element styling for icon alignment (inline-flex)
- Added margin-bottom to subtitle (0.5rem)
- Grid now 2 columns for better 5-section layout

All 5 sections now render correctly:
1. Zoom Control
2. View Controls
3. Navigation
4. Actions
5. Browser Defaults
This commit is contained in:
juanatsap
2025-11-15 18:42:35 +00:00
parent 1f7757c848
commit a8d6805e27
13 changed files with 108 additions and 108 deletions
+10 -10
View File
@@ -125,8 +125,8 @@
padding-bottom: 0;
}
/* Adjust gap when logos are hidden */
.cv-paper:not(.show-logos) .experience-item {
/* Adjust gap when icons are hidden */
.cv-paper:not(.show-icons) .experience-item {
gap: 0;
}
@@ -163,7 +163,7 @@
min-width: 0; /* Prevents flex item from overflowing */
}
/* Animate logos with fade and scale */
/* Animate icons with fade and scale */
.company-logo,
.award-logo {
overflow: hidden;
@@ -174,9 +174,9 @@
height: auto;
}
/* Hide logos when toggle is OFF - with animation */
.cv-paper:not(.show-logos) .company-logo,
.cv-paper:not(.show-logos) .award-logo {
/* Hide icons when toggle is OFF - with animation */
.cv-paper:not(.show-icons) .company-logo,
.cv-paper:not(.show-icons) .award-logo {
opacity: 0;
transform: scale(0.8);
width: 0;
@@ -187,16 +187,16 @@
overflow: hidden;
}
/* Show logos when toggle is ON (default) - with animation */
.show-logos .company-logo,
.show-logos .award-logo {
/* Show icons when toggle is ON (default) - with animation */
.show-icons .company-logo,
.show-icons .award-logo {
opacity: 1;
transform: scale(1);
width: auto;
height: auto;
}
/* Company logos visible in print - styling controlled by print.css */
/* Company icons visible in print - styling controlled by print.css */
/* Mobile responsiveness */
@media (max-width: 768px) {