From 173138027efa5944f0f7ad51aca729e5d1158706 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Mon, 10 Nov 2025 18:24:21 +0000
Subject: [PATCH] feat: right-align content in right sidebar for desktop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PROBLEM:
- Right sidebar content was left-aligned on desktop
- Created visual inconsistency with sidebar position

SOLUTION:
Desktop (default):
- Added .cv-sidebar-right .sidebar-content { text-align: right; }
- Added .cv-sidebar-right .skill-item { text-align: right; }
- Content now aligns to the right side matching sidebar position

Mobile @ 768px:
- Override with text-align: left !important for both sidebars
- Ensures consistent left-aligned reading experience on mobile
- Applies to .sidebar-content and .skill-item in both sidebars

RESULT:
Desktop:
- Left sidebar: content left-aligned ✓
- Right sidebar: content right-aligned ✓
- Visual symmetry and proper alignment

Mobile:
- Both sidebars: content left-aligned ✓
- Consistent reading experience
- Better usability on small screens

TECHNICAL:
- Desktop rules apply by default
- Mobile rules use !important to override for both sidebars
- Clean separation of desktop/mobile behavior
---
 static/css/main.css | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/static/css/main.css b/static/css/main.css
index 87eafc6..660b533 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -662,6 +662,15 @@ iconify-icon {
     width: 100%;
 }
 
+/* Right-align content in right sidebar */
+.cv-sidebar-right .sidebar-content {
+    text-align: right;
+}
+
+.cv-sidebar-right .skill-item {
+    text-align: right;
+}
+
 .cv-sidebar-right .sidebar-section summary::after {
     content: '▶';
     font-size: 0.8em;
@@ -2110,6 +2119,13 @@ a:focus {
     .cv-sidebar-right {
         width: 100% !important;
         padding: 1.5rem 1rem;
+    }
+
+    /* Force left alignment for all sidebar content on mobile */
+    .cv-sidebar-left .sidebar-content,
+    .cv-sidebar-left .skill-item,
+    .cv-sidebar-right .sidebar-content,
+    .cv-sidebar-right .skill-item {
         text-align: left !important;
     }