mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
470 lines
18 KiB
CSS
470 lines
18 KiB
CSS
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
|
|
|
:root{
|
|
--bg:#080808;--surface:#0f0f0f;--surface2:#181818;--surface3:#222;
|
|
--green:#33ff33;--green-dim:#1a8c1a;--green-dark:#0d4d0d;
|
|
--amber:#ffb000;--amber-dim:#996a00;
|
|
--cyan:#00ffff;--cyan-dim:#009999;
|
|
--purple:#cc77ff;--purple-dim:#8844bb;
|
|
--red:#ff4444;--red-dim:#cc2222;
|
|
--blue:#4488ff;--gold:#ffd700;
|
|
--text:#c0c0c0;--dim:#666;--dimmer:#333;
|
|
--border:#333;
|
|
--bevel-light:#444;--bevel-dark:#1a1a1a;
|
|
|
|
/* default accent = green */
|
|
--accent:#33ff33;
|
|
--accent-dim:#1a8c1a;
|
|
--accent-dark:#0d4d0d;
|
|
--accent-glow:rgba(51,255,51,.3);
|
|
}
|
|
|
|
/* per-section accent colors */
|
|
.section-home{--accent:#33ff33;--accent-dim:#1a8c1a;--accent-dark:#0d4d0d;--accent-glow:rgba(51,255,51,.3)}
|
|
.section-stats{--accent:#ffd700;--accent-dim:#b8960a;--accent-dark:#6b5900;--accent-glow:rgba(255,215,0,.3)}
|
|
.section-projects{--accent:#cc77ff;--accent-dim:#8844bb;--accent-dark:#552288;--accent-glow:rgba(204,119,255,.3)}
|
|
.section-fedl{--accent:#ff4444;--accent-dim:#cc2222;--accent-dark:#881111;--accent-glow:rgba(255,68,68,.3)}
|
|
.section-skills{--accent:#00ffff;--accent-dim:#009999;--accent-dark:#006666;--accent-glow:rgba(0,255,255,.3)}
|
|
.section-contact{--accent:#ffb000;--accent-dim:#cc8800;--accent-dark:#885500;--accent-glow:rgba(255,176,0,.3)}
|
|
|
|
html{scroll-behavior:smooth}
|
|
body{
|
|
background:var(--bg);color:var(--text);
|
|
font-family:'VT323','Courier New',monospace;
|
|
font-size:18px;line-height:1.5;
|
|
overflow-x:hidden;
|
|
}
|
|
::selection{background:var(--accent);color:var(--bg)}
|
|
a{color:var(--accent);text-decoration:none}
|
|
a:hover{text-shadow:0 0 8px var(--accent-glow)}
|
|
|
|
/* CRT */
|
|
.crt-overlay{
|
|
position:fixed;inset:0;z-index:9998;pointer-events:none;
|
|
background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.35) 100%);
|
|
}
|
|
.scanlines{
|
|
position:fixed;inset:0;z-index:9997;pointer-events:none;
|
|
background:repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0px,rgba(0,0,0,.15) 1px,transparent 1px,transparent 3px);
|
|
}
|
|
@keyframes flicker{
|
|
0%{opacity:.97}5%{opacity:.95}10%{opacity:.98}15%{opacity:.96}
|
|
20%{opacity:.99}50%{opacity:.97}80%{opacity:.98}90%{opacity:.96}100%{opacity:.98}
|
|
}
|
|
body{animation:flicker 4s infinite}
|
|
|
|
/* Boot */
|
|
#boot-screen{
|
|
position:fixed;inset:0;z-index:10000;
|
|
background:var(--bg);padding:40px;
|
|
display:flex;flex-direction:column;
|
|
font-family:'Share Tech Mono','Courier New',monospace;
|
|
font-size:14px;color:var(--green);
|
|
overflow:hidden;
|
|
}
|
|
#boot-screen.done{display:none}
|
|
#boot-text{white-space:pre-wrap;line-height:1.6;flex:1;overflow-y:auto}
|
|
#boot-screen .boot-cursor{display:inline;animation:blink .6s step-end infinite;color:var(--green)}
|
|
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
|
|
.hidden{display:none!important}
|
|
|
|
/* Titlebar */
|
|
.titlebar{
|
|
display:flex;align-items:center;justify-content:space-between;
|
|
padding:4px 8px;
|
|
background:linear-gradient(90deg,var(--green-dark),var(--green-dim),var(--green-dark));
|
|
color:var(--bg);font-family:'Press Start 2P',monospace;font-size:8px;
|
|
border-bottom:2px solid var(--green);
|
|
position:sticky;top:0;z-index:100;
|
|
}
|
|
.titlebar-left{display:flex;align-items:center;gap:8px}
|
|
.titlebar-icon{font-size:14px}
|
|
.titlebar-text{letter-spacing:.5px}
|
|
.titlebar-btns{display:flex;gap:4px}
|
|
.tb-btn{
|
|
width:20px;height:18px;
|
|
display:flex;align-items:center;justify-content:center;
|
|
background:var(--surface2);border:1px solid var(--green-dim);
|
|
color:var(--green);cursor:pointer;font-size:10px;
|
|
transition:all .1s;
|
|
}
|
|
.tb-btn:hover{background:var(--green);color:var(--bg)}
|
|
|
|
/* Navigation */
|
|
.nav-bar{
|
|
display:flex;align-items:center;gap:0;
|
|
padding:3px 8px;
|
|
background:var(--surface);border-bottom:1px solid var(--dimmer);
|
|
font-family:'VT323',monospace;font-size:16px;
|
|
position:sticky;top:28px;z-index:99;
|
|
overflow-x:auto;
|
|
}
|
|
.nav-link{
|
|
padding:2px 12px;color:var(--dim);cursor:pointer;
|
|
transition:all .15s;white-space:nowrap;
|
|
border-bottom:2px solid transparent;
|
|
}
|
|
.nav-link:hover{color:var(--green);border-bottom-color:var(--green-dim)}
|
|
.nav-link.active{color:var(--accent);border-bottom-color:var(--accent)}
|
|
.menu-clock{margin-left:auto;color:var(--amber);font-family:'Share Tech Mono',monospace;font-size:14px;white-space:nowrap}
|
|
|
|
/* Sections */
|
|
.section{
|
|
padding:24px 12px 48px;
|
|
border-bottom:2px solid var(--dimmer);
|
|
position:relative;
|
|
transition:border-color .3s;
|
|
scroll-margin-top:80px;
|
|
}
|
|
.section-accent{
|
|
position:absolute;top:0;left:0;right:0;height:3px;
|
|
background:var(--accent);
|
|
box-shadow:0 0 12px var(--accent-glow);
|
|
opacity:0;
|
|
transition:opacity .4s;
|
|
}
|
|
.section.active-section .section-accent{opacity:1}
|
|
.section.active-section{border-bottom-color:var(--accent)}
|
|
|
|
/* Retro Windows */
|
|
.retro-window{
|
|
border:2px solid var(--dimmer);
|
|
background:var(--surface);
|
|
box-shadow:inset 1px 1px 0 var(--bevel-light),inset -1px -1px 0 var(--bevel-dark),
|
|
4px 4px 0 rgba(0,0,0,.4);
|
|
max-width:900px;margin:0 auto;
|
|
transition:border-color .3s,box-shadow .3s;
|
|
}
|
|
.active-section .retro-window{
|
|
border-color:var(--accent-dim);
|
|
box-shadow:inset 1px 1px 0 var(--accent-dim),inset -1px -1px 0 var(--accent-dark),
|
|
4px 4px 0 rgba(0,0,0,.5),0 0 20px var(--accent-glow);
|
|
}
|
|
.rw-titlebar{
|
|
display:flex;align-items:center;justify-content:space-between;
|
|
padding:4px 8px;
|
|
background:linear-gradient(90deg,var(--accent-dark),var(--accent-dim),var(--accent-dark));
|
|
color:var(--bg);font-family:'Press Start 2P',monospace;font-size:7px;
|
|
transition:background .3s;
|
|
}
|
|
.rw-close{
|
|
width:18px;height:16px;display:flex;align-items:center;justify-content:center;
|
|
background:var(--surface2);border:1px solid var(--dimmer);
|
|
color:var(--text);cursor:pointer;font-size:10px;
|
|
font-family:'VT323',monospace;
|
|
transition:all .15s;
|
|
}
|
|
.rw-close:hover{background:var(--red);color:#fff;border-color:var(--red)}
|
|
.rw-body{padding:16px}
|
|
|
|
/* Hero */
|
|
.ascii-hero{text-align:center}
|
|
.ascii-art{
|
|
font-family:'Share Tech Mono',monospace;
|
|
font-size:10px;line-height:1.2;
|
|
color:var(--accent);
|
|
text-shadow:0 0 6px var(--accent-glow);
|
|
margin-bottom:20px;overflow-x:auto;
|
|
white-space:pre;
|
|
transition:color .3s,text-shadow .3s;
|
|
}
|
|
.hero-info{
|
|
text-align:left;max-width:600px;margin:0 auto 20px;
|
|
font-family:'VT323',monospace;font-size:20px;
|
|
}
|
|
.typewriter-line{
|
|
opacity:0;transform:translateX(-10px);
|
|
animation:typeIn .4s ease forwards;
|
|
margin-bottom:4px;color:var(--accent);
|
|
}
|
|
.typewriter-line:nth-child(1){animation-delay:.3s}
|
|
.typewriter-line:nth-child(2){animation-delay:.6s}
|
|
.typewriter-line:nth-child(3){animation-delay:.9s}
|
|
@keyframes typeIn{to{opacity:1;transform:none}}
|
|
.blink-line{animation:typeIn .4s ease 1.2s forwards;opacity:0;transform:translateX(-10px)}
|
|
.cursor{animation:blink .6s step-end infinite}
|
|
.hero-tags{
|
|
display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
|
|
margin:20px 0;
|
|
}
|
|
.tag{
|
|
padding:4px 10px;
|
|
font-family:'Press Start 2P',monospace;font-size:7px;
|
|
color:var(--accent);border:1px solid var(--accent-dim);
|
|
background:var(--surface2);
|
|
transition:all .15s;
|
|
}
|
|
.tag:hover{box-shadow:0 0 8px var(--accent-glow);text-shadow:0 0 6px var(--accent-glow)}
|
|
.hero-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
|
|
|
|
/* Buttons */
|
|
.retro-btn{
|
|
display:inline-flex;align-items:center;gap:6px;
|
|
padding:8px 16px;
|
|
font-family:'Press Start 2P',monospace;font-size:8px;
|
|
color:var(--accent);background:var(--surface2);
|
|
border:2px solid var(--accent-dim);
|
|
cursor:pointer;transition:all .1s;
|
|
box-shadow:inset 1px 1px 0 var(--bevel-light),inset -1px -1px 0 var(--bevel-dark);
|
|
}
|
|
.retro-btn:hover{
|
|
background:var(--accent);color:var(--bg);
|
|
box-shadow:0 0 12px var(--accent-glow);
|
|
}
|
|
.retro-btn:active{
|
|
box-shadow:inset -1px -1px 0 var(--bevel-light),inset 1px 1px 0 var(--bevel-dark);
|
|
}
|
|
.green-btn{border-color:var(--green-dim);color:var(--green)}
|
|
.green-btn:hover{background:var(--green);color:var(--bg)}
|
|
|
|
/* Stats */
|
|
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
|
|
.stat-box{
|
|
border:1px solid var(--dimmer);padding:14px;text-align:center;
|
|
background:var(--surface2);transition:all .15s;
|
|
}
|
|
.active-section .stat-box:hover{border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow)}
|
|
.stat-box-label{
|
|
font-family:'Press Start 2P',monospace;font-size:6px;
|
|
color:var(--dim);margin-bottom:8px;letter-spacing:.5px;
|
|
}
|
|
.stat-box-value{
|
|
font-family:'Share Tech Mono',monospace;font-size:28px;
|
|
color:var(--accent);margin-bottom:8px;
|
|
text-shadow:0 0 8px var(--accent-glow);
|
|
transition:color .3s,text-shadow .3s;
|
|
}
|
|
.stat-box-value.gold{color:var(--gold);text-shadow:0 0 8px rgba(255,215,0,.4)}
|
|
.stat-box-value.green{color:var(--green);text-shadow:0 0 8px rgba(51,255,51,.4)}
|
|
.stat-box-value.cyan{color:var(--cyan);text-shadow:0 0 8px rgba(0,255,255,.4)}
|
|
.stat-box-value.purple{color:var(--purple);text-shadow:0 0 8px rgba(204,119,255,.4)}
|
|
.stat-box-value.amber{color:var(--amber);text-shadow:0 0 8px rgba(255,176,0,.4)}
|
|
.stat-bar{height:4px;background:var(--surface3);margin-top:4px;overflow:hidden}
|
|
.stat-bar-fill{
|
|
height:100%;width:0;background:var(--accent);
|
|
transition:width 1s ease-out,background .3s;
|
|
box-shadow:0 0 6px var(--accent-glow);
|
|
}
|
|
.stat-bar-fill.gold{background:var(--gold);box-shadow:0 0 6px rgba(255,215,0,.4)}
|
|
.stat-bar-fill.green{background:var(--green)}
|
|
.stat-bar-fill.cyan{background:var(--cyan);box-shadow:0 0 6px rgba(0,255,255,.4)}
|
|
.stat-bar-fill.purple{background:var(--purple);box-shadow:0 0 6px rgba(204,119,255,.4)}
|
|
.stat-bar-fill.amber{background:var(--amber);box-shadow:0 0 6px rgba(255,176,0,.4)}
|
|
|
|
/* Activity */
|
|
.activity-log{max-height:300px;overflow-y:auto;font-family:'Share Tech Mono',monospace;font-size:14px}
|
|
.log-line{
|
|
padding:4px 0;border-bottom:1px solid var(--dimmer);
|
|
display:flex;gap:8px;align-items:baseline;
|
|
}
|
|
.log-line.dim{color:var(--dim)}
|
|
.log-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:5px}
|
|
.log-dot.push{background:var(--accent);box-shadow:0 0 4px var(--accent-glow)}
|
|
.log-dot.create{background:var(--cyan);box-shadow:0 0 4px rgba(0,255,255,.5)}
|
|
.log-dot.other{background:var(--amber)}
|
|
.log-repo{color:var(--accent);min-width:120px}
|
|
.log-msg{color:var(--dim);flex:1}
|
|
.log-time{color:var(--amber);font-size:12px}
|
|
|
|
/* Projects */
|
|
.project-filters{display:flex;gap:4px;margin-bottom:12px}
|
|
.pf-btn{
|
|
padding:4px 12px;
|
|
font-family:'Press Start 2P',monospace;font-size:7px;
|
|
color:var(--dim);background:var(--surface2);
|
|
border:1px solid var(--dimmer);cursor:pointer;transition:all .1s;
|
|
}
|
|
.pf-btn:hover,.pf-btn.active{color:var(--accent);border-color:var(--accent);background:var(--surface2)}
|
|
.projects-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto}
|
|
.project-row{
|
|
display:flex;align-items:center;gap:12px;
|
|
padding:10px 12px;
|
|
border:1px solid var(--dimmer);background:var(--surface2);
|
|
cursor:pointer;transition:all .15s;
|
|
}
|
|
.project-row:hover{
|
|
border-color:var(--accent);
|
|
background:rgba(255,255,255,.02);
|
|
box-shadow:0 0 8px var(--accent-glow);
|
|
}
|
|
.project-row .pr-icon{font-size:18px;flex-shrink:0}
|
|
.project-row .pr-info{flex:1;min-width:0}
|
|
.project-row .pr-name{
|
|
font-family:'Press Start 2P',monospace;font-size:8px;
|
|
color:var(--accent);margin-bottom:3px;
|
|
transition:color .3s;
|
|
}
|
|
.project-row .pr-desc{
|
|
font-size:15px;color:var(--dim);
|
|
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
|
|
}
|
|
.project-row .pr-meta{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
|
|
.project-row .pr-tag{
|
|
font-family:'Press Start 2P',monospace;font-size:5px;
|
|
padding:2px 6px;border:1px solid var(--dimmer);color:var(--dim);
|
|
}
|
|
.project-row .pr-tag.stars{color:var(--gold);border-color:var(--amber-dim)}
|
|
.project-row .pr-tag.lang{color:var(--accent);border-color:var(--accent-dim)}
|
|
.project-row .pr-tag.fork{color:var(--amber);border-color:var(--amber-dim)}
|
|
.project-row .pr-link{
|
|
font-family:'Press Start 2P',monospace;font-size:7px;
|
|
color:var(--accent);flex-shrink:0;transition:color .3s;
|
|
}
|
|
.project-row:hover .pr-link{text-shadow:0 0 6px var(--accent-glow)}
|
|
|
|
/* FEDL */
|
|
.fedl-window{border-color:var(--accent-dim)!important}
|
|
.fedl-titlebar{background:linear-gradient(90deg,var(--accent-dark),var(--accent-dim),var(--accent-dark))!important}
|
|
.fedl-body{text-align:center}
|
|
.fedl-ascii{
|
|
font-family:'Share Tech Mono',monospace;font-size:10px;
|
|
color:var(--accent);text-shadow:0 0 6px var(--accent-glow);
|
|
margin-bottom:16px;line-height:1.1;
|
|
white-space:pre;overflow-x:auto;
|
|
transition:color .3s,text-shadow .3s;
|
|
}
|
|
.fedl-desc{
|
|
font-family:'VT323',monospace;font-size:20px;
|
|
color:var(--dim);text-align:left;max-width:500px;margin:0 auto 4px;
|
|
}
|
|
.fedl-stats-row{
|
|
display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
|
|
margin:20px 0;
|
|
}
|
|
.fedl-stat{
|
|
border:1px solid var(--dimmer);padding:16px 8px;text-align:center;
|
|
background:var(--surface2);
|
|
}
|
|
.fedl-stat-val{
|
|
font-family:'Share Tech Mono',monospace;font-size:22px;
|
|
color:var(--accent);text-shadow:0 0 6px var(--accent-glow);
|
|
margin-bottom:4px;
|
|
transition:color .3s,text-shadow .3s;
|
|
}
|
|
.fedl-stat-lbl{
|
|
font-family:'Press Start 2P',monospace;font-size:5px;
|
|
color:var(--dim);letter-spacing:.5px;
|
|
}
|
|
.fedl-timeline{text-align:left;margin:16px 0;padding:12px;border:1px solid var(--dimmer);background:var(--surface2)}
|
|
.fedl-tl-title{
|
|
font-family:'Press Start 2P',monospace;font-size:7px;
|
|
color:var(--accent);margin-bottom:8px;
|
|
}
|
|
.fedl-tl-item{
|
|
font-family:'VT323',monospace;font-size:18px;
|
|
color:var(--dim);padding:3px 0;padding-left:12px;
|
|
border-left:2px solid var(--dimmer);margin-left:4px;
|
|
}
|
|
.fedl-tl-item:last-child{border-left-color:var(--accent)}
|
|
.tl-date{color:var(--amber);font-family:'Share Tech Mono',monospace;font-size:14px}
|
|
.fedl-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
|
|
|
|
/* Skills */
|
|
.skills-list{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
|
|
.skill-row{display:flex;align-items:center;gap:12px}
|
|
.skill-name{
|
|
font-family:'Press Start 2P',monospace;font-size:7px;
|
|
color:var(--dim);width:100px;text-align:right;flex-shrink:0;
|
|
}
|
|
.skill-bar{flex:1;height:10px;background:var(--surface3);border:1px solid var(--dimmer);overflow:hidden}
|
|
.skill-fill{height:100%;width:0;transition:width 1s ease-out,background .3s;position:relative}
|
|
.skill-fill::after{
|
|
content:'';position:absolute;inset:0;
|
|
background:repeating-linear-gradient(90deg,transparent 0px,transparent 3px,rgba(0,0,0,.2) 3px,rgba(0,0,0,.2) 4px);
|
|
}
|
|
.skill-fill.green{background:var(--accent);box-shadow:0 0 6px var(--accent-glow)}
|
|
.skill-fill.cyan{background:var(--cyan);box-shadow:0 0 6px rgba(0,255,255,.3)}
|
|
.skill-fill.amber{background:var(--amber);box-shadow:0 0 6px rgba(255,176,0,.3)}
|
|
.skill-fill.purple{background:var(--purple);box-shadow:0 0 6px rgba(204,119,255,.3)}
|
|
.skill-pct{
|
|
font-family:'Share Tech Mono',monospace;font-size:14px;
|
|
color:var(--accent);width:36px;text-align:right;
|
|
transition:color .3s;
|
|
}
|
|
.tools-section{border-top:1px solid var(--dimmer);padding-top:16px}
|
|
.tools-title{
|
|
font-family:'Press Start 2P',monospace;font-size:7px;
|
|
color:var(--accent);margin-bottom:12px;
|
|
}
|
|
.tools-grid{display:flex;flex-wrap:wrap;gap:6px}
|
|
.tool-chip{
|
|
padding:4px 10px;
|
|
font-family:'Press Start 2P',monospace;font-size:6px;
|
|
color:var(--dim);border:1px solid var(--dimmer);
|
|
background:var(--surface2);transition:all .15s;cursor:default;
|
|
}
|
|
.tool-chip:hover{color:var(--accent);border-color:var(--accent);box-shadow:0 0 6px var(--accent-glow);text-shadow:0 0 4px var(--accent-glow)}
|
|
|
|
/* Contact */
|
|
.contact-list{display:flex;flex-direction:column;gap:6px}
|
|
.contact-row{
|
|
display:flex;align-items:center;gap:12px;
|
|
padding:12px;border:1px solid var(--dimmer);
|
|
background:var(--surface2);transition:all .15s;cursor:pointer;
|
|
}
|
|
.contact-row:hover{
|
|
border-color:var(--accent);
|
|
background:rgba(255,255,255,.02);
|
|
box-shadow:0 0 8px var(--accent-glow);
|
|
}
|
|
.contact-icon{font-size:18px;flex-shrink:0;width:28px;text-align:center}
|
|
.contact-info{flex:1;min-width:0}
|
|
.contact-label{
|
|
font-family:'Press Start 2P',monospace;font-size:6px;
|
|
color:var(--dim);display:block;margin-bottom:2px;
|
|
}
|
|
.contact-val{
|
|
font-family:'VT323',monospace;font-size:20px;
|
|
color:var(--accent);transition:color .3s;
|
|
}
|
|
.contact-row:hover .contact-val{text-shadow:0 0 6px var(--accent-glow)}
|
|
.contact-arrow{
|
|
color:var(--dim);font-size:18px;flex-shrink:0;
|
|
transition:all .15s;
|
|
}
|
|
.contact-row:hover .contact-arrow{color:var(--accent);transform:translateX(4px);text-shadow:0 0 6px var(--accent-glow)}
|
|
|
|
/* Statusbar */
|
|
.statusbar{
|
|
display:flex;align-items:center;justify-content:space-between;
|
|
padding:3px 8px;
|
|
background:var(--surface);border-top:2px solid var(--dimmer);
|
|
font-family:'Press Start 2P',monospace;font-size:6px;
|
|
color:var(--dim);position:sticky;bottom:0;
|
|
}
|
|
.sb-center{color:var(--accent);transition:color .3s}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar{width:10px}
|
|
::-webkit-scrollbar-track{background:var(--surface)}
|
|
::-webkit-scrollbar-thumb{background:var(--dimmer);border:1px solid var(--surface3)}
|
|
::-webkit-scrollbar-thumb:hover{background:var(--accent-dim)}
|
|
|
|
/* Responsive */
|
|
@media(max-width:768px){
|
|
.stats-grid{grid-template-columns:repeat(2,1fr)}
|
|
.fedl-stats-row{grid-template-columns:repeat(2,1fr)}
|
|
.nav-bar{gap:0;overflow-x:auto}
|
|
.nav-link{font-size:14px;padding:2px 8px}
|
|
.ascii-art{font-size:7px}
|
|
.skill-name{width:70px;font-size:6px}
|
|
.project-row{flex-wrap:wrap}
|
|
.project-row .pr-meta{width:100%;justify-content:flex-start}
|
|
.section-title{margin-top:56px}
|
|
}
|
|
@media(max-width:480px){
|
|
body{font-size:16px}
|
|
.stats-grid{grid-template-columns:1fr 1fr}
|
|
.fedl-stats-row{grid-template-columns:1fr 1fr}
|
|
.hero-tags{gap:4px}
|
|
.tag{font-size:6px;padding:3px 6px}
|
|
}
|
|
|
|
/* Glitch */
|
|
@keyframes glitch{
|
|
0%{transform:none}20%{transform:translate(-2px,1px)}
|
|
40%{transform:translate(2px,-1px)}60%{transform:none}
|
|
80%{transform:translate(1px,2px)}100%{transform:none}
|
|
}
|
|
.glitch{animation:glitch .3s ease}
|