From 35c5106521b0d7edeb532e6503e09b4c09b4e49d Mon Sep 17 00:00:00 2001
From: Dejvino <dejvino@gmail.com>
Date: Wed, 20 May 2026 17:17:34 +0200
Subject: [PATCH] Add comprehensive CSS enhancements: avatar styling, gradient
 removal, and print layout support

---
 style.css | 213 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 212 insertions(+), 1 deletion(-)

diff --git a/style.css b/style.css
index a8d3aad..7b452b1 100644
--- a/style.css
+++ b/style.css
@@ -112,6 +112,16 @@ body {
     }
 
     /* Desktop Grid Spans */
+    .avatar {
+        display: block !important;
+        max-width: 80px !important;
+        max-height: 100px !important;
+        object-fit: cover !important;
+        border: 2px solid #ccc !important;
+        border-radius: 4px !important;
+        filter: none !important;
+        margin-right: 16px !important;
+    }
     .profile { grid-column: span 3; }
     .about { grid-column: span 2; }
     .interests { grid-column: span 1; }
@@ -124,6 +134,16 @@ body {
     .education { grid-column: span 3; }
 
     /* Shuffle Logic */
+    .avatar {
+        display: block !important;
+        max-width: 80px !important;
+        max-height: 100px !important;
+        object-fit: cover !important;
+        border: 2px solid #ccc !important;
+        border-radius: 4px !important;
+        filter: none !important;
+        margin-right: 16px !important;
+    }
     .profile { transform: rotate(0.1deg); }
     .about { transform: translate(-4px, 2px) rotate(-0.5deg); }
     .interests { transform: translate(6px, -2px) rotate(0.4deg); }
@@ -316,7 +336,10 @@ address.mono-addr span {
     pointer-events: none;
 }
 
-.link-grid { list-style: none; padding: 0; display: grid; gap: 10px; }
+.link-grid {
+    list-style: none; padding: 0; display: grid; gap: 10px;
+}
+
 
 .link-grid a { 
     font-size: 0.75rem;
@@ -443,5 +466,193 @@ a { color: var(--link-color); text-decoration: none; }
     .experience, .skills, .education { 
         grid-column: span 1; 
     }
+    .avatar {
+        display: block !important;
+        max-width: 80px !important;
+        max-height: 100px !important;
+        object-fit: cover !important;
+        border: 2px solid #ccc !important;
+        border-radius: 4px !important;
+        filter: none !important;
+        margin-right: 16px !important;
+    }
     .profile { flex-direction: column; text-align: center; }
 }
+
+/* Print mode */
+/* Condensed Print Mode - White Background */
+@media print {
+    /* Ensure hidden elements stay hidden in print */
+    .hidden { display: none !important; }
+    .cv-mode .hidden { display: none !important; }
+    /* Hide CV content unless CV mode is active */
+    .cv-container, .cv-section {
+        display: none !important;
+    }
+    .cv-mode .cv-container, .cv-mode .cv-section {
+        display: block !important;
+    }
+    /* Hide navigation card in print */
+    .card.links { display: none !important; }
+    * {
+        box-sizing: border-box;
+        background: transparent !important;
+        box-shadow: none !important;
+        filter: none !important;
+        transition: none !important;
+        color: #000 !important;
+    }
+    
+    body {
+        background: #fff !important;
+        color: #000 !important;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        min-height: 0 !important;
+    }
+    
+    .bento-grid {
+        display: block !important;
+        max-width: 100% !important;
+        gap: 8px !important;
+        padding: 0 !important;
+        margin: 0 !important;
+    }
+    
+    .card {
+        background: #fff !important;
+        border: 1px solid #ccc !important;
+        border-radius: 4px !important;
+        padding: 12px !important;
+        margin: 8px 0 !important;
+        clip-path: none !important;
+        filter: none !important;
+    }
+    
+    /* Hide interactive elements */
+    .cv-toggle-container, .hiring-toggle, .switch,
+    .link-grid, .links::after, .profile::before,
+    .hiring-cta, .hiring-btn, .cv-section::after {
+        display: none !important;
+    }
+    
+    /* CV Container – hidden unless CV mode */
+    
+    /* Reset animations */
+    .reveal, .fade-out, .tag, img {
+        animation: none !important;
+        transition: none !important;
+        filter: grayscale(100%) !important;
+        opacity: 1 !important;
+    }
+    
+    /* Show content */
+    .experience, .skills, .education {
+        display: block !important;
+        opacity: 1 !important;
+        max-height: none !important;
+        overflow: visible !important;
+        pointer-events: auto !important;
+        margin: 4px 0 !important;
+    }
+    
+    /* Profile layout */
+    .avatar {
+        display: block !important;
+        max-width: 80px !important;
+        max-height: 100px !important;
+        object-fit: cover !important;
+        border: 2px solid #ccc !important;
+        border-radius: 4px !important;
+        filter: none !important;
+        margin-right: 16px !important;
+    }
+    .profile {
+        display: flex !important;
+        align-items: center !important;
+        gap: 16px !important;
+        padding: 8px !important;
+        flex-wrap: wrap !important;
+    }
+    
+    /* Links grid */
+    .link-grid a {
+        color: #000 !important;
+        background: #f5f5f5 !important;
+        padding: 6px 10px !important;
+        border: none !important;
+        display: inline-block !important;
+        margin: 2px !important;
+        font-size: 0.85em !important;
+    }
+    
+    /* Typography */
+    h1 {
+        font-size: 18px !important;
+        margin: 4px 0 8px 0 !important;
+        padding-bottom: 4px !important;
+        border-bottom: 1px solid #000 !important;
+        color: #000 !important;
+    }
+    
+    h2 {
+        font-size: 11px !important;
+        text-transform: uppercase !important;
+        color: #000 !important;
+        margin: 8px 0 4px 0 !important;
+        padding: 4px !important;
+        border-bottom: 1px solid #eee !important;
+        font-weight: bold !important;
+    }
+    
+    h3, h4, h5, h6 {
+        font-size: 10px !important;
+        margin: 4px 0 !important;
+        color: #000 !important;
+        font-weight: bold !important;
+    }
+    
+    a {
+        color: #000 !important;
+        text-decoration: underline !important;
+    }
+    
+    /* Remove neon effects */
+    .tag {
+        opacity: 1 !important;
+        background: #f5f5f5 !important;
+        border: 1px solid #ccc !important;
+        padding: 2px 6px !important;
+        font-size: 0.8em !important;
+    }
+    
+    /* Condensed spacing */
+    .card h1 { margin: 0 0 4px 0 !important; }
+    .card h2 { margin: 4px 0 8px 0 !important; }
+    .card p { margin: 4px 0 !important; font-size: 0.9em !important; }
+    .card li { margin: 2px 0 !important; font-size: 0.9em !important; }
+    
+    /* Remove gradients and shadows */
+    .profile .links { display: none !important; }
+    
+    /* Ensure images don't take too much space */
+    img {
+        max-width: 60px !important;
+        max-height: 80px !important;
+        object-fit: contain !important;
+        filter: grayscale(100%) !important;
+    }
+    
+    /* Better column layout for print */
+    @page {
+        margin: 1cm;
+    }
+    
+    /* Reduce page breaks */
+    .card { page-break-inside: avoid !important; }
+
+    /* Ensure hidden elements stay hidden in print */
+    .hidden { display: none !important; }
+    .cv-mode .hidden { display: none !important; }
+}