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:
+10
-10
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user