Add comprehensive CSS enhancements: avatar styling, gradient removal, and print layout support
This commit is contained in:
Dejvino
parent
c1df821c5f
commit
35c5106521
213
style.css
213
style.css
@ -112,6 +112,16 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Desktop Grid Spans */
|
/* 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; }
|
.profile { grid-column: span 3; }
|
||||||
.about { grid-column: span 2; }
|
.about { grid-column: span 2; }
|
||||||
.interests { grid-column: span 1; }
|
.interests { grid-column: span 1; }
|
||||||
@ -124,6 +134,16 @@ body {
|
|||||||
.education { grid-column: span 3; }
|
.education { grid-column: span 3; }
|
||||||
|
|
||||||
/* Shuffle Logic */
|
/* 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); }
|
.profile { transform: rotate(0.1deg); }
|
||||||
.about { transform: translate(-4px, 2px) rotate(-0.5deg); }
|
.about { transform: translate(-4px, 2px) rotate(-0.5deg); }
|
||||||
.interests { transform: translate(6px, -2px) rotate(0.4deg); }
|
.interests { transform: translate(6px, -2px) rotate(0.4deg); }
|
||||||
@ -316,7 +336,10 @@ address.mono-addr span {
|
|||||||
pointer-events: none;
|
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 {
|
.link-grid a {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
@ -443,5 +466,193 @@ a { color: var(--link-color); text-decoration: none; }
|
|||||||
.experience, .skills, .education {
|
.experience, .skills, .education {
|
||||||
grid-column: span 1;
|
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; }
|
.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; }
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user