From af8714aeb33991450895350670d0dd409aceddb7 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Mon, 10 Nov 2025 18:17:35 +0000
Subject: [PATCH] refine: optimize mobile accordion header sizing

CHANGES:
- Reduced accordion header padding: 0.75rem 1rem (was 1rem 1.5rem)
- Increased title font size: 1.3rem (was 1.1rem) - more prominent
- Reduced gap between icon and text: 0.5rem (was 0.75rem)
- Added flex-shrink: 0 to icons to prevent squishing
- Reduced accordion content padding: 1rem (was 1.5rem)

Content font size reduction:
- Sidebar titles inside content: 1rem (more readable hierarchy)
- Sidebar content and skill items: 0.8rem (compact, space-efficient)

RESULT:
- More compact accordion headers
- Clearer visual hierarchy (bigger titles, smaller content)
- Better space utilization on mobile
- Main CV content gets more screen real estate
---
 static/css/main.css | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 3c970d6..4e62179 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1949,8 +1949,8 @@ a:focus {
     .sidebar-accordion-header {
         display: flex !important;
         align-items: center;
-        gap: 0.75rem;
-        padding: 1rem 1.5rem;
+        gap: 0.5rem;
+        padding: 0.75rem 1rem;
         background: var(--sidebar-gray);
         cursor: pointer;
         user-select: none;
@@ -1966,9 +1966,13 @@ a:focus {
         background: #b8b8b8;
     }
 
+    .sidebar-accordion-header iconify-icon {
+        flex-shrink: 0;
+    }
+
     .sidebar-accordion-header span {
         font-weight: 700;
-        font-size: 1.1rem;
+        font-size: 1.3rem;
         flex: 1;
     }
 
@@ -1984,13 +1988,23 @@ a:focus {
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.3s ease-out;
-        padding: 0 1.5rem;
+        padding: 0 1rem;
     }
 
     .sidebar-accordion-content.active {
         max-height: 5000px;
         transition: max-height 0.5s ease-in;
-        padding: 1.5rem 1.5rem 0.5rem 1.5rem;
+        padding: 1rem 1rem 0.5rem 1rem;
+    }
+
+    /* Reduce font sizes inside accordion content */
+    .sidebar-accordion-content .sidebar-title {
+        font-size: 1rem;
+    }
+
+    .sidebar-accordion-content .sidebar-content,
+    .sidebar-accordion-content .skill-item {
+        font-size: 0.8rem;
     }
 
     .page-1 .cv-main,