feat: optimize mobile layout with unified design system
Comprehensive mobile optimization (≤768px) for improved consistency and readability: - Center profile photo between name and intro text on mobile - Unify all logo/icon sizes to 60×60px for visual consistency - Standardize spacing across experience, courses, projects, and awards - Reduce font sizes proportionally for better mobile readability - Remove justified text alignment (except intro/skills) to prevent awkward spacing - Apply consistent 1rem gaps and 1.5rem padding throughout - Optimize sidebar items with reduced margins and font sizes Technical improvements: - Add comprehensive mobile breakpoint rules at 768px - Implement flexible photo positioning (absolute on desktop, static on mobile) - Ensure uniform typography scale across all content types
This commit is contained in:
juanatsap
+79
-21
@@ -185,6 +185,7 @@ func (h *CVHandler) CVContent(w http.ResponseWriter, r *http.Request) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ExportPDF handles PDF export requests using chromedp
|
// ExportPDF handles PDF export requests using chromedp
|
||||||
|
// TEMPORARILY DISABLED - Work in progress
|
||||||
func (h *CVHandler) ExportPDF(w http.ResponseWriter, r *http.Request) {
|
func (h *CVHandler) ExportPDF(w http.ResponseWriter, r *http.Request) {
|
||||||
// Get language from query parameter
|
// Get language from query parameter
|
||||||
lang := r.URL.Query().Get("lang")
|
lang := r.URL.Query().Get("lang")
|
||||||
@@ -198,33 +199,90 @@ func (h *CVHandler) ExportPDF(w http.ResponseWriter, r *http.Request) {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// Construct URL to generate PDF from
|
log.Printf("PDF export requested but temporarily disabled (redirecting to print friendly)")
|
||||||
// Use localhost instead of the actual server address to avoid network overhead
|
|
||||||
url := fmt.Sprintf("http://%s/?lang=%s", h.serverAddr, lang)
|
|
||||||
|
|
||||||
log.Printf("Generating PDF from URL: %s", url)
|
// Return HTML with message and redirect to print friendly
|
||||||
|
message := "PDF Export - Work in Progress"
|
||||||
// Generate PDF
|
body := "The PDF export feature is currently being improved. Please use the <strong>Print Friendly</strong> button instead (Ctrl+P or Cmd+P to save as PDF)."
|
||||||
pdfData, err := h.pdfGenerator.GenerateFromURL(r.Context(), url)
|
if lang == "es" {
|
||||||
if err != nil {
|
message = "Exportación PDF - En Desarrollo"
|
||||||
log.Printf("PDF generation failed: %v", err)
|
body = "La función de exportación a PDF está siendo mejorada. Por favor, usa el botón <strong>Imprimir Amigable</strong> en su lugar (Ctrl+P o Cmd+P para guardar como PDF)."
|
||||||
HandleError(w, r, InternalError(err))
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set response headers
|
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||||
filename := fmt.Sprintf("CV-Juan-Andres-Moreno-Rubio-%s.pdf", lang)
|
w.WriteHeader(http.StatusOK)
|
||||||
w.Header().Set("Content-Type", "application/pdf")
|
|
||||||
w.Header().Set("Content-Disposition", fmt.Sprintf("attachment; filename=%s", filename))
|
|
||||||
w.Header().Set("Content-Length", fmt.Sprintf("%d", len(pdfData)))
|
|
||||||
|
|
||||||
// Write PDF data
|
redirectMsg := "Redirecting in 5 seconds..."
|
||||||
if _, err := w.Write(pdfData); err != nil {
|
if lang == "es" {
|
||||||
log.Printf("Failed to write PDF response: %v", err)
|
redirectMsg = "Redirigiendo en 5 segundos..."
|
||||||
return
|
|
||||||
}
|
}
|
||||||
|
|
||||||
log.Printf("Successfully generated PDF: %s (%d bytes)", filename, len(pdfData))
|
html := fmt.Sprintf(`<!DOCTYPE html>
|
||||||
|
<html lang="%s">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>%s</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%%, #764ba2 100%%);
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
background: white;
|
||||||
|
padding: 3rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||||
|
max-width: 500px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: #333;
|
||||||
|
margin: 0 0 1rem 0;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
.redirect-info {
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: #f0f4ff;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
setTimeout(function() {
|
||||||
|
window.location.href = '/?lang=%s';
|
||||||
|
}, 5000);
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="icon">🚧</div>
|
||||||
|
<h1>%s</h1>
|
||||||
|
<p>%s</p>
|
||||||
|
<div class="redirect-info">
|
||||||
|
%s
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>`, lang, message, lang, message, body, redirectMsg)
|
||||||
|
|
||||||
|
w.Write([]byte(html))
|
||||||
}
|
}
|
||||||
|
|
||||||
// splitSkills splits skill categories between left (page 1) and right (page 2) sidebars
|
// splitSkills splits skill categories between left (page 1) and right (page 2) sidebars
|
||||||
|
|||||||
+333
-32
@@ -78,6 +78,12 @@ a:hover {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.site-title-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.site-icon {
|
.site-icon {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -88,6 +94,14 @@ a:hover {
|
|||||||
padding: 0 .5rem 0 1.5rem;
|
padding: 0 .5rem 0 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Mobile icon hidden by default, shown only on mobile */
|
||||||
|
.site-icon-mobile {
|
||||||
|
display: none;
|
||||||
|
color: #fff;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* Site logo and title links */
|
/* Site logo and title links */
|
||||||
.site-logo-link,
|
.site-logo-link,
|
||||||
.site-title-link {
|
.site-title-link {
|
||||||
@@ -236,7 +250,7 @@ iconify-icon {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
left: 3px;
|
left: 2px;
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
@@ -246,7 +260,7 @@ iconify-icon {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.icon-toggle input:checked + .icon-toggle-slider::before {
|
.icon-toggle input:checked + .icon-toggle-slider::before {
|
||||||
transform: translateX(45px);
|
transform: translateX(43px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-toggle input:checked + .icon-toggle-slider {
|
.icon-toggle input:checked + .icon-toggle-slider {
|
||||||
@@ -264,11 +278,11 @@ iconify-icon {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.icon-toggle-slider .icon-left {
|
.icon-toggle-slider .icon-left {
|
||||||
left: 8px;
|
left: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-toggle-slider .icon-right {
|
.icon-toggle-slider .icon-right {
|
||||||
right: 7px;
|
right: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-toggle input:not(:checked) + .icon-toggle-slider .icon-left {
|
.icon-toggle input:not(:checked) + .icon-toggle-slider .icon-left {
|
||||||
@@ -287,7 +301,7 @@ iconify-icon {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.icon-toggle input:checked + .icon-toggle-slider .icon-right {
|
.icon-toggle input:checked + .icon-toggle-slider .icon-right {
|
||||||
color: #fff;
|
color: #333;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -320,7 +334,8 @@ iconify-icon {
|
|||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 0.5rem;
|
/* gap: 0.5rem; */
|
||||||
|
gap: 0rem;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
letter-spacing: -0.01em;
|
letter-spacing: -0.01em;
|
||||||
@@ -329,6 +344,7 @@ iconify-icon {
|
|||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
|
min-width: 50px!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selector-btn:focus,
|
.selector-btn:focus,
|
||||||
@@ -520,7 +536,7 @@ iconify-icon {
|
|||||||
|
|
||||||
.theme-clean .cv-main {
|
.theme-clean .cv-main {
|
||||||
grid-column: 1 !important;
|
grid-column: 1 !important;
|
||||||
padding: 2rem !important;
|
padding: 2rem 3rem!important;
|
||||||
transition: all 0.3s ease-in-out;
|
transition: all 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -665,7 +681,7 @@ iconify-icon {
|
|||||||
|
|
||||||
.sidebar-content {
|
.sidebar-content {
|
||||||
font-family: 'Quicksand', sans-serif;
|
font-family: 'Quicksand', sans-serif;
|
||||||
font-size: 0.95em;
|
font-size: 0.95rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
@@ -730,6 +746,9 @@ iconify-icon {
|
|||||||
|
|
||||||
.cv-header-left {
|
.cv-header-left {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
/* Desktop: Add right padding to make room for the photo */
|
||||||
|
padding-right: 185px; /* Photo width (150px) + gap (35px) */
|
||||||
}
|
}
|
||||||
|
|
||||||
.cv-photo {
|
.cv-photo {
|
||||||
@@ -739,12 +758,11 @@ iconify-icon {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 3px solid white;
|
border: 3px solid white;
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||||
|
|
||||||
/* Colocación a manopla de la foto :) */
|
/* Desktop: Position photo in the right padding area */
|
||||||
margin: 15px;
|
position: absolute;
|
||||||
{{/* top: 25px; */}}
|
top: 15px;
|
||||||
position: relative;
|
right: 15px; /* Margin from the right edge */
|
||||||
right: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cv-photo img {
|
.cv-photo img {
|
||||||
@@ -973,7 +991,7 @@ iconify-icon {
|
|||||||
|
|
||||||
.short-desc {
|
.short-desc {
|
||||||
color: var(--text-dark);
|
color: var(--text-dark);
|
||||||
font-size: 0.9rem;
|
font-size: 0.95rem;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
}
|
}
|
||||||
@@ -993,7 +1011,7 @@ iconify-icon {
|
|||||||
padding-left: 1.2rem;
|
padding-left: 1.2rem;
|
||||||
margin-bottom: 0.4rem;
|
margin-bottom: 0.4rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 0.9rem;
|
font-size: 0.95rem;
|
||||||
color: var(--text-dark);
|
color: var(--text-dark);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
@@ -1047,7 +1065,7 @@ iconify-icon {
|
|||||||
/* Education */
|
/* Education */
|
||||||
.education-item {
|
.education-item {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
font-size: 0.9rem;
|
font-size: 0.95rem;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: var(--text-dark);
|
color: var(--text-dark);
|
||||||
}
|
}
|
||||||
@@ -1061,7 +1079,7 @@ iconify-icon {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.language-item {
|
.language-item {
|
||||||
font-size: 1.1rem!important;
|
font-size: 0.95rem!important;
|
||||||
color: var(--text-dark);
|
color: var(--text-dark);
|
||||||
margin-bottom: 0.3rem!important;
|
margin-bottom: 0.3rem!important;
|
||||||
line-height: 1.4!important;
|
line-height: 1.4!important;
|
||||||
@@ -1258,7 +1276,7 @@ iconify-icon {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.project-desc {
|
.project-desc {
|
||||||
font-size: 0.9rem;
|
font-size: 0.95rem;
|
||||||
color: var(--text-dark);
|
color: var(--text-dark);
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
@@ -1276,7 +1294,7 @@ iconify-icon {
|
|||||||
margin-top: -1.5rem;
|
margin-top: -1.5rem;
|
||||||
padding-top: 0rem;
|
padding-top: 0rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 0.95em;
|
font-size: 0.95rem;
|
||||||
color: var(--text-gray);
|
color: var(--text-gray);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1298,7 +1316,7 @@ iconify-icon {
|
|||||||
margin-bottom: 0!important;
|
margin-bottom: 0!important;
|
||||||
line-height: 1.4!important;
|
line-height: 1.4!important;
|
||||||
margin-left: 2rem!important;
|
margin-left: 2rem!important;
|
||||||
font-size: 1.1rem!important;
|
font-size: 0.95rem!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reference-item a {
|
.reference-item a {
|
||||||
@@ -1422,9 +1440,9 @@ footer {
|
|||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cv-photo {
|
.intro-text {
|
||||||
width: 120px;
|
font-size: 0.9em;
|
||||||
height: 150px;
|
margin-top: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-bar-content {
|
.action-bar-content {
|
||||||
@@ -1447,11 +1465,6 @@ footer {
|
|||||||
gap: 0.25rem;
|
gap: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro-text {
|
|
||||||
font-size: 0.9em;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== Hide header controls, show in menu ========== */
|
/* ========== Hide header controls, show in menu ========== */
|
||||||
/* Keep language selector visible in header */
|
/* Keep language selector visible in header */
|
||||||
.view-controls-center {
|
.view-controls-center {
|
||||||
@@ -1702,7 +1715,7 @@ a:focus {
|
|||||||
margin-bottom: 0!important;
|
margin-bottom: 0!important;
|
||||||
line-height: 1.4!important;
|
line-height: 1.4!important;
|
||||||
margin-left: 2rem!important;
|
margin-left: 2rem!important;
|
||||||
font-size: 1.1rem!important;
|
font-size: 0.95rem!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Award item with logo */
|
/* Award item with logo */
|
||||||
@@ -1839,7 +1852,7 @@ a:focus {
|
|||||||
.course-desc {
|
.course-desc {
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
color: var(--text-gray);
|
color: var(--text-gray);
|
||||||
font-size: 0.95em;
|
font-size: 0.95rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reference-item {
|
.reference-item {
|
||||||
@@ -1929,6 +1942,11 @@ a:focus {
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.site-title {
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===============================================
|
/* ===============================================
|
||||||
@@ -2082,7 +2100,7 @@ a:focus {
|
|||||||
|
|
||||||
.submenu-content {
|
.submenu-content {
|
||||||
position: fixed; /* Changed from absolute to fixed to break out of parent overflow */
|
position: fixed; /* Changed from absolute to fixed to break out of parent overflow */
|
||||||
left: 278px; /* Slight overlap with menu to eliminate any gap */
|
left: 232px; /* Slight overlap with menu to eliminate any gap */
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
|
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@@ -2279,6 +2297,11 @@ html {
|
|||||||
padding: 0.75rem 1rem;
|
padding: 0.75rem 1rem;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.site-title {
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide menu overlay on print */
|
/* Hide menu overlay on print */
|
||||||
@@ -2831,3 +2854,281 @@ html {
|
|||||||
margin-top: 10px !important;
|
margin-top: 10px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========================================
|
||||||
|
Responsive: Small Screens (up to 540px)
|
||||||
|
======================================== */
|
||||||
|
|
||||||
|
/* ========================================
|
||||||
|
Responsive: Tablet Screens - Center Photo (up to 768px)
|
||||||
|
======================================== */
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
/* ========================================
|
||||||
|
TYPOGRAPHY - Subtle font size reductions
|
||||||
|
======================================== */
|
||||||
|
.cv-name {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.years-experience {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-title {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.experience-period,
|
||||||
|
.experience-separator,
|
||||||
|
.experience-location,
|
||||||
|
.experience-duration {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.position {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.short-desc,
|
||||||
|
.responsibilities li {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========================================
|
||||||
|
TEXT ALIGNMENT FIXES - Selective alignment
|
||||||
|
======================================== */
|
||||||
|
/* Keep justified for intro and skills */
|
||||||
|
.intro-text,
|
||||||
|
.summary-text {
|
||||||
|
text-align: justify;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-text {
|
||||||
|
margin-top: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Left-align for course/project descriptions */
|
||||||
|
.course-desc,
|
||||||
|
.project-desc {
|
||||||
|
text-align: left !important;
|
||||||
|
font-size: 0.85rem !important;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========================================
|
||||||
|
HEADER LAYOUT - Centered photo
|
||||||
|
======================================== */
|
||||||
|
.cv-header-content {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cv-header-left {
|
||||||
|
width: 100%;
|
||||||
|
position: static;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cv-photo {
|
||||||
|
position: static;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
max-width: 250px;
|
||||||
|
margin: 1.5rem auto;
|
||||||
|
text-align: center;
|
||||||
|
right: auto;
|
||||||
|
top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cv-photo img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========================================
|
||||||
|
UNIFIED LOGO/ICON SIZING - Consistent 60px
|
||||||
|
======================================== */
|
||||||
|
.company-logo,
|
||||||
|
.course-icon,
|
||||||
|
.project-icon,
|
||||||
|
.award-logo {
|
||||||
|
width: 60px !important;
|
||||||
|
height: 60px !important;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-logo img,
|
||||||
|
.course-icon img,
|
||||||
|
.project-icon img,
|
||||||
|
.award-logo img {
|
||||||
|
width: 60px !important;
|
||||||
|
height: 60px !important;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-company-icon,
|
||||||
|
.default-course-icon,
|
||||||
|
.default-project-icon,
|
||||||
|
.default-award-icon {
|
||||||
|
width: 60px !important;
|
||||||
|
height: 60px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========================================
|
||||||
|
CONSISTENT ITEM LAYOUT - Uniform spacing
|
||||||
|
======================================== */
|
||||||
|
.experience-item,
|
||||||
|
.course-item,
|
||||||
|
.project-item,
|
||||||
|
.award-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 1rem !important;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 2rem !important;
|
||||||
|
padding-bottom: 1.5rem !important;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.experience-item {
|
||||||
|
margin-bottom: 1.8rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.experience-content,
|
||||||
|
.course-content,
|
||||||
|
.project-content,
|
||||||
|
.award-content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========================================
|
||||||
|
FONT SIZE CONSISTENCY - Titles and descriptions
|
||||||
|
======================================== */
|
||||||
|
.course-title,
|
||||||
|
.project-title,
|
||||||
|
.award-item strong {
|
||||||
|
font-size: 0.95rem !important;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-item small,
|
||||||
|
.project-item small,
|
||||||
|
.award-item small {
|
||||||
|
font-size: 0.8rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-desc,
|
||||||
|
.project-desc,
|
||||||
|
.award-desc {
|
||||||
|
font-size: 0.85rem !important;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========================================
|
||||||
|
RESPONSIBILITIES MOBILE OPTIMIZATION
|
||||||
|
======================================== */
|
||||||
|
.responsibilities li:has(img),
|
||||||
|
.responsibilities li:has(iconify-icon) {
|
||||||
|
grid-template-columns: 60px 1fr !important;
|
||||||
|
gap: 0.75rem !important;
|
||||||
|
margin-bottom: 0.75rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.responsibilities li img,
|
||||||
|
.responsibilities li iconify-icon.default-company-icon {
|
||||||
|
width: 60px !important;
|
||||||
|
height: 60px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========================================
|
||||||
|
SIDEBAR ITEMS MOBILE OPTIMIZATION
|
||||||
|
======================================== */
|
||||||
|
.language-item,
|
||||||
|
.reference-item,
|
||||||
|
.other-content {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
line-height: 1.4 !important;
|
||||||
|
margin-left: 1rem !important;
|
||||||
|
font-size: 0.85rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========================================
|
||||||
|
Responsive: All Mobile Screens (up to 540px)
|
||||||
|
======================================== */
|
||||||
|
|
||||||
|
@media (max-width: 540px) {
|
||||||
|
/* Hide year from title in mobile view */
|
||||||
|
.site-title-year {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide desktop logo, show mobile icon in title */
|
||||||
|
.site-logo-link {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-icon-mobile {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Align language selector to the right */
|
||||||
|
.site-title {
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-selector {
|
||||||
|
margin-left: auto;
|
||||||
|
padding-left: 0;
|
||||||
|
margin-right: 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== Language Selector - Show Short Names Only ========== */
|
||||||
|
.language-selector .selector-btn {
|
||||||
|
position: relative;
|
||||||
|
padding: 0.4rem 0.75rem;
|
||||||
|
min-width: 40px;
|
||||||
|
font-size: 0; /* Hide actual text */
|
||||||
|
overflow: visible;
|
||||||
|
transition: font-size 0.3s ease;
|
||||||
|
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: 0.95rem;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Keep short names on hover (no expansion) */
|
||||||
|
.language-selector .selector-btn:hover {
|
||||||
|
font-size: 0;
|
||||||
|
min-width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-selector .selector-btn:hover::before {
|
||||||
|
content: attr(data-short);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
+51
-39
@@ -44,22 +44,52 @@
|
|||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide ALL icons in print */
|
/* ===================================
|
||||||
iconify-icon,
|
SHOW ALL ICONS, LOGOS, AND BADGES - Print Default
|
||||||
.section-icon,
|
=================================== */
|
||||||
.default-company-icon,
|
|
||||||
.default-project-icon,
|
/* Section title icons - smaller for print */
|
||||||
.default-course-icon,
|
.section-icon {
|
||||||
.default-award-icon {
|
width: 16px !important;
|
||||||
display: none !important;
|
height: 16px !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
margin-right: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide company/project/course logos */
|
/* Company/Project/Course logos - compact for print */
|
||||||
.company-logo,
|
.company-logo,
|
||||||
.project-icon,
|
.project-icon,
|
||||||
.course-icon,
|
.course-icon,
|
||||||
.award-logo {
|
.award-logo {
|
||||||
display: none !important;
|
width: 40px !important;
|
||||||
|
height: 40px !important;
|
||||||
|
flex-shrink: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-logo img,
|
||||||
|
.project-icon img,
|
||||||
|
.course-icon img,
|
||||||
|
.award-logo img {
|
||||||
|
width: 40px !important;
|
||||||
|
height: 40px !important;
|
||||||
|
object-fit: contain !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Default fallback icons - show at print size */
|
||||||
|
.default-company-icon,
|
||||||
|
.default-project-icon,
|
||||||
|
.default-course-icon,
|
||||||
|
.default-award-icon {
|
||||||
|
width: 40px !important;
|
||||||
|
height: 40px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Badges - keep visible for print */
|
||||||
|
.current-badge,
|
||||||
|
.expired-badge,
|
||||||
|
.maintained-badge {
|
||||||
|
font-size: 7pt !important;
|
||||||
|
padding: 1px 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===================================
|
/* ===================================
|
||||||
@@ -191,12 +221,12 @@
|
|||||||
PHOTO - FIXED ASPECT RATIO (3:4 Portrait)
|
PHOTO - FIXED ASPECT RATIO (3:4 Portrait)
|
||||||
=================================== */
|
=================================== */
|
||||||
.cv-photo {
|
.cv-photo {
|
||||||
width: 60px !important;
|
width: 90px !important;
|
||||||
height: 80px !important; /* Maintains 3:4 ratio */
|
height: 120px !important; /* Maintains 3:4 ratio */
|
||||||
object-fit: contain !important; /* Show full photo, no crop */
|
object-fit: contain !important; /* Show full photo, no crop */
|
||||||
border: none !important; /* Remove border */
|
border: none !important; /* Remove border */
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
margin: 10px 15px 10px 10px !important;
|
margin: 0px 0px 20px 20px !important;
|
||||||
page-break-inside: avoid;
|
page-break-inside: avoid;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -241,10 +271,6 @@
|
|||||||
margin-bottom: 3mm !important; /* More space for lists */
|
margin-bottom: 3mm !important; /* More space for lists */
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-icon {
|
|
||||||
display: none; /* Hide section icons in print */
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-text {
|
.summary-text {
|
||||||
font-size: 9pt;
|
font-size: 9pt;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
@@ -254,6 +280,8 @@
|
|||||||
EXPERIENCE - REDUCED SPACING (60px → 26px)
|
EXPERIENCE - REDUCED SPACING (60px → 26px)
|
||||||
=================================== */
|
=================================== */
|
||||||
.experience-item {
|
.experience-item {
|
||||||
|
display: flex !important; /* Show logos side-by-side with content */
|
||||||
|
gap: 12px !important;
|
||||||
margin-bottom: 4mm !important; /* ~15px, down from 40px */
|
margin-bottom: 4mm !important; /* ~15px, down from 40px */
|
||||||
padding-bottom: 3mm !important; /* ~11px, down from 32px */
|
padding-bottom: 3mm !important; /* ~11px, down from 32px */
|
||||||
border-bottom: 0.5pt solid #dddddd !important;
|
border-bottom: 0.5pt solid #dddddd !important;
|
||||||
@@ -305,7 +333,7 @@
|
|||||||
line-height: 1.4 !important;
|
line-height: 1.4 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* All logos already hidden above - no exceptions */
|
/* Logos are visible at 40x40 for compact print layout */
|
||||||
|
|
||||||
/* ===================================
|
/* ===================================
|
||||||
PROJECTS & COURSES
|
PROJECTS & COURSES
|
||||||
@@ -313,7 +341,8 @@
|
|||||||
.project-item,
|
.project-item,
|
||||||
.course-item,
|
.course-item,
|
||||||
.award-item {
|
.award-item {
|
||||||
display: block !important; /* Remove flex/grid layouts for print */
|
display: flex !important; /* Show logos side-by-side with content */
|
||||||
|
gap: 12px !important;
|
||||||
margin-bottom: 4mm !important;
|
margin-bottom: 4mm !important;
|
||||||
padding-bottom: 3mm !important;
|
padding-bottom: 3mm !important;
|
||||||
border-bottom: 0.5pt solid #dddddd !important;
|
border-bottom: 0.5pt solid #dddddd !important;
|
||||||
@@ -345,13 +374,13 @@
|
|||||||
font-weight: 600 !important;
|
font-weight: 600 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Icons/logos already hidden - display: none above */
|
/* Logos visible at 40x40 - default icons remain hidden */
|
||||||
|
|
||||||
/* Consistent item titles */
|
/* Consistent item titles */
|
||||||
.project-title,
|
.project-title,
|
||||||
.course-title,
|
.course-title,
|
||||||
.award-item strong,
|
.experience-title,
|
||||||
.course-item strong {
|
.award-title {
|
||||||
font-size: 10pt !important;
|
font-size: 10pt !important;
|
||||||
font-weight: 600 !important;
|
font-weight: 600 !important;
|
||||||
line-height: 1.3 !important;
|
line-height: 1.3 !important;
|
||||||
@@ -382,14 +411,6 @@
|
|||||||
margin-left: 0.5mm !important;
|
margin-left: 0.5mm !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Course title styling to match experience */
|
|
||||||
.course-title {
|
|
||||||
font-size: 10pt !important;
|
|
||||||
font-weight: 600 !important;
|
|
||||||
line-height: 1.3 !important;
|
|
||||||
margin-bottom: 0.5mm !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Course metadata (date, location) - match experience style */
|
/* Course metadata (date, location) - match experience style */
|
||||||
.course-period,
|
.course-period,
|
||||||
.course-location,
|
.course-location,
|
||||||
@@ -531,15 +552,6 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===================================
|
|
||||||
BADGES - Hidden for minimal print
|
|
||||||
=================================== */
|
|
||||||
.current-badge,
|
|
||||||
.expired-badge,
|
|
||||||
.maintained-badge {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===================================
|
/* ===================================
|
||||||
CV LENGTH TOGGLE - Force Short Version for Print Friendly
|
CV LENGTH TOGGLE - Force Short Version for Print Friendly
|
||||||
=================================== */
|
=================================== */
|
||||||
|
|||||||
@@ -41,12 +41,15 @@
|
|||||||
<div class="cv-header-left">
|
<div class="cv-header-left">
|
||||||
<h1 class="cv-name">Moreno Rubio, Juan Andrés</h1>
|
<h1 class="cv-name">Moreno Rubio, Juan Andrés</h1>
|
||||||
<p class="years-experience">{{.YearsOfExperience}} {{if eq .Lang "es"}}años de experiencia{{else}}years of experience{{end}}</p>
|
<p class="years-experience">{{.YearsOfExperience}} {{if eq .Lang "es"}}años de experiencia{{else}}years of experience{{end}}</p>
|
||||||
|
|
||||||
|
<!-- Photo positioned for mobile (centered between name and intro) -->
|
||||||
|
<div class="cv-photo">
|
||||||
|
<img src="/static/images/profile/dni.jpeg" alt="{{.CV.Personal.Name}}" onerror="this.src='/static/images/profile/placeholder.svg'">
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Intro/Excerpt Text - No section heading, just the text -->
|
<!-- Intro/Excerpt Text - No section heading, just the text -->
|
||||||
<div class="intro-text">{{.CV.Summary}}</div>
|
<div class="intro-text">{{.CV.Summary}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cv-photo">
|
|
||||||
<img src="/static/images/profile/dni.jpeg" alt="{{.CV.Personal.Name}}" onerror="this.src='/static/images/profile/placeholder.svg'">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
+14
-9
@@ -99,20 +99,25 @@
|
|||||||
<div class="action-bar-content">
|
<div class="action-bar-content">
|
||||||
<!-- Left: Site Title + Hamburger Menu + Language -->
|
<!-- Left: Site Title + Hamburger Menu + Language -->
|
||||||
<div class="site-title">
|
<div class="site-title">
|
||||||
<a href="/" class="site-logo-link" id="logoLink" aria-label="Home">
|
<!-- Left group: Logo + Hamburger -->
|
||||||
<iconify-icon icon="mdi:file-account" width="24" height="24" class="site-icon"></iconify-icon>
|
<div class="site-title-left">
|
||||||
</a>
|
<a href="/" class="site-logo-link" id="logoLink" aria-label="Home">
|
||||||
|
<iconify-icon icon="mdi:file-account" width="24" height="24" class="site-icon"></iconify-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
<!-- Hamburger Menu Button -->
|
<!-- Hamburger Menu Button -->
|
||||||
<button class="hamburger-btn" aria-label="Toggle navigation menu">
|
<button class="hamburger-btn" aria-label="Toggle navigation menu">
|
||||||
<iconify-icon icon="mdi:menu" width="24" height="24"></iconify-icon>
|
<iconify-icon icon="mdi:menu" width="24" height="24"></iconify-icon>
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Center: Title -->
|
||||||
<a href="/" class="site-title-link" id="titleLink">
|
<a href="/" class="site-title-link" id="titleLink">
|
||||||
<span class="site-title-text">CV JAMR - {{.CurrentYear}}</span>
|
<iconify-icon icon="mdi:file-account" width="20" height="20" class="site-icon-mobile"></iconify-icon>
|
||||||
|
<span class="site-title-text">CV JAMR<span class="site-title-year"> - {{.CurrentYear}}</span></span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Language selector (next to title) -->
|
<!-- Right: Language selector -->
|
||||||
<div class="language-selector">
|
<div class="language-selector">
|
||||||
<button class="selector-btn {{if eq .Lang "en"}}active{{end}}" data-short="EN" onclick="selectLanguage('en')" aria-label="English">
|
<button class="selector-btn {{if eq .Lang "en"}}active{{end}}" data-short="EN" onclick="selectLanguage('en')" aria-label="English">
|
||||||
English
|
English
|
||||||
|
|||||||
Reference in New Issue
Block a user