From eda746407e9fc734e163e26e8b9770fa8fe70411 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Mon, 10 Nov 2025 10:24:34 +0000
Subject: [PATCH] feat: add responsive design for medium screens (901-1023px)

- Implemented collapsible UI elements with hover expansion for language selector, action buttons, and sidebar content
- Reduced global font sizes and adjusted spacing to optimize layout for medium-width displays
- Added smooth transitions for interactive elements to enhance user experience
---
 static/css/main.css | 119 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 119 insertions(+)

diff --git a/static/css/main.css b/static/css/main.css
index 492b5b4..9c039e1 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -102,6 +102,7 @@ a:hover {
 .site-logo-link:hover,
 .site-title-link:hover {
     opacity: 0.8;
+    text-decoration: none;
 }
 
 .site-logo-link {
@@ -2497,6 +2498,124 @@ html {
    Desktop: Ensure Sidebar Content Visible (>1280px)
    ======================================== */
 
+/* ========================================
+   Responsive: Medium Screens (901px - 1023px)
+   ======================================== */
+
+@media (min-width: 901px) and (max-width: 1023px) {
+
+    /* ========== Global Font Size Reduction ========== */
+    html {
+        font-size: 14px; /* Reduced from default 16px */
+    }
+
+    .cv-name {
+        font-size: 1.8em; /* Reduced from 2.2em */
+    }
+
+    .sidebar-title {
+        font-size: 0.95rem;
+    }
+
+    .sidebar-content {
+        font-size: 0.9rem;
+    }
+
+    /* ========== Selector Labels - Hide, Show on Hover ========== */
+    .selector-label {
+        max-width: 0;
+        overflow: hidden;
+        opacity: 0;
+        transition: all 0.3s ease;
+        white-space: nowrap;
+    }
+
+    .selector-group:hover .selector-label {
+        max-width: 200px;
+        opacity: 1;
+        margin-right: 0.75rem;
+    }
+
+    /* ========== Language Selector - Collapse to EN/ES ========== */
+    .language-selector .selector-btn {
+        position: relative;
+        padding: 0.4rem 1rem; /* Keep padding consistent */
+        min-width: 50px;
+        font-size: 0; /* Hide actual text */
+        overflow: visible;
+        transition: font-size 0.3s ease; /* Slower animation */
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    /* Show only short version (EN/ES) */
+    .language-selector .selector-btn::before {
+        content: attr(data-short);
+        font-size: 1rem; /* Restore font size for pseudo-element */
+        opacity: 1;
+        transition: opacity 0.3s ease; /* Slower animation */
+        display: block;
+        width: 100%;
+        text-align: center;
+    }
+
+    /* On hover of INDIVIDUAL button only, show full text */
+    .language-selector .selector-btn:hover {
+        font-size: 1rem; /* Restore font size to show full text */
+        min-width: auto;
+    }
+
+    .language-selector .selector-btn:hover::before {
+        content: ''; /* Hide short version */
+        opacity: 0;
+    }
+
+    /* ========== Action Buttons - Icon Only, Expand on Hover ========== */
+    .action-btn {
+        position: relative;
+        width: 45px;
+        overflow: hidden;
+        transition: width 0.3s ease, padding 0.3s ease;
+        white-space: nowrap;
+        text-indent: 0;
+    }
+
+    /* Hide button text, keep icon */
+    .action-btn iconify-icon {
+        flex-shrink: 0;
+    }
+
+    .action-btn {
+        font-size: 0;
+        padding: 0 0.65rem;
+        justify-content: center;
+    }
+
+    /* On hover, show text */
+    .action-btn:hover {
+        width: auto;
+        font-size: 0.95rem;
+        padding: 0.65rem 1.5rem;
+        gap: 0.5rem;
+    }
+
+    /* ========== Sidebar Content - Hide Text, Show on Hover ========== */
+    .sidebar-content {
+        max-height: 0 !important;
+        overflow: hidden !important;
+        opacity: 0 !important;
+    }
+
+    /* Show sidebar content on hover */
+    .skill-category:hover .sidebar-content,
+    .cv-sidebar-section:hover .sidebar-content {
+        max-height: 1000px !important;
+        opacity: 1 !important;
+        margin-top: 10px !important;
+    }
+}
+
 /* ========================================
    Responsive: Medium Screens (1024px - 1280px)
    ======================================== */