diff options
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 509 |
1 files changed, 427 insertions, 82 deletions
diff --git a/src/style.css b/src/style.css index 528b0c3..0a15bb6 100644 --- a/src/style.css +++ b/src/style.css @@ -1,176 +1,521 @@ -/* Hide scrollbar but allow scrolling */ -body { - overflow: auto; - scrollbar-width: none !important; /* Firefox */ - -ms-overflow-style: none !important; /* IE/Edge */ -} +/* ========================================================= + Catppuccin Latte + pastel-pink accents + Psychology CV / portfolio + ========================================================= */ -body::-webkit-scrollbar { - display: none !important; /* Chrome/Safari */ -} +:root { + /* Latte base */ + --base: #eff1f5; + --mantle: #e6e9ef; + --crust: #dce0e8; + --surface0: #ccd0da; + /* Text */ + --text: #4c4f69; + --subtext: #6c6f85; + --muted: #8c8fa1; + /* Pastel pink accents */ + --accent-soft: #f4b8e4; /* pastel, used for tints/hovers */ + --accent: #ea76cb; /* Latte pink, used for headings & links */ + --accent-deep: #d364ac; /* slightly deeper for contrast on hover */ + --accent-tint: rgba(234, 118, 203, 0.10); -/* Catppuccin Latte inspired palette */ -:root { - --base: #eff1f5; - --mantle: #e6e9ef; - --text: #4c4f69; - --subtext: #6c6f85; - --accent: #f4b8e4; - --accent-strong: #ea76cb; - --border: #dce0e8; + /* Misc */ + --border: #dce0e8; + --shadow-sm: 0 1px 2px rgba(76, 79, 105, 0.05); + --shadow-md: 0 10px 30px rgba(76, 79, 105, 0.08); + + --radius: 14px; + --radius-sm: 10px; } -/* Reset */ +/* ========================================================= + Reset + base + ========================================================= */ + * { margin: 0; padding: 0; box-sizing: border-box; } +html { scroll-behavior: smooth; } + body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - background: var(--base); - color: var(--text); + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + font-size: 16px; line-height: 1.6; + color: var(--text); + background: + radial-gradient(1200px 600px at 10% -10%, var(--accent-tint), transparent 60%), + radial-gradient(900px 500px at 110% 10%, rgba(244, 184, 228, 0.15), transparent 60%), + var(--base); + background-attachment: fixed; + + /* Hide scrollbar but allow scrolling */ + overflow-x: hidden; + scrollbar-width: none; + -ms-overflow-style: none; + + animation: fadeIn 0.6s ease both; +} +body::-webkit-scrollbar { display: none; } + +a { + color: var(--accent); + text-decoration: none; + transition: color 0.2s ease; } +a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; } + +/* ========================================================= + Layout + ========================================================= */ -/* Layout */ .container { - max-width: 800px; - margin: auto; + max-width: 820px; + margin: 0 auto; padding: 2rem 1.5rem; } -/* Header */ -header { - margin-bottom: 2rem; +/* ========================================================= + Header + ========================================================= */ + +.site-header { + display: flex; + align-items: center; + gap: 1.5rem; + padding-top: 3rem; + padding-bottom: 1rem; } +.site-header__text { flex: 1; min-width: 0; } + h1 { - font-size: 2rem; + font-family: "Fraunces", Georgia, serif; font-weight: 600; + font-size: clamp(1.9rem, 2.2vw + 1.2rem, 2.6rem); + letter-spacing: -0.01em; + color: var(--text); } .subtitle { - color: var(--subtext); margin-top: 0.25rem; + color: var(--accent); + font-weight: 500; } -/* Card sections */ -.card { - background: rgba(255, 255, 255, 0.6); - backdrop-filter: blur(6px); +.tagline { + margin-top: 0.5rem; + color: var(--subtext); + font-size: 0.95rem; +} + +/* Avatar */ +.avatar { + position: relative; + flex: 0 0 auto; + width: 96px; + height: 96px; + border-radius: 50%; + background: linear-gradient(135deg, var(--accent-soft), var(--accent)); + padding: 3px; /* ring */ + box-shadow: var(--shadow-md); +} +.avatar img { + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; + background: var(--mantle); + display: block; +} +.avatar__initials { + position: absolute; + inset: 3px; + border-radius: 50%; + display: none; + align-items: center; + justify-content: center; + font-family: "Fraunces", serif; + font-weight: 600; + font-size: 1.8rem; + color: white; + background: linear-gradient(135deg, var(--accent-soft), var(--accent)); +} +.avatar--fallback .avatar__initials { display: flex; } + +/* Quick contact chips */ +.quick-contact { + margin-top: 1rem; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.chip { + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: 0.4rem 0.8rem; + background: rgba(255, 255, 255, 0.7); border: 1px solid var(--border); - border-radius: 14px; - padding: 1.2rem 1.2rem; - margin-bottom: 1.5rem; + border-radius: 999px; + color: var(--text); + font-size: 0.85rem; + font-weight: 500; + transition: all 0.2s ease; + text-decoration: none; +} +.chip:hover { + border-color: var(--accent); + color: var(--accent-deep); + transform: translateY(-1px); + text-decoration: none; +} +.chip svg { opacity: 0.8; } - transition: all 0.25s ease; +.chip--primary { + background: linear-gradient(135deg, var(--accent-soft), var(--accent)); + border-color: transparent; + color: white; +} +.chip--primary:hover { + filter: brightness(1.05); + color: white; + box-shadow: 0 6px 16px rgba(234, 118, 203, 0.35); } -/* Subtle hover lift */ +/* ========================================================= + Cards + ========================================================= */ + +.card { + background: rgba(255, 255, 255, 0.65); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 1.4rem 1.5rem; + margin-bottom: 1.25rem; + box-shadow: var(--shadow-sm); + transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; +} .card:hover { transform: translateY(-3px); - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); - border-color: var(--accent); + box-shadow: var(--shadow-md); + border-color: var(--accent-soft); } -/* Section titles */ +/* Section headings */ h2 { - font-size: 1.1rem; - margin-bottom: 0.6rem; - color: var(--accent-strong); + font-family: "Fraunces", Georgia, serif; + font-size: 1.15rem; + font-weight: 600; + color: var(--accent); + margin-bottom: 0.9rem; position: relative; } - -/* Accent underline */ h2::after { content: ""; display: block; - width: 40px; + width: 36px; height: 3px; - background: var(--accent); + background: linear-gradient(90deg, var(--accent), var(--accent-soft)); border-radius: 2px; - margin-top: 4px; + margin-top: 6px; } -/* Items */ +/* Items (education / experience / projects) */ .item { - margin-bottom: 0.8rem; + padding: 0.5rem 0; +} +.item + .item { + border-top: 1px dashed var(--border); + margin-top: 0.5rem; + padding-top: 0.9rem; +} + +.item__head { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: 0.75rem; + flex-wrap: wrap; } h3 { font-size: 1rem; font-weight: 600; + color: var(--text); +} +.item__org { + color: var(--subtext); + font-weight: 500; +} +.item__sub { + font-size: 0.9rem; + color: var(--subtext); + margin-bottom: 0.35rem; +} +.item__links { + margin-top: 0.5rem; + font-size: 0.85rem; + color: var(--subtext); } .date { font-size: 0.8rem; color: var(--subtext); + font-variant-numeric: tabular-nums; + white-space: nowrap; } -/* Lists */ -ul { - list-style: none; -} +/* ========================================================= + Lists + ========================================================= */ + +ul { list-style: none; } ul li { margin-bottom: 0.3rem; position: relative; padding-left: 1rem; } - -/* Custom bullet */ ul li::before { content: "•"; position: absolute; left: 0; - color: var(--accent-strong); + top: 0; + color: var(--accent); } -/* Skills */ +/* Bullet list inside items */ +.bullets { + margin-top: 0.4rem; +} +.bullets li { + font-size: 0.95rem; + color: var(--text); +} + +/* Skills — pills */ .skills { display: flex; flex-wrap: wrap; - gap: 0.5rem; + gap: 0.45rem; } - .skills li { background: var(--mantle); - padding: 0.3rem 0.6rem; + border: 1px solid transparent; + color: var(--text); + padding: 0.3rem 0.75rem; border-radius: 999px; - font-size: 0.8rem; + font-size: 0.82rem; + padding-left: 0.75rem; /* override default bullet-pad */ transition: all 0.2s ease; } - -/* Skill hover */ +.skills li::before { content: none; } /* no bullet on pills */ .skills li:hover { - background: var(--accent); - color: white; + background: var(--accent-tint); + border-color: var(--accent-soft); + color: var(--accent-deep); + transform: translateY(-1px); } -/* Footer */ -footer { - text-align: center; +/* Languages */ +.languages { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + gap: 0.6rem; +} +.languages li { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: 0.5rem; + background: rgba(255, 255, 255, 0.55); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + padding: 0.55rem 0.8rem; + padding-left: 0.8rem; +} +.languages li::before { content: none; } +.lang__name { font-weight: 500; } +.lang__level { + font-size: 0.8rem; + color: var(--accent); +} + +/* Publications */ +.publications { + list-style: none; + counter-reset: pub; + display: flex; + flex-direction: column; + gap: 0.75rem; +} +.publications li { + counter-increment: pub; + position: relative; + padding-left: 2rem; + font-size: 0.92rem; + color: var(--text); + line-height: 1.5; +} +.publications li::before { + content: counter(pub); + position: absolute; + left: 0; + top: 0.05em; + width: 1.5rem; + height: 1.5rem; + border-radius: 50%; + background: var(--accent-tint); + color: var(--accent); font-size: 0.75rem; - color: var(--subtext); - margin-top: 1rem; + font-weight: 600; + display: inline-flex; + align-items: center; + justify-content: center; } +.pub__title { color: var(--text); font-weight: 500; } +.pub__venue { color: var(--subtext); } +.pub__authors { color: var(--text); } +.pub__coauthors, .pub__details { color: var(--subtext); } -/* Subtle fade-in */ -body { - animation: fadeIn 0.6s ease; +/* ========================================================= + Footer + ========================================================= */ + +footer { + text-align: center; + font-size: 0.8rem; + color: var(--muted); + padding-top: 0; + padding-bottom: 2.5rem; } +/* ========================================================= + Motion + ========================================================= */ + @keyframes fadeIn { - from { - opacity: 0; - transform: translateY(6px); + from { opacity: 0; transform: translateY(6px); } + to { opacity: 1; transform: translateY(0); } +} + +/* Scroll reveal — only applied when JS adds .reveal */ +.card.reveal { + opacity: 0; + transform: translateY(14px); + transition: opacity 0.55s ease, transform 0.55s ease; +} +.card.reveal.is-visible { + opacity: 1; + transform: translateY(0); +} + +/* Respect reduced-motion preferences */ +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.001ms !important; + transition-duration: 0.001ms !important; + } + .card.reveal { opacity: 1; transform: none; } +} + +/* ========================================================= + Responsive + ========================================================= */ + +@media (max-width: 600px) { + .container { padding: 1.5rem 1.1rem; } + + .site-header { + flex-direction: column; + align-items: flex-start; + text-align: left; + gap: 1rem; + padding-top: 2rem; + } + .avatar { width: 80px; height: 80px; } + + .item__head { flex-direction: column; align-items: flex-start; gap: 0.1rem; } + .date { order: -1; } /* date above title on narrow screens */ +} + +/* ========================================================= + Print — clean recruiter-friendly Ctrl+P + ========================================================= */ + +@media print { + :root { + --base: #ffffff; + --mantle: #ffffff; + --border: #d0d0d0; } - to { - opacity: 1; - transform: translateY(0); + html, body { + background: white !important; + color: #222 !important; + font-size: 11pt; } + body { animation: none; } + + .container { max-width: none; padding: 0; } + + .site-header { + padding: 0 0 0.6cm 0; + border-bottom: 1px solid #ddd; + } + + .avatar { + width: 70px; height: 70px; + box-shadow: none; + } + + .card { + background: white !important; + backdrop-filter: none; + border: none; + box-shadow: none; + padding: 0.4cm 0; + margin: 0; + border-top: 1px solid #eee; + border-radius: 0; + page-break-inside: avoid; + transform: none !important; + opacity: 1 !important; + } + .card:first-of-type { border-top: none; } + .card:hover { transform: none; box-shadow: none; border-color: transparent; } + + h1 { color: #222; } + h2 { color: var(--accent); } + h2::after { background: var(--accent); } + + /* Hide the download button in print */ + .chip--primary { display: none; } + + .chip { + background: transparent; + border: none; + padding: 0; + margin-right: 0.6rem; + } + + a { color: #222; text-decoration: none; } + a[href^="http"]::after, + a[href^="mailto"]::after { + content: " (" attr(href) ")"; + font-size: 0.85em; + color: #666; + word-break: break-all; + } + /* Don't print URL for the internal chip links we already show as text */ + .quick-contact a[href^="mailto"]::after { content: ""; } + + footer { padding: 0.5cm 0 0; color: #888; } } |