From e211f78c644066cfa2ccdb536532281af19b8040 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Mon, 10 Nov 2025 18:00:41 +0000
Subject: [PATCH] fix: comprehensive mobile responsive fixes for default theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PROBLEM:
- Left and right sidebars overlapping main content on mobile
- Headers and footers with incorrect padding/font sizes
- Page margins too large for mobile screens
- Badge sizes not optimized for mobile

SOLUTION @ 900px breakpoint:
- Changed page-content from CSS Grid to Flexbox for proper stacking
- Set all sections to width: 100% and position: static
- Added proper flexbox ordering (sidebar-left → header → main → sidebar-right → footer)
- Reduced cv-page margin to 0.5rem, removed border and box-shadow
- Reduced padding: sidebars and main content to 2rem 1.5rem
- Fixed title badges header: 0.75rem 1rem padding, 0.85rem font
- Fixed badges: 0.75rem font, 0.25rem 0.5rem padding
- Fixed footer: 1.5rem 1rem padding, 0.9rem label, 1.2rem value

SOLUTION @ 768px breakpoint:
- Further reduced margins and padding for small screens
- cv-page margin: 0.25rem
- Sidebar/main padding: 1.5rem 1rem
- Header padding: 0.5rem 0.75rem
- Badge font: 0.7rem
- Footer fonts: 0.85rem label, 1.1rem value, 1.2rem value bold
- Sidebar title: 1.1rem, content: 0.85rem
- Section titles: 1.1rem
- Added text-align: left for right sidebar on mobile

TECHNICAL CHANGES:
- Replaced grid-template-columns with display: flex + flex-direction: column
- Unset grid-column and grid-row properties on mobile
- Used !important flags to override desktop positioning
- Ensured all sections render in proper flow order
---
 static/css/main.css | 127 +++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 114 insertions(+), 13 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 964f038..459acb3 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1913,24 +1913,47 @@ a:focus {
 
 @media (max-width: 900px) {
     .cv-page {
-        margin: 1rem;
+        margin: 0.5rem;
         transform: scale(1);
+        border: none;
+        box-shadow: none;
     }
 
-    /* Stack layout on mobile */
+    /* Stack layout on mobile using flexbox for proper flow */
     .page-1 .page-content,
     .page-2 .page-content {
-        grid-template-columns: 1fr;
+        display: flex !important;
+        flex-direction: column;
+        gap: 0;
     }
 
     .cv-sidebar-left,
     .cv-sidebar-right {
-        grid-column: 1;
+        width: 100% !important;
+        position: static !important;
+        grid-column: unset;
+        grid-row: unset;
+        padding: 2rem 1.5rem;
     }
 
     .page-1 .cv-main,
     .page-2 .cv-main {
-        grid-column: 1;
+        width: 100% !important;
+        position: static !important;
+        grid-column: unset;
+        grid-row: unset;
+        padding: 2rem 1.5rem !important;
+    }
+
+    /* Adjust title badges header for mobile */
+    .cv-title-badges-header {
+        padding: 0.75rem 1rem !important;
+        font-size: 0.85rem;
+    }
+
+    .badge {
+        font-size: 0.75rem !important;
+        padding: 0.25rem 0.5rem !important;
     }
 
     /* Hide header on page 2 for mobile to merge pages */
@@ -1939,6 +1962,10 @@ a:focus {
     }
 
     /* Adjust footer for mobile */
+    .cv-footer {
+        padding: 1.5rem 1rem;
+    }
+
     .footer-content li > div {
         display: block;
         margin: 0;
@@ -1947,8 +1974,8 @@ a:focus {
     }
 
     .footer-label {
-        font-size: 1em;
-        margin-top: 15px;
+        font-size: 0.9rem;
+        margin-top: 1rem;
         color: #777;
     }
 
@@ -1957,32 +1984,106 @@ a:focus {
     }
 
     .footer-value {
-        font-size: 1.5em;
+        font-size: 1.2rem;
         margin-bottom: 0;
         padding: 0;
     }
 
+    .footer-value b {
+        font-size: 1.3rem;
+    }
+
     .site-title {
         justify-content: space-between;
         width: 100%;
     }
+
+    /* Ensure proper stacking order */
+    .cv-sidebar-left {
+        order: 1;
+    }
+
+    .cv-title-badges-header {
+        order: 2;
+    }
+
+    .cv-main {
+        order: 3;
+    }
+
+    .cv-sidebar-right {
+        order: 4;
+    }
+
+    .cv-footer {
+        order: 5;
+    }
 }
 
 /* ===============================================
    TABLET RESPONSIVE
    =============================================== */
 
-@media (max-width: 768px) and (min-width: 577px) {
-    .page-content {
-        gap: 1rem;
+@media (max-width: 768px) {
+    /* Further reduce padding on smaller screens */
+    .cv-page {
+        margin: 0.25rem;
+    }
+
+    .cv-sidebar-left,
+    .cv-sidebar-right {
+        width: 100% !important;
+        padding: 1.5rem 1rem;
+        text-align: left !important;
+    }
+
+    .page-1 .cv-main,
+    .page-2 .cv-main {
+        width: 100% !important;
+        padding: 1.5rem 1rem !important;
+    }
+
+    .cv-title-badges-header {
+        padding: 0.5rem 0.75rem !important;
+        font-size: 0.8rem;
+    }
+
+    .badge {
+        font-size: 0.7rem !important;
+        padding: 0.2rem 0.4rem !important;
+    }
+
+    /* Footer refinements */
+    .cv-footer {
+        padding: 1rem 0.75rem;
     }
 
     .footer-label {
-        font-size: 1.2em;
+        font-size: 0.85rem;
+        margin-top: 0.75rem;
     }
 
     .footer-value {
-        font-size: 1em;
+        font-size: 1.1rem;
+    }
+
+    .footer-value b {
+        font-size: 1.2rem;
+    }
+
+    /* Sidebar title sizing */
+    .sidebar-title {
+        font-size: 1.1rem;
+    }
+
+    .sidebar-content {
+        font-size: 0.85rem;
+    }
+
+    /* Section titles */
+    .section-title {
+        font-size: 1.1rem;
+        margin-bottom: 1rem;
     }
 }