From 4ec966591dcaef8a1a178f3fd21a95c357267d77 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Mon, 27 Oct 2025 22:39:29 +0000
Subject: [PATCH] Implement A4 page simulation with exact dimensions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update main.css with A4 dimensions (210mm × 297mm)
- Add CSS variables for consistent sizing
- Implement page-break-inside: avoid for sections
- Optimize font sizes for A4 layout
- Update print.css for perfect PDF export
- Responsive: switches to 100% width on mobile
---
 static/css/main.css  | 249 +++++++++++++++++++++----------------
 static/css/print.css | 289 +++++++++++++++----------------------------
 2 files changed, 241 insertions(+), 297 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 87789e2..330ec84 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,4 +1,4 @@
-/* Minimal CV Design - Clean & Professional */
+/* Minimal CV Design - A4 Page Simulation */
 
 :root {
     --bg-gray: #525659;
@@ -7,6 +7,11 @@
     --text-gray: #555555;
     --accent-blue: #0066cc;
     --border-gray: #dddddd;
+    
+    /* A4 dimensions */
+    --a4-width: 210mm;
+    --a4-height: 297mm;
+    --page-padding: 20mm;
 }
 
 * {
@@ -41,7 +46,7 @@ a:hover {
 }
 
 .action-bar-content {
-    max-width: 900px;
+    max-width: var(--a4-width);
     margin: 0 auto;
     padding: 1rem 2rem;
     display: flex;
@@ -110,18 +115,38 @@ a:hover {
     100% { transform: rotate(360deg); }
 }
 
-/* CV Container - Paper Design */
+/* A4 Page Container */
 .cv-container {
-    max-width: 900px;
-    margin: 2rem auto;
-    padding: 0 1rem;
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    padding: 2rem 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
 }
 
+/* A4 Paper - Exact dimensions */
 .cv-paper {
+    width: var(--a4-width);
+    min-height: var(--a4-height);
     background: var(--paper-white);
-    padding: 3rem 4rem;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    min-height: 11in;
+    padding: var(--page-padding);
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    margin: 0 auto;
+    position: relative;
+}
+
+/* Page break helpers */
+.page-break {
+    page-break-after: always;
+    break-after: page;
+}
+
+.avoid-break {
+    page-break-inside: avoid;
+    break-inside: avoid;
 }
 
 /* Header - Photo on right, inline with text */
@@ -144,8 +169,8 @@ a:hover {
 }
 
 .cv-photo {
-    width: 120px;
-    height: 120px;
+    width: 100px;
+    height: 100px;
     border-radius: 50%;
     overflow: hidden;
     border: 3px solid var(--border-gray);
@@ -158,13 +183,13 @@ a:hover {
 }
 
 .cv-name {
-    font-size: 2.5rem;
+    font-size: 2rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
 }
 
 .cv-title {
-    font-size: 1.3rem;
+    font-size: 1.1rem;
     font-weight: 400;
     color: var(--text-gray);
     margin-bottom: 1rem;
@@ -172,19 +197,20 @@ a:hover {
 
 .cv-contact {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 0.5rem;
-    font-size: 0.9rem;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.4rem;
+    font-size: 0.85rem;
     color: var(--text-gray);
 }
 
 /* Sections */
 .cv-section {
-    margin-bottom: 2rem;
+    margin-bottom: 1.5rem;
+    page-break-inside: avoid;
 }
 
 .section-title {
-    font-size: 1.3rem;
+    font-size: 1.2rem;
     font-weight: 700;
     margin-bottom: 1rem;
     padding-bottom: 0.3rem;
@@ -192,15 +218,17 @@ a:hover {
 }
 
 .summary-text {
-    line-height: 1.7;
+    line-height: 1.6;
     text-align: justify;
+    font-size: 0.9rem;
 }
 
 /* Experience - with separators */
 .experience-item {
-    margin-bottom: 1.5rem;
-    padding-bottom: 1.5rem;
+    margin-bottom: 1.2rem;
+    padding-bottom: 1.2rem;
     border-bottom: 1px solid var(--border-gray);
+    page-break-inside: avoid;
 }
 
 .experience-item:last-child {
@@ -210,19 +238,19 @@ a:hover {
 .experience-header {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 0.75rem;
+    margin-bottom: 0.6rem;
     gap: 1rem;
     align-items: center;
 }
 
 .company-logo {
-    width: 40px;
-    height: 40px;
+    width: 35px;
+    height: 35px;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: 1rem;
+    margin-right: 0.75rem;
 }
 
 .company-logo img {
@@ -236,32 +264,40 @@ a:hover {
 }
 
 .position {
-    font-size: 1.1rem;
+    font-size: 1rem;
     font-weight: 600;
-    margin-bottom: 0.25rem;
+    margin-bottom: 0.2rem;
 }
 
 .company {
     color: var(--text-gray);
-    font-size: 0.95rem;
+    font-size: 0.85rem;
 }
 
 .experience-period {
     color: var(--text-gray);
-    font-size: 0.9rem;
+    font-size: 0.8rem;
     white-space: nowrap;
     font-style: italic;
 }
 
+.short-desc {
+    color: var(--text-gray);
+    font-size: 0.85rem;
+    line-height: 1.5;
+    margin-bottom: 0.6rem;
+}
+
 .responsibilities {
     list-style: none;
-    margin-bottom: 0.75rem;
+    margin-bottom: 0.6rem;
 }
 
 .responsibilities li {
-    padding-left: 1.2rem;
-    margin-bottom: 0.4rem;
+    padding-left: 1rem;
+    margin-bottom: 0.3rem;
     position: relative;
+    font-size: 0.85rem;
 }
 
 .responsibilities li:before {
@@ -272,102 +308,105 @@ a:hover {
 }
 
 .technologies {
-    font-size: 0.85rem;
+    font-size: 0.8rem;
     color: var(--text-gray);
     font-style: italic;
 }
 
 /* Education */
 .education-item {
-    margin-bottom: 1rem;
+    margin-bottom: 0.8rem;
+    font-size: 0.9rem;
 }
 
 .education-header {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.3rem;
 }
 
 .degree {
-    font-size: 1rem;
+    font-size: 0.95rem;
     font-weight: 600;
 }
 
 .education-period {
     color: var(--text-gray);
-    font-size: 0.9rem;
+    font-size: 0.8rem;
     font-style: italic;
 }
 
 .institution {
     color: var(--text-gray);
-    font-size: 0.95rem;
+    font-size: 0.85rem;
 }
 
 /* Skills */
 .skill-block {
-    margin-bottom: 1rem;
+    margin-bottom: 0.8rem;
 }
 
 .skill-title {
-    font-size: 1rem;
+    font-size: 0.95rem;
     font-weight: 600;
-    margin-bottom: 0.4rem;
+    margin-bottom: 0.3rem;
 }
 
 .skill-list {
     color: var(--text-gray);
-    font-size: 0.95rem;
+    font-size: 0.85rem;
 }
 
 /* Projects */
 .project-item {
-    margin-bottom: 1.5rem;
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
 }
 
 .project-header {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.3rem;
 }
 
 .project-name {
-    font-size: 1.1rem;
+    font-size: 1rem;
     font-weight: 600;
 }
 
 .project-period {
     color: var(--text-gray);
-    font-size: 0.9rem;
+    font-size: 0.8rem;
     font-style: italic;
 }
 
 .project-role {
     color: var(--text-gray);
-    font-size: 0.9rem;
-    margin-bottom: 0.5rem;
+    font-size: 0.85rem;
+    margin-bottom: 0.3rem;
 }
 
 .project-description {
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.3rem;
+    font-size: 0.85rem;
 }
 
 /* Certifications & Awards */
 .cert-item,
 .award-item {
-    margin-bottom: 0.5rem;
-    font-size: 0.95rem;
+    margin-bottom: 0.4rem;
+    font-size: 0.85rem;
 }
 
 /* Languages */
 .languages-list {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 0.75rem;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
 }
 
 .language-item {
-    font-size: 0.95rem;
+    font-size: 0.85rem;
 }
 
 /* Footer */
@@ -378,55 +417,6 @@ footer {
     font-size: 0.85rem;
 }
 
-/* Responsive */
-@media (max-width: 768px) {
-    .cv-paper {
-        padding: 2rem 1.5rem;
-    }
-
-    .cv-name {
-        font-size: 2rem;
-    }
-
-    .cv-header {
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-    }
-    
-    .cv-photo {
-        order: -1;
-        margin-bottom: 1rem;
-    }
-
-    .experience-header,
-    .project-header,
-    .education-header {
-        flex-direction: column;
-        gap: 0.25rem;
-    }
-    
-    .company-logo {
-        display: none;
-    }
-}
-
-.no-print {}
-
-/* Print Styles for Photo */
-@media print {
-    .cv-photo {
-        width: 100px;
-        height: 100px;
-        border-width: 2px;
-    }
-    
-    .company-logo {
-        width: 30px;
-        height: 30px;
-    }
-}
-
 /* CV Length Toggle */
 .cv-length-toggle {
     display: flex;
@@ -459,10 +449,6 @@ footer {
 
 .cv-short .short-desc {
     display: block;
-    color: var(--text-gray);
-    font-size: 0.95rem;
-    line-height: 1.6;
-    margin-bottom: 0.75rem;
 }
 
 /* Long CV - Hide short descriptions */
@@ -475,13 +461,54 @@ footer {
     display: block;
 }
 
-/* Ensure lists display correctly in long mode */
 .cv-long .responsibilities {
     display: block;
 }
 
-/* Responsive adjustments */
-@media (max-width: 768px) {
+/* Responsive - tablet/mobile */
+@media (max-width: 900px) {
+    .cv-paper {
+        width: 100%;
+        min-height: auto;
+        padding: 15mm;
+        box-shadow: none;
+    }
+    
+    .cv-container {
+        padding: 1rem;
+    }
+    
+    .cv-name {
+        font-size: 1.8rem;
+    }
+    
+    .cv-header {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+    
+    .cv-photo {
+        order: -1;
+        margin-bottom: 1rem;
+    }
+    
+    .cv-contact {
+        grid-template-columns: 1fr;
+        text-align: center;
+    }
+    
+    .experience-header,
+    .project-header,
+    .education-header {
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+    
+    .company-logo {
+        display: none;
+    }
+    
     .action-bar-content {
         flex-wrap: wrap;
         justify-content: center;
@@ -494,3 +521,5 @@ footer {
         margin-top: 0.5rem;
     }
 }
+
+.no-print {}
diff --git a/static/css/print.css b/static/css/print.css
index 8878ab4..5ca0204 100644
--- a/static/css/print.css
+++ b/static/css/print.css
@@ -1,17 +1,15 @@
-/* Print Styles - Optimized for PDF Export */
+/* Print Styles - A4 Optimized */
 
 @media print {
-    /* Reset for print */
     * {
         -webkit-print-color-adjust: exact !important;
         print-color-adjust: exact !important;
         color-adjust: exact !important;
     }
 
-    /* Page setup */
     @page {
         size: A4;
-        margin: 1.5cm;
+        margin: 0;
     }
 
     body {
@@ -27,256 +25,173 @@
         display: none !important;
     }
 
-    /* CV Container adjustments */
+    /* CV Container - full page */
     .cv-container {
+        width: 100%;
         max-width: 100%;
         margin: 0;
         padding: 0;
+        gap: 0;
     }
 
     .cv-paper {
+        width: 210mm;
+        min-height: 297mm;
         background: white;
+        padding: 20mm;
         box-shadow: none;
-        border-radius: 0;
-        padding: 0;
-        min-height: auto;
+        margin: 0;
+        page-break-after: auto;
     }
 
-    /* Typography */
-    body {
-        font-size: 10pt;
-        line-height: 1.4;
+    /* Force page breaks where needed */
+    .page-break {
+        page-break-after: always;
     }
 
-    .cv-name {
-        font-size: 24pt;
-        page-break-after: avoid;
-    }
-
-    .cv-title {
-        font-size: 14pt;
-        page-break-after: avoid;
-    }
-
-    .section-title {
-        font-size: 14pt;
-        page-break-after: avoid;
-        margin-top: 1.5em;
-    }
-
-    /* Prevent page breaks */
-    .cv-header,
+    .avoid-break,
     .cv-section,
     .experience-item,
-    .project-item,
-    .education-item,
-    .award-item {
+    .project-item {
         page-break-inside: avoid;
     }
 
-    /* Links */
-    a {
-        color: #2563eb;
-        text-decoration: none;
-    }
-
-    a[href]:after {
-        content: none; /* Don't print URLs */
-    }
-
-    /* Compact spacing for print */
+    /* Header */
     .cv-header {
-        margin-bottom: 1em;
-        padding-bottom: 0.5em;
+        page-break-after: avoid;
+        margin-bottom: 15mm;
     }
 
-    .cv-section {
-        margin-bottom: 1.5em;
+    .cv-name {
+        font-size: 20pt;
     }
 
-    .experience-item,
-    .project-item {
-        margin-bottom: 1em;
-        padding-bottom: 0.75em;
+    .cv-title {
+        font-size: 12pt;
     }
 
-    /* Contact info - make it more compact */
-    .cv-contact {
-        grid-template-columns: repeat(2, 1fr);
-        gap: 0.3em;
+    .cv-photo {
+        width: 80px;
+        height: 80px;
+        border-width: 2px;
+    }
+
+    /* Sections */
+    .section-title {
+        font-size: 12pt;
+        margin-top: 10mm;
+        page-break-after: avoid;
+    }
+
+    .summary-text {
+        font-size: 9pt;
+        line-height: 1.5;
+    }
+
+    /* Experience */
+    .experience-item {
+        margin-bottom: 8mm;
+        padding-bottom: 8mm;
+    }
+
+    .position {
+        font-size: 10pt;
+    }
+
+    .company {
         font-size: 9pt;
     }
 
-    /* AI Section - maintain visibility in print */
-    .ai-section {
-        background: #f0f9ff !important;
-        border-left: 3px solid #2563eb !important;
-        padding: 1em !important;
-        margin: 1em 0 !important;
+    .experience-period {
+        font-size: 8pt;
     }
 
-    .ai-skill-category {
-        background: white !important;
-        padding: 0.75em !important;
-        margin-bottom: 0.5em;
-        box-shadow: none;
-        border: 1px solid #e5e5e5;
+    .short-desc,
+    .responsibilities li {
+        font-size: 9pt;
+        line-height: 1.4;
     }
 
-    .ai-achievements {
-        background: white !important;
-        padding: 0.75em !important;
-        border: 1px solid #e5e5e5;
+    .technologies {
+        font-size: 8pt;
     }
 
-    /* Skills grid - more compact */
-    .skills-grid {
-        grid-template-columns: repeat(2, 1fr);
-        gap: 0.75em;
+    .company-logo {
+        width: 25px;
+        height: 25px;
     }
 
-    .skill-category {
-        background: #f9fafb !important;
-        padding: 0.75em !important;
+    /* Education, Skills, etc */
+    .degree,
+    .skill-title,
+    .project-name {
+        font-size: 9.5pt;
     }
 
-    /* Certifications grid */
-    .certifications-grid {
-        grid-template-columns: repeat(2, 1fr);
-        gap: 0.5em;
+    .institution,
+    .skill-list,
+    .project-description {
+        font-size: 8.5pt;
     }
 
-    .certification-item {
-        background: #f9fafb !important;
-        padding: 0.75em !important;
+    /* Certifications & Awards */
+    .cert-item,
+    .award-item {
+        font-size: 8.5pt;
+        margin-bottom: 2mm;
     }
 
     /* Languages */
-    .languages-grid {
+    .languages-list {
         grid-template-columns: repeat(3, 1fr);
-        gap: 0.5em;
     }
 
     .language-item {
-        background: #f9fafb !important;
-        padding: 0.75em !important;
+        font-size: 8.5pt;
     }
 
-    /* Badges and tags */
-    .proficiency-badge,
-    .highlight-badge,
-    .soft-skill-tag {
-        -webkit-print-color-adjust: exact;
-        print-color-adjust: exact;
+    /* Contact info */
+    .cv-contact {
+        font-size: 8.5pt;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 2mm;
     }
 
-    .proficiency-badge {
-        background: #2563eb !important;
-        color: white !important;
-    }
-
-    .highlight-badge {
-        background: #fef3c7 !important;
-        color: #92400e !important;
-    }
-
-    .soft-skill-tag {
-        background: #e0e7ff !important;
-        color: #3730a3 !important;
+    /* Links - print URLs */
+    a {
+        color: #0066cc;
+        text-decoration: none;
     }
 
     /* Ensure borders print */
     .cv-header {
-        border-bottom: 2px solid #2563eb !important;
+        border-bottom: 1.5pt solid #2d2d2d !important;
     }
 
     .section-title {
-        border-bottom: 1px solid #e5e5e5 !important;
+        border-bottom: 0.5pt solid #dddddd !important;
     }
 
-    .experience-item,
-    .project-item,
-    .award-item {
-        border-bottom: 1px solid #e5e5e5 !important;
+    .experience-item {
+        border-bottom: 0.5pt solid #dddddd !important;
     }
 
-    /* Reduce list spacing */
-    .responsibilities,
-    .ai-skill-list,
-    .achievement-list,
-    .skill-items,
-    .project-highlights {
-        margin: 0.5em 0;
+    .experience-item:last-child {
+        border-bottom: none !important;
     }
 
-    .responsibilities li,
-    .ai-skill-list li,
-    .achievement-list li,
-    .skill-items li,
-    .project-highlights li {
-        margin-bottom: 0.25em;
+    /* Print both short and long version content */
+    .cv-short .long-only,
+    .cv-long .long-only {
+        display: block !important;
     }
 
-    /* Font size adjustments for print */
-    .summary-text {
-        font-size: 9.5pt;
-        line-height: 1.5;
+    .cv-short .short-desc {
+        display: none !important;
     }
 
-    .position {
-        font-size: 11pt;
-    }
-
-    .company,
-    .institution {
-        font-size: 9.5pt;
-    }
-
-    .responsibilities,
-    .project-description {
-        font-size: 9pt;
-    }
-
-    .technologies {
-        font-size: 8.5pt;
-    }
-
-    /* Optimize spacing */
-    .ai-description {
-        margin-bottom: 0.75em;
-    }
-
-    .experience-header,
-    .project-header,
-    .education-header {
-        margin-bottom: 0.5em;
-    }
-
-    /* Ensure stars print correctly */
-    .proficiency-stars {
-        color: #fbbf24 !important;
-    }
-
-    /* Compact soft skills */
-    .soft-skills-list {
-        gap: 0.25em;
-    }
-
-    .soft-skill-tag {
-        padding: 0.25em 0.5em;
-        font-size: 8pt;
-    }
-}
-
-/* Print button functionality */
-@media screen {
-    .print-only {
-        display: none;
-    }
-}
-
-@media print {
-    .print-only {
-        display: block;
+    /* Always print full CV in long mode */
+    .cv-long .short-desc {
+        display: none !important;
     }
 }