Files
personal-site/static/vars.css
T
2026-05-29 22:49:39 +02:00

95 lines
2.7 KiB
CSS

@import "tailwindcss";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Libre+Caslon+Display&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Noto+Sans+JP:wght@100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
.theme-root.night {
--bg: #1c1c1c;
--surface: #252525;
--surface2: #2a2a2a;
--border: #363636;
--border2: #ccc7be;
--text: #ffffff;
--muted: #d9d9d9;
--dim: #b0aa9f;
--navback: rgba(28, 28, 28, 0.8);
--accent: #5389ff;
--accent2:#1447b8;
--green:#0eaf74;
--amber:#ffd78e;
}
.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-body{font-size:0.85rem;color:var(--muted);line-height:1.8;}
.libre-caslon-text-regular {
font-family: "Libre Caslon Text", serif;
font-weight: 400;
font-style: normal;
}
.libre-caslon-text-bold {
font-family: "Libre Caslon Text", serif;
font-weight: 700;
font-style: normal;
}
.libre-caslon-text-regular-italic {
font-family: "Libre Caslon Text", serif;
font-weight: 400;
font-style: italic;
}
.rubik-400 {
font-family: "Rubik", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.sidebar-links a.hidden {
opacity: 0;
transition: opacity 0.4s linear;
}
.sidebar-links:hover a.hidden {
opacity: 1;
}
aside{
border-right:1px solid var(--border);
padding:2.5rem 1.5rem;
display:flex;flex-direction:column;gap:1rem;
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);
transition:color 0.15s,background 0.15s;
display:flex;align-items:center;gap:6px;
}
.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);}