refactor: organize hyperscript code and implement mobile button layout

This commit includes two major improvements:

1. Hyperscript Code Organization:
   - Extracted all hyperscript blocks >3 lines into reusable functions
   - Created 6 new functions in functions._hs:
     * toggleCVLength(isLong) - CV length toggle sync
     * toggleIcons(showIcons) - Icons toggle sync
     * toggleTheme(isClean) - Theme toggle sync
     * syncPdfHover(show) - PDF button synchronized hover
     * syncPrintHover(show) - Print button synchronized hover
     * highlightZoomControl(show) - Zoom control highlight effect
   - Reduced inline hyperscript from 11+ lines to 1-2 lines per element
   - Updated 8 template files to use function calls:
     * hamburger-menu.html
     * view-controls.html
     * action-buttons.html
     * download-button.html
     * print-friendly-button.html
     * zoom-toggle-button.html

2. Mobile Button Layout (max-width: 900px):
   - Repositioned three fixed buttons (PDF, Print, Info) horizontally at bottom center
   - Print button perfectly centered in viewport
   - Download button on left, Info button on right
   - Hidden zoom and shortcuts buttons on mobile (available in hamburger menu)
   - Removed conflicting old mobile styles that were hiding print button
   - Smooth hover transitions maintained with proper transform calculations

Technical details:
- Used CSS transform with calc() for precise horizontal positioning
- Maintained hover effects with combined translateX/translateY transforms
- Ensured accessibility with proper ARIA labels and spacing
- All functions check element existence before manipulation
- LocalStorage sync maintained across desktop/mobile toggles

static/css/main.css

@@ -2863,14 +2863,57 @@ html {
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
 }
 
-/* Mobile adjustments */
+/* Mobile adjustments - Horizontal button layout at bottom center */
-@media (max-width: 768px) {
+@media (max-width: 900px) {
-    .info-button {
+    /* Hide zoom and shortcuts buttons on mobile - only show PDF, Print, Info */
-        bottom: 1.5rem;
+    .zoom-toggle-btn,
-        left: 1.5rem;
+    .shortcuts-btn {
+        display: none !important;
+    }
+
+    /* Position buttons horizontally at bottom center */
+    .download-btn {
+        bottom: 1.5rem !important;
+        left: 50% !important;
+        transform: translateX(calc(-50% - 70px)) !important; /* Left button: center - 70px */
         width: 45px;
         height: 45px;
     }
+
+    .download-btn:hover,
+    .download-btn.pdf-hover-sync {
+        transform: translateX(calc(-50% - 70px)) translateY(-3px) !important;
+    }
+
+    .print-friendly-btn {
+        bottom: 1.5rem !important;
+        left: 50% !important;
+        transform: translateX(-50%) !important; /* Center button */
+        width: 45px;
+        height: 45px;
+    }
+
+    .print-friendly-btn:hover,
+    .print-friendly-btn.print-hover-sync {
+        transform: translateX(-50%) translateY(-3px) !important;
+    }
+
+    .info-button {
+        bottom: 1.5rem !important;
+        left: 50% !important;
+        transform: translateX(calc(-50% + 70px)) !important; /* Right button: center + 70px */
+        width: 45px;
+        height: 45px;
+    }
+
+    .info-button:hover,
+    .info-button.at-bottom {
+        transform: translateX(calc(-50% + 70px)) translateY(-3px) !important;
+    }
+
+    .info-button.at-bottom {
+        transform: translateX(calc(-50% + 70px)) !important; /* No Y offset for at-bottom state */
+    }
 }
 
 /* ========================================
@@ -3913,23 +3956,8 @@ html {
     outline-offset: 2px;
 }
 
-/* Mobile Responsive - Hide most buttons, keep only download and info */
+/* Mobile Responsive - Horizontal button layout defined below (around line 2867) */
-@media (max-width: 768px) {
+/* Old mobile styles removed - now using horizontal layout with all three buttons */
-    .zoom-control,
-    .zoom-toggle-btn,
-    .shortcuts-btn,
-    .print-friendly-btn,
-    .back-to-top {
-        display: none !important; /* Hide these buttons on mobile */
-    }
-
-    /* Reposition download button to be above info button (right side) */
-    .download-btn {
-        bottom: 6rem; /* Above info button */
-        left: auto;
-        right: 2rem; /* Right side like info button */
-    }
-}
 
 /* Very Small Screens - Ultra Compact */
 @media (max-width: 480px) {

static/hyperscript/functions._hs

@@ -126,6 +126,105 @@ def handleScroll()
   set :lastScroll to currentScroll
 end
 
+-- ==============================================================================
+-- TOGGLE FUNCTIONS (for view controls)
+-- ==============================================================================
+
+-- CV Length Toggle
+def toggleCVLength(isLong)
+  set paper to the first .cv-paper
+  set otherToggle to (#lengthToggle or #lengthToggleMenu)
+
+  if isLong
+    remove .cv-short from paper
+    add .cv-long to paper
+    set localStorage['cv-length'] to 'long'
+    if otherToggle exists set otherToggle's checked to true
+  else
+    remove .cv-long from paper
+    add .cv-short to paper
+    set localStorage['cv-length'] to 'short'
+    if otherToggle exists set otherToggle's checked to false
+  end
+end
+
+-- Icons Toggle
+def toggleIcons(showIcons)
+  set paper to the first .cv-paper
+  set otherToggle to (#iconToggle or #iconToggleMenu)
+
+  if showIcons
+    add .show-icons to paper
+    set localStorage['cv-icons'] to 'true'
+    if otherToggle exists set otherToggle's checked to true
+  else
+    remove .show-icons from paper
+    set localStorage['cv-icons'] to 'false'
+    if otherToggle exists set otherToggle's checked to false
+  end
+end
+
+-- Theme Toggle
+def toggleTheme(isClean)
+  set container to the first .cv-container
+  set otherToggle to (#themeToggle or #themeToggleMenu)
+
+  if isClean
+    add .theme-clean to container
+    set localStorage['cv-theme'] to 'clean'
+    if otherToggle exists set otherToggle's checked to true
+  else
+    remove .theme-clean from container
+    set localStorage['cv-theme'] to 'default'
+    if otherToggle exists set otherToggle's checked to false
+  end
+end
+
+-- Synchronized Hover for PDF Buttons
+def syncPdfHover(show)
+  set fixedBtn to #download-button
+  set actionBarBtn to #action-bar-pdf-btn
+  set menuBtn to the first .menu-pdf-btn
+
+  if show
+    if fixedBtn exists add .pdf-hover-sync to fixedBtn
+    if actionBarBtn exists add .pdf-hover-sync to actionBarBtn
+    if menuBtn exists add .pdf-hover-sync to menuBtn
+  else
+    if fixedBtn exists remove .pdf-hover-sync from fixedBtn
+    if actionBarBtn exists remove .pdf-hover-sync from actionBarBtn
+    if menuBtn exists remove .pdf-hover-sync from menuBtn
+  end
+end
+
+-- Synchronized Hover for Print Buttons
+def syncPrintHover(show)
+  set fixedBtn to #print-friendly-button
+  set actionBarBtn to the first .action-bar-print-btn
+  set menuBtn to the first .menu-print-btn
+
+  if show
+    if fixedBtn exists add .print-hover-sync to fixedBtn
+    if actionBarBtn exists add .print-hover-sync to actionBarBtn
+    if menuBtn exists add .print-hover-sync to menuBtn
+  else
+    if fixedBtn exists remove .print-hover-sync from fixedBtn
+    if actionBarBtn exists remove .print-hover-sync from actionBarBtn
+    if menuBtn exists remove .print-hover-sync from menuBtn
+  end
+end
+
+-- Zoom Control Highlight
+def highlightZoomControl(show)
+  set zoomControl to #zoom-control
+
+  if show
+    if zoomControl exists add .zoom-highlight to zoomControl
+  else
+    if zoomControl exists remove .zoom-highlight from zoomControl
+  end
+end
+
 -- ==============================================================================
 -- KEYBOARD SHORTCUTS
 -- ==============================================================================

templates/partials/navigation/action-buttons.html

@@ -6,12 +6,8 @@
         class="action-btn pdf-btn"
         onclick="document.getElementById('pdf-modal').showModal()"
         aria-label="{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}"
-        _="on mouseenter
+        _="on mouseenter call syncPdfHover(true)
-             add .pdf-hover-sync to me
+           on mouseleave call syncPdfHover(false)">
-             add .pdf-hover-sync to #download-button
-           on mouseleave
-             remove .pdf-hover-sync from me
-             remove .pdf-hover-sync from #download-button">
         <iconify-icon icon="catppuccin:pdf" width="18" height="18"></iconify-icon>
         {{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}
     </button>
@@ -19,14 +15,8 @@
         class="action-btn print-btn action-bar-print-btn"
         aria-label="{{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}"
         _="on click call printFriendly()
-           on mouseenter
+           on mouseenter call syncPrintHover(true)
-             add .print-hover-sync to me
+           on mouseleave call syncPrintHover(false)">
-             add .print-hover-sync to #print-friendly-button
-             add .print-hover-sync to .menu-print-btn
-           on mouseleave
-             remove .print-hover-sync from me
-             remove .print-hover-sync from #print-friendly-button
-             remove .print-hover-sync from .menu-print-btn">
         <iconify-icon icon="mdi:leaf" width="18" height="18"></iconify-icon>
         {{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}
     </button>

templates/partials/navigation/hamburger-menu.html

@@ -99,18 +99,7 @@
                                {{if eq .CVLengthClass "cv-long"}}checked{{end}}
                                hx-post="/toggle/length?lang={{.Lang}}"
                                hx-swap="none"
-                               _="on change
+                               _="on change call toggleCVLength(my.checked)">
-                                    if my.checked
-                                      remove .cv-short from .cv-paper
-                                      add .cv-long to .cv-paper
-                                      set localStorage['cv-length'] to 'long'
-                                      set #lengthToggle's checked to true
-                                    else
-                                      remove .cv-long from .cv-paper
-                                      add .cv-short to .cv-paper
-                                      set localStorage['cv-length'] to 'short'
-                                      set #lengthToggle's checked to false
-                                    end">
                         <span class="icon-toggle-slider">
                             <iconify-icon icon="mdi:file-document-outline" width="16" height="16" class="icon-left"></iconify-icon>
                             <iconify-icon icon="mdi:file-document-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
@@ -137,16 +126,7 @@
                                {{if .ShowIcons}}checked{{end}}
                                hx-post="/toggle/icons?lang={{.Lang}}"
                                hx-swap="none"
-                               _="on change
+                               _="on change call toggleIcons(my.checked)">
-                                    if my.checked
-                                      add .show-icons to .cv-paper
-                                      set localStorage['cv-icons'] to 'true'
-                                      set #iconToggle's checked to true
-                                    else
-                                      remove .show-icons from .cv-paper
-                                      set localStorage['cv-icons'] to 'false'
-                                      set #iconToggle's checked to false
-                                    end">
                         <span class="icon-toggle-slider">
                             <iconify-icon icon="mdi:image-off-outline" width="16" height="16" class="icon-left"></iconify-icon>
                             <iconify-icon icon="mdi:image-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
@@ -173,16 +153,7 @@
                                {{if .ThemeClean}}checked{{end}}
                                hx-post="/toggle/theme?lang={{.Lang}}"
                                hx-swap="none"
-                               _="on change
+                               _="on change call toggleTheme(my.checked)">
-                                    if my.checked
-                                      add .theme-clean to the body
-                                      set localStorage['cv-theme'] to 'clean'
-                                      set #themeToggle's checked to true
-                                    else
-                                      remove .theme-clean from the body
-                                      set localStorage['cv-theme'] to 'default'
-                                      set #themeToggle's checked to false
-                                    end">
                         <span class="icon-toggle-slider">
                             <iconify-icon icon="mdi:page-layout-sidebar-left" width="16" height="16" class="icon-left"></iconify-icon>
                             <iconify-icon icon="mdi:page-layout-body" width="16" height="16" class="icon-right"></iconify-icon>
@@ -211,14 +182,8 @@
 
             <button class="menu-action-btn menu-print-btn"
                     _="on click call printFriendly()
-                       on mouseenter
+                       on mouseenter call syncPrintHover(true)
-                         add .print-hover-sync to me
+                       on mouseleave call syncPrintHover(false)">
-                         add .print-hover-sync to #print-friendly-button
-                         add .print-hover-sync to .action-bar-print-btn
-                       on mouseleave
-                         remove .print-hover-sync from me
-                         remove .print-hover-sync from #print-friendly-button
-                         remove .print-hover-sync from .action-bar-print-btn">
                 <iconify-icon icon="mdi:leaf" width="20" height="20"></iconify-icon>
                 <span>{{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}</span>
             </button>

templates/partials/navigation/view-controls.html

@@ -10,18 +10,7 @@
                    {{if eq .CVLengthClass "cv-long"}}checked{{end}}
                    hx-post="/toggle/length?lang={{.Lang}}"
                    hx-swap="none"
-                   _="on change
+                   _="on change call toggleCVLength(my.checked)">
-                        if my.checked
-                          remove .cv-short from .cv-paper
-                          add .cv-long to .cv-paper
-                          set localStorage['cv-length'] to 'long'
-                          set #lengthToggleMenu's checked to true
-                        else
-                          remove .cv-long from .cv-paper
-                          add .cv-short to .cv-paper
-                          set localStorage['cv-length'] to 'short'
-                          set #lengthToggleMenu's checked to false
-                        end">
             <span class="icon-toggle-slider">
                 <iconify-icon icon="mdi:file-document-outline" width="16" height="16" class="icon-left"></iconify-icon>
                 <iconify-icon icon="mdi:file-document-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
@@ -43,16 +32,7 @@
                    {{if .ShowIcons}}checked{{end}}
                    hx-post="/toggle/icons?lang={{.Lang}}"
                    hx-swap="none"
-                   _="on change
+                   _="on change call toggleIcons(my.checked)">
-                        if my.checked
-                          add .show-icons to .cv-paper
-                          set localStorage['cv-icons'] to 'true'
-                          set #iconToggleMenu's checked to true
-                        else
-                          remove .show-icons from .cv-paper
-                          set localStorage['cv-icons'] to 'false'
-                          set #iconToggleMenu's checked to false
-                        end">
             <span class="icon-toggle-slider">
                 <iconify-icon icon="mdi:image-off-outline" width="16" height="16" class="icon-left"></iconify-icon>
                 <iconify-icon icon="mdi:image-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
@@ -74,16 +54,7 @@
                    {{if .ThemeClean}}checked{{end}}
                    hx-post="/toggle/theme?lang={{.Lang}}"
                    hx-swap="none"
-                   _="on change
+                   _="on change call toggleTheme(my.checked)">
-                        if my.checked
-                          add .theme-clean to the body
-                          set localStorage['cv-theme'] to 'clean'
-                          set #themeToggleMenu's checked to true
-                        else
-                          remove .theme-clean from the body
-                          set localStorage['cv-theme'] to 'default'
-                          set #themeToggleMenu's checked to false
-                        end">
             <span class="icon-toggle-slider">
                 <iconify-icon icon="mdi:page-layout-sidebar-left" width="16" height="16" class="icon-left"></iconify-icon>
                 <iconify-icon icon="mdi:page-layout-body" width="16" height="16" class="icon-right"></iconify-icon>

templates/partials/widgets/download-button.html

@@ -6,12 +6,8 @@
     aria-label="{{if eq .Lang "es"}}Descargar PDF{{else}}Download PDF{{end}}"
     title="{{if eq .Lang "es"}}Descargar PDF{{else}}Download PDF{{end}}"
     onclick="document.getElementById('pdf-modal').showModal()"
-    _="on mouseenter
+    _="on mouseenter call syncPdfHover(true)
-         add .pdf-hover-sync to me
+       on mouseleave call syncPdfHover(false)">
-         add .pdf-hover-sync to #action-bar-pdf-btn
-       on mouseleave
-         remove .pdf-hover-sync from me
-         remove .pdf-hover-sync from #action-bar-pdf-btn">
     <iconify-icon icon="catppuccin:pdf" width="28" height="28"></iconify-icon>
 </button>
 {{end}}

templates/partials/widgets/print-friendly-button.html

@@ -6,14 +6,8 @@
     aria-label="{{if eq .Lang "es"}}Imprimir CV{{else}}Print CV{{end}}"
     title="{{if eq .Lang "es"}}Imprimir CV{{else}}Print CV{{end}}"
     onclick="window.print()"
-    _="on mouseenter
+    _="on mouseenter call syncPrintHover(true)
-         add .print-hover-sync to me
+       on mouseleave call syncPrintHover(false)">
-         add .print-hover-sync to .action-bar-print-btn
-         add .print-hover-sync to .menu-print-btn
-       on mouseleave
-         remove .print-hover-sync from me
-         remove .print-hover-sync from .action-bar-print-btn
-         remove .print-hover-sync from .menu-print-btn">
     <iconify-icon icon="mdi:leaf" width="28" height="28"></iconify-icon>
 </button>
 {{end}}

templates/partials/widgets/zoom-toggle-button.html

@@ -5,10 +5,8 @@
     class="fixed-btn zoom-toggle-btn no-print"
     aria-label="{{if eq .Lang "es"}}Alternar control de zoom{{else}}Toggle zoom control{{end}}"
     title="{{if eq .Lang "es"}}Control de zoom{{else}}Zoom control{{end}}"
-    _="on mouseenter
+    _="on mouseenter call highlightZoomControl(true)
-         add .zoom-highlight to #zoom-control
+       on mouseleave call highlightZoomControl(false)">
-       on mouseleave
-         remove .zoom-highlight from #zoom-control">
     <iconify-icon icon="mdi:magnify" width="28" height="28"></iconify-icon>
 </button>
 {{end}}