From c435ceacdab7f194db4b7d2e663fdb48ad37072f Mon Sep 17 00:00:00 2001 From: Dejvino Date: Mon, 27 Jul 2026 19:13:59 +0200 Subject: [PATCH] tweak print style to 2 pages --- data.json | 2 +- style.css | 211 ++++++++++++++++++++++++++++++++++++------------------ 2 files changed, 143 insertions(+), 70 deletions(-) diff --git a/data.json b/data.json index 6eaf268..397ee7a 100644 --- a/data.json +++ b/data.json @@ -148,7 +148,7 @@ "thesis": "Parallel implementation of force-field decompression algorithm. Executed on a supercomputer cluster to perform real-time simulation of molecular forces, providing haptic feedback to a 3D pointing device." } ], - "philosophy": "I design platform layers that stay out of the way while enabling everything else. Quiet infrastructure. Measurable value." + "philosophy": "I design platform layers that stay out of the way while enabling everything else.
Quiet infrastructure. Measurable value." }, "interests": [ { diff --git a/style.css b/style.css index e602cdd..055acb5 100644 --- a/style.css +++ b/style.css @@ -276,11 +276,14 @@ body { .hero { display: flex; - flex-direction: column; + flex-direction: row; + flex-wrap: wrap; gap: 16px; + align-items: center; } .hero-identity { + flex: 1 1 100%; display: flex; align-items: center; gap: 20px; @@ -328,6 +331,7 @@ body { .hero-description { margin: 0; + flex: 1 1 100%; } .hero-description p { @@ -448,14 +452,12 @@ body { * Contact pills – gold accent */ .hero-contacts { - display: flex; + display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px; - width: 100%; } - .contact-pill { color: var(--link-color); background: rgba(255, 215, 0, 0.06); @@ -479,13 +481,14 @@ body { * Nav pills – cyan accent */ .hero-nav { - display: flex; + display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px; - padding-top: 12px; - border-top: 1px solid rgba(0, 243, 255, 0.12); - width: 100%; + padding-top: 0; + border-top: none; + border-left: 1px solid rgba(0, 243, 255, 0.15); + padding-left: 16px; } @@ -928,6 +931,14 @@ a { .hero-contacts, .hero-nav { justify-content: center; + gap: 4px; + padding: 2px; + margin: 2px; + } + + .hero-nav { + border-left: none; + border-top: 1px solid rgba(0, 243, 255, 0.12); } .pill { @@ -939,6 +950,10 @@ a { .pill-url { display: inline; } + + .card blockquote.philosophy { + display: none; + } } /* Tamed Cyberpunk Overrides for CV Mode */ @@ -1109,7 +1124,7 @@ body.cv-mode { .bento-grid { display: block !important; max-width: 100% !important; - gap: 8px !important; + gap: 4px !important; padding: 0 !important; margin: 0 !important; } @@ -1117,9 +1132,9 @@ body.cv-mode { .card { background: #fff !important; border: 1px solid #ccc !important; - border-radius: 4px !important; - padding: 12px !important; - margin: 8px 0 !important; + border-radius: 3px !important; + padding: 8px !important; + margin: 4px 0 !important; clip-path: none !important; overflow: visible !important; filter: none !important; @@ -1177,20 +1192,19 @@ body.cv-mode { .hero-nav { display: flex !important; flex-wrap: wrap !important; - gap: 6px !important; + gap: 3px !important; } .pill { display: inline-flex !important; align-items: center !important; - gap: 4px !important; - padding: 3px 8px !important; - border: 1px solid #bbb !important; - border-radius: 3px !important; - background: #f7f7f7 !important; + gap: 2px !important; + padding: 1px 4px !important; + border: none !important; + background: none !important; color: #000 !important; text-decoration: none !important; - font-size: 0.75rem !important; + font-size: 0.65rem !important; } .pill .pill-icon { @@ -1201,8 +1215,8 @@ body.cv-mode { display: inline !important; opacity: 1 !important; color: #333 !important; - font-size: 0.7rem !important; - margin-left: 4px !important; + font-size: 0.6rem !important; + margin-left: 2px !important; } .pill-cv-only-print { @@ -1234,51 +1248,96 @@ body.cv-mode { margin: 4px 0 !important; } + /* Condensed CV content */ + .cv-section { + padding: 10px !important; + margin-top: 6px !important; + clip-path: none !important; + } + + .cv-item { + margin-bottom: 8px !important; + padding-left: 8px !important; + border-left: 1px solid #727272 !important; + } + + .cv-title { + font-size: 0.8rem !important; + } + + .cv-org { + font-size: 0.7rem !important; + margin: 0 0 3px 0 !important; + } + + .cv-desc { + font-size: 0.75rem !important; + line-height: 1.25 !important; + } + + .cv-item-header { + margin-bottom: 2px !important; + } + /* Profile layout */ .avatar { display: block !important; - max-width: 80px !important; - max-height: 100px !important; + max-width: 60px !important; + max-height: 75px !important; object-fit: cover !important; - border: 2px solid #ccc !important; - border-radius: 4px !important; + border: 1px solid #ccc !important; + border-radius: 3px !important; filter: none !important; - margin-right: 16px !important; + margin-right: 12px !important; } .profile { display: flex !important; align-items: center !important; - gap: 16px !important; - padding: 8px !important; + gap: 12px !important; + padding: 4px !important; flex-wrap: wrap !important; } /* Hero layout – keep photo left, name right (like desktop) */ .hero { display: flex !important; - flex-direction: column !important; - gap: 12px !important; + flex-direction: row !important; + flex-wrap: wrap !important; + gap: 2px 4px !important; + align-items: center !important; } .hero-identity { + flex: 1 1 100% !important; display: flex !important; flex-direction: row !important; align-items: center !important; - gap: 16px !important; + gap: 8px !important; + } + + .hero-description { + flex: 1 1 100% !important; + } + + .hero-contacts, + .hero-nav { + display: inline-flex !important; + flex-wrap: nowrap !important; + gap: 2px !important; } /* Selected Work highlights – give titles and items room */ .selected-work { - display: block !important; + gap: 8px 16px !important; } .highlight-item { - margin: 12px 0 !important; - padding: 8px 0 !important; + margin: 6px 0 !important; + padding: 4px 0 4px 10px !important; border-bottom: 1px solid #eee !important; - border-left: none !important; + border-left: 1px solid #ccc !important; } .highlight-item:last-child { @@ -1286,13 +1345,13 @@ body.cv-mode { } .highlight-item h3 { - font-size: 13px !important; - margin: 0 0 4px 0 !important; + font-size: 10px !important; + margin: 0 0 2px 0 !important; } .highlight-subtitle { - font-size: 0.85em !important; - margin: 0 0 6px 0 !important; + font-size: 0.8em !important; + margin: 0 0 3px 0 !important; font-style: italic !important; } @@ -1301,38 +1360,38 @@ body.cv-mode { } .highlight-description { - font-size: 0.9em !important; + font-size: 0.8em !important; margin: 0 !important; - line-height: 1.5 !important; + line-height: 1.3 !important; } /* Links grid */ .link-grid a { color: #000 !important; - background: #f5f5f5 !important; - padding: 6px 10px !important; + background: none !important; + padding: 3px 6px !important; border: none !important; display: inline-block !important; - margin: 2px !important; - font-size: 0.85em !important; + margin: 1px !important; + font-size: 0.75em !important; } /* Typography */ h1 { - font-size: 18px !important; - margin: 4px 0 8px 0 !important; - padding-bottom: 4px !important; + font-size: 16px !important; + margin: 2px 0 4px 0 !important; + padding-bottom: 2px !important; border-bottom: 1px solid #000 !important; color: #000 !important; } h2 { - font-size: 11px !important; + font-size: 9px !important; text-transform: uppercase !important; color: #000 !important; - margin: 8px 0 4px 0 !important; - padding: 4px !important; - border-bottom: 1px solid #eee !important; + margin: 4px 0 3px 0 !important; + padding: 2px !important; + border-bottom: 1px solid #ddd !important; font-weight: bold !important; } @@ -1340,8 +1399,8 @@ body.cv-mode { h4, h5, h6 { - font-size: 10px !important; - margin: 4px 0 !important; + font-size: 9px !important; + margin: 2px 0 !important; color: #000 !important; font-weight: bold !important; } @@ -1354,29 +1413,44 @@ body.cv-mode { /* Remove neon effects */ .tag { opacity: 1 !important; - background: #f5f5f5 !important; - border: 1px solid #ccc !important; - padding: 2px 6px !important; - font-size: 0.8em !important; + background: none !important; + border: none !important; + padding: 0 4px !important; + font-size: 0.75em !important; + } + + .skill-categories { + gap: 0.75rem !important; + } + + .skill-group h3 { + font-size: 0.55rem !important; + margin-bottom: 0.2rem !important; + letter-spacing: 1px !important; + opacity: 0.6 !important; + } + + .skill-tags { + gap: 0.15rem 0.4rem !important; } /* Condensed spacing */ .card h1 { - margin: 0 0 4px 0 !important; + margin: 0 0 2px 0 !important; } .card h2 { - margin: 4px 0 8px 0 !important; + margin: 2px 0 4px 0 !important; } .card p { - margin: 4px 0 !important; - font-size: 0.9em !important; + margin: 2px 0 !important; + font-size: 0.8em !important; } .card li { - margin: 2px 0 !important; - font-size: 0.9em !important; + margin: 1px 0 !important; + font-size: 0.8em !important; } /* Remove gradients and shadows */ @@ -1421,14 +1495,13 @@ body.cv-mode { .personal-tag { display: inline-flex !important; align-items: center !important; - padding: 2px 8px !important; - border: 1px solid #ccc !important; - border-radius: 3px !important; - background: #f7f7f7 !important; + padding: 1px 6px !important; + border: none !important; + background: none !important; } .page-footer { - font-size: 0.7rem !important; + font-size: 0.6rem !important; color: #888 !important; margin: 16px 0 0 !important; opacity: 0.5 !important;