dejvino/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add comprehensive CSS enhancements: avatar styling, gradient removal, and print layout support

Browse Source
This commit is contained in:
Dejvino 2026-05-20 17:17:34 +02:00
parent c1df821c5f
commit 35c5106521
1 changed files with 212 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

213
style.css
View File

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