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
This commit is contained in:
juanatsap
2025-11-10 18:17:35 +00:00
parent 04fdae2347
commit af8714aeb3
+19 -5
View File
@@ -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,