tweak print style to 2 pages

This commit is contained in:
Dejvino 2026-07-27 19:13:59 +02:00
parent d590ba1b21
commit c435ceacda
2 changed files with 143 additions and 70 deletions

View File

@ -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.</br>Quiet infrastructure. Measurable value."
},
"interests": [
{

211
style.css
View File

@ -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;