new theme
This commit is contained in:
samantha42
@@ -0,0 +1,231 @@
|
||||
:root{
|
||||
--bg:#f7f6f3;
|
||||
--surface:#ffffff;
|
||||
--surface2:#f0eeea;
|
||||
--border:#e2ddd6;
|
||||
--border2:#ccc7be;
|
||||
--text:#1a1917;
|
||||
--muted:#6b6560;
|
||||
--dim:#b0aa9f;
|
||||
--accent:#1a56db;
|
||||
--accent2:#1447b8;
|
||||
--green:#0a7c52;
|
||||
--amber:#92620a;
|
||||
--ff-mono:'IBM Plex Mono',monospace;
|
||||
--ff-sans:'IBM Plex Sans',sans-serif;
|
||||
}
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
html{font-size:15px;scroll-behavior:smooth;}
|
||||
body{
|
||||
background:var(--bg);
|
||||
color:var(--text);
|
||||
font-family:var(--ff-sans);
|
||||
font-weight:300;
|
||||
line-height:1.7;
|
||||
min-height:100vh;
|
||||
}
|
||||
|
||||
/* subtle dot grid */
|
||||
body::before{
|
||||
content:'';
|
||||
position:fixed;inset:0;
|
||||
background-image:radial-gradient(circle, var(--border) 1px, transparent 1px);
|
||||
background-size:24px 24px;
|
||||
opacity:0.5;
|
||||
pointer-events:none;z-index:0;
|
||||
}
|
||||
|
||||
nav{
|
||||
position:sticky;top:0;z-index:100;
|
||||
background:rgba(247,246,243,0.94);
|
||||
backdrop-filter:blur(10px);
|
||||
border-bottom:1px solid var(--border);
|
||||
padding:0 clamp(1rem,5vw,3rem);
|
||||
display:flex;align-items:center;justify-content:space-between;
|
||||
height:52px;
|
||||
}
|
||||
.nav-logo{
|
||||
font-family:var(--ff-mono);font-size:0.78rem;font-weight:500;
|
||||
color:var(--accent);text-decoration:none;
|
||||
display:flex;align-items:center;gap:6px;
|
||||
}
|
||||
.nav-logo::before{content:'>';color:var(--green);font-weight:500;}
|
||||
.nav-links{display:flex;gap:0.2rem;align-items:center;}
|
||||
.nav-links a{
|
||||
font-family:var(--ff-mono);font-size:0.72rem;
|
||||
color:var(--muted);text-decoration:none;
|
||||
padding:0.3rem 0.7rem;border-radius:4px;
|
||||
transition:color 0.15s,background 0.15s;
|
||||
}
|
||||
.nav-links a:hover{color:var(--text);background:var(--surface2);}
|
||||
.nav-links .cta{color:var(--accent);border:1px solid var(--accent2);margin-left:0.4rem;}
|
||||
.nav-links .cta:hover{background:var(--accent2);color:#fff;}
|
||||
|
||||
.shell{
|
||||
position:relative;z-index:1;
|
||||
display:grid;
|
||||
grid-template-columns:220px 1fr;
|
||||
min-height:calc(100vh - 52px);
|
||||
max-width:1100px;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
aside{
|
||||
border-right:1px solid var(--border);
|
||||
padding:2.5rem 1.5rem;
|
||||
display:flex;flex-direction:column;gap:2.5rem;
|
||||
position:sticky;top:52px;height:calc(100vh - 52px);
|
||||
overflow-y:auto;
|
||||
background:var(--surface);
|
||||
}
|
||||
.sidebar-label{
|
||||
font-family:var(--ff-mono);font-size:0.65rem;
|
||||
letter-spacing:0.2em;text-transform:uppercase;
|
||||
color:var(--dim);margin-bottom:0.8rem;
|
||||
}
|
||||
.sidebar-links{display:flex;flex-direction:column;gap:2px;}
|
||||
.sidebar-links a{
|
||||
font-family:var(--ff-mono);font-size:0.78rem;color:var(--muted);
|
||||
text-decoration:none;padding:0.3rem 0.6rem;border-radius:4px;
|
||||
transition:color 0.15s,background 0.15s;
|
||||
display:flex;align-items:center;gap:6px;
|
||||
}
|
||||
.sidebar-links a::before{content:'//';color:var(--dim);font-size:0.65rem;}
|
||||
.sidebar-links a:hover{color:var(--text);background:var(--surface2);}
|
||||
.skill-list{display:flex;flex-direction:column;gap:4px;}
|
||||
.skill-item{
|
||||
font-family:var(--ff-mono);font-size:0.78rem;
|
||||
color:var(--muted);padding:0.3rem 0.6rem;
|
||||
border-left:2px solid var(--border2);
|
||||
transition:border-color 0.15s,color 0.15s;cursor:default;
|
||||
}
|
||||
.skill-item:hover{border-color:var(--accent);color:var(--text);}
|
||||
|
||||
main{
|
||||
padding:3rem clamp(1.5rem,4vw,3rem);
|
||||
display:flex;flex-direction:column;gap:4rem;
|
||||
}
|
||||
|
||||
.hero{padding-bottom:3rem;border-bottom:1px solid var(--border);}
|
||||
.hero-eyebrow{
|
||||
font-family:var(--ff-mono);font-size:0.72rem;color:var(--green);
|
||||
letter-spacing:0.18em;margin-bottom:1rem;
|
||||
display:flex;align-items:center;gap:8px;
|
||||
}
|
||||
.hero-eyebrow::before{content:'';display:block;width:20px;height:1px;background:var(--green);}
|
||||
h1{
|
||||
font-family:var(--ff-mono);
|
||||
font-size:clamp(1.8rem,4vw,2.8rem);
|
||||
font-weight:500;color:var(--text);
|
||||
letter-spacing:-0.02em;line-height:1.1;
|
||||
}
|
||||
h1 span{color:var(--accent);}
|
||||
.hero-bio{
|
||||
margin-top:1.2rem;font-size:0.9rem;color:var(--muted);
|
||||
max-width:560px;line-height:1.8;
|
||||
}
|
||||
.hero-meta{
|
||||
margin-top:1.5rem;display:flex;gap:1.5rem;flex-wrap:wrap;
|
||||
font-family:var(--ff-mono);font-size:0.72rem;color:var(--dim);
|
||||
}
|
||||
.hero-meta span{display:flex;align-items:center;gap:5px;}
|
||||
.dot{
|
||||
width:6px;height:6px;border-radius:50%;
|
||||
background:var(--green);display:inline-block;
|
||||
animation:pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
|
||||
|
||||
.section-head{display:flex;align-items:center;gap:10px;margin-bottom:1.8rem;}
|
||||
.section-head h2{
|
||||
font-family:var(--ff-mono);font-size:0.72rem;font-weight:400;
|
||||
letter-spacing:0.25em;text-transform:uppercase;color:var(--muted);
|
||||
white-space:nowrap;
|
||||
}
|
||||
.section-head::after{content:'';flex:1;height:1px;background:var(--border);}
|
||||
|
||||
.exp-grid{display:flex;flex-direction:column;gap:8px;}
|
||||
.exp-card{
|
||||
background:var(--surface);border:1px solid var(--border);
|
||||
border-radius:6px;padding:1.4rem 1.5rem;
|
||||
transition:border-color 0.2s,box-shadow 0.2s;
|
||||
}
|
||||
.exp-card:hover{border-color:var(--border2);box-shadow:0 2px 12px rgba(0,0,0,0.06);}
|
||||
.exp-header{
|
||||
display:flex;align-items:baseline;justify-content:space-between;
|
||||
margin-bottom:0.6rem;flex-wrap:wrap;gap:0.5rem;
|
||||
}
|
||||
.exp-title{font-family:var(--ff-mono);font-size:0.9rem;font-weight:500;color:var(--text);}
|
||||
.exp-tag{
|
||||
font-family:var(--ff-mono);font-size:0.65rem;
|
||||
letter-spacing:0.1em;text-transform:uppercase;
|
||||
background:rgba(26,86,219,0.07);color:var(--accent);
|
||||
border:1px solid rgba(26,86,219,0.2);
|
||||
padding:2px 8px;border-radius:3px;
|
||||
}
|
||||
.exp-body{font-size:0.85rem;color:var(--muted);line-height:1.8;}
|
||||
|
||||
.edu-grid{display:flex;flex-direction:column;gap:8px;}
|
||||
.edu-card{
|
||||
display:grid;grid-template-columns:80px 1fr;gap:1.2rem;
|
||||
background:var(--surface);border:1px solid var(--border);
|
||||
border-radius:6px;padding:1.2rem 1.4rem;
|
||||
transition:border-color 0.2s,box-shadow 0.2s;
|
||||
}
|
||||
.edu-card:hover{border-color:var(--border2);box-shadow:0 2px 12px rgba(0,0,0,0.06);}
|
||||
.edu-year{font-family:var(--ff-mono);font-size:0.7rem;color:var(--amber);padding-top:2px;line-height:1.6;}
|
||||
.edu-degree{font-size:0.9rem;font-weight:500;color:var(--text);}
|
||||
.edu-inst{font-family:var(--ff-mono);font-size:0.75rem;color:var(--muted);margin-top:2px;}
|
||||
.edu-detail{font-size:0.82rem;color:var(--dim);margin-top:4px;}
|
||||
|
||||
.lang-row{display:flex;gap:0.6rem;flex-wrap:wrap;}
|
||||
.lang-badge{
|
||||
font-family:var(--ff-mono);font-size:0.78rem;color:var(--text);
|
||||
background:var(--surface);border:1px solid var(--border);
|
||||
padding:0.35rem 0.9rem;border-radius:4px;
|
||||
}
|
||||
|
||||
.interests-row{display:flex;gap:0.6rem;flex-wrap:wrap;}
|
||||
.interest-chip{
|
||||
font-family:var(--ff-mono);font-size:0.75rem;color:var(--muted);
|
||||
background:var(--surface);border:1px solid var(--border);
|
||||
padding:0.3rem 0.75rem;border-radius:4px;
|
||||
}
|
||||
.interest-chip::before{content:'# ';color:var(--dim);}
|
||||
|
||||
.opinion-grid{display:flex;flex-wrap:wrap;gap:0.6rem;}
|
||||
.opinion-link{
|
||||
font-family:var(--ff-mono);font-size:0.78rem;
|
||||
color:var(--muted);text-decoration:none;
|
||||
background:var(--surface);border:1px solid var(--border);
|
||||
padding:0.4rem 0.9rem;border-radius:4px;
|
||||
display:flex;align-items:center;gap:6px;
|
||||
transition:border-color 0.2s,color 0.2s,box-shadow 0.2s;
|
||||
}
|
||||
.opinion-link::before{content:'→';color:var(--dim);font-size:0.75rem;}
|
||||
.opinion-link:hover{border-color:var(--accent2);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,0.06);}
|
||||
|
||||
footer{
|
||||
position:relative;z-index:1;
|
||||
border-top:1px solid var(--border);
|
||||
padding:1.4rem clamp(1rem,5vw,3rem);
|
||||
display:flex;align-items:center;justify-content:space-between;
|
||||
flex-wrap:wrap;gap:0.5rem;
|
||||
background:var(--surface);
|
||||
}
|
||||
.footer-contact a{font-family:var(--ff-mono);font-size:0.78rem;color:var(--accent);text-decoration:none;}
|
||||
.footer-contact a:hover{text-decoration:underline;}
|
||||
.footer-copy{font-family:var(--ff-mono);font-size:0.7rem;color:var(--dim);}
|
||||
|
||||
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
|
||||
.hero{animation:fadeUp 0.6s ease both;}
|
||||
.exp-card:nth-child(1){animation:fadeUp 0.5s 0.05s ease both;}
|
||||
.exp-card:nth-child(2){animation:fadeUp 0.5s 0.12s ease both;}
|
||||
.edu-card:nth-child(1){animation:fadeUp 0.5s 0.08s ease both;}
|
||||
.edu-card:nth-child(2){animation:fadeUp 0.5s 0.15s ease both;}
|
||||
|
||||
@media(max-width:700px){
|
||||
.shell{grid-template-columns:1fr;}
|
||||
aside{display:none;}
|
||||
.edu-card{grid-template-columns:1fr;gap:0.3rem;}
|
||||
}
|
||||
Reference in New Issue
Block a user