/* ============================================================ RETRO TERMINAL PORTFOLIO · style.css DOS / Norton-Commander style website template ------------------------------------------------------------ CHANGE COLORS: the whole look is controlled by the color variables below. 4 themes are built in — pick one by setting data-theme on in index.html (blue / amber / green / matrix) or use the theme switcher in the top bar. ============================================================ */ /* ---- THEME PALETTES ---- */ :root,[data-theme="blue"]{ --bg:#0000aa; --frame:#00aaaa; --frame-h:#33ffff; --text:#aaaaaa; --bright:#ffffff; --accent:#ffff55; --dir:#ffffff; --exe:#55ff55; --link:#55ff55; --sel-bg:#00aaaa; --sel-fg:#000000; --menu-bg:#00aaaa; --menu-fg:#000000; --hot:#ff5555; --glow:rgba(51,255,255,.45); } [data-theme="amber"]{ --bg:#140800; --frame:#ff9500; --frame-h:#ffc061; --text:#cc7a10; --bright:#ffc061; --accent:#ffd98a; --dir:#ffc061; --exe:#ffd98a; --link:#ffd98a; --sel-bg:#ff9500; --sel-fg:#140800; --menu-bg:#ff9500; --menu-fg:#140800; --hot:#ffffff; --glow:rgba(255,149,0,.45); } [data-theme="green"]{ --bg:#001400; --frame:#2fdd5c; --frame-h:#8dffa8; --text:#2fbb4e; --bright:#aaffbb; --accent:#ccffaa; --dir:#aaffbb; --exe:#ffff88; --link:#aaffbb; --sel-bg:#2fdd5c; --sel-fg:#001400; --menu-bg:#2fdd5c; --menu-fg:#001400; --hot:#ffffff; --glow:rgba(47,221,92,.45); } [data-theme="matrix"]{ --bg:#000000; --frame:#00ff41; --frame-h:#8dffb0; --text:#00c433; --bright:#d6ffd6; --accent:#8dffb0; --dir:#ffffff; --exe:#8dffb0; --link:#8dffb0; --sel-bg:#00ff41; --sel-fg:#000000; --menu-bg:#00330f; --menu-fg:#8dffb0; --hot:#ffffff; --glow:rgba(0,255,65,.55); } *{box-sizing:border-box} html,body{margin:0;height:100%} body{ background:#000; font-family:'VT323',monospace; font-size:22px; line-height:1.15; color:var(--text); display:flex; align-items:center; justify-content:center; padding:14px; overflow:hidden; } /* ---- CRT screen ---- */ .crt{ position:relative; width:100%; max-width:1100px; height:calc(100vh - 28px); max-height:720px; background:var(--bg); border-radius:14px; overflow:hidden; box-shadow:0 0 0 6px #111, 0 0 60px var(--glow), inset 0 0 120px rgba(0,0,0,.5); } .crt::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:9; background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)} .crt::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:8; background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.55) 100%)} .screen{position:absolute;inset:0;padding:6px 10px;display:flex;flex-direction:column;z-index:2} /* ---- top bars ---- */ .titlebar{display:flex;justify-content:space-between;color:var(--frame-h);padding:0 4px 2px;text-shadow:0 0 6px var(--glow)} .titlebar .ctrls span{margin-left:6px} .menubar{display:flex;gap:22px;align-items:center;background:var(--menu-bg);color:var(--menu-fg);padding:1px 8px;margin-bottom:4px} .menubar u{color:var(--hot);text-decoration:none;font-weight:bold} .menubar .sw{margin-left:auto;cursor:pointer} .menubar .sw:hover{text-decoration:underline} .menubar .clk{margin-left:16px} /* ---- panels ---- */ .panels{flex:1;display:flex;gap:8px;min-height:0} .panel{flex:1;border:2px solid var(--frame);display:flex;flex-direction:column;min-height:0} .panel-h{background:var(--frame);color:var(--sel-fg);text-align:center;padding:0 4px} .panel.left{flex:0 0 300px} /* ---- MOBILE: stack panels vertically so text isn't cut off ---- */ @media(max-width:720px){ body{font-size:20px;padding:8px;align-items:flex-start;height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto} .crt{height:auto;min-height:calc(100vh - 16px);max-height:none} .titlebar{flex-wrap:wrap} .menubar{flex-wrap:wrap;gap:8px 16px} .panels{flex-direction:column;gap:6px} .panel,.panel.left{flex:0 0 auto} .list{flex:0 0 auto} .viewer{max-height:none} .fkeys{flex-wrap:wrap;gap:2px} .fkey{flex:1 1 30%} } .cols{display:flex;color:var(--accent);border-bottom:1px solid var(--frame);padding:0 4px} .cols .c2{width:64px}.cols .c3{width:56px;text-align:right} .cols .c1{flex:1} .list{flex:1;overflow:auto;padding:2px 4px} .row{display:flex;cursor:pointer;padding:0 2px} .row .c1{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .row .c2{width:64px}.row .c3{width:56px;text-align:right} .row.dir .c1{color:var(--dir);font-weight:bold} .row.exe .c1{color:var(--exe)} .row.sel{background:var(--sel-bg);color:var(--sel-fg)} .row.sel .c1{color:var(--sel-fg)} .row:hover:not(.sel){background:rgba(255,255,255,.08)} /* ---- viewer (right) ---- */ .viewer{flex:1;overflow:auto;padding:6px 10px;color:var(--text)} .viewer h2{color:var(--accent);margin:0 0 6px;text-shadow:0 0 8px var(--glow)} .viewer h3{color:var(--frame-h);margin:14px 0 4px} .viewer p{margin:0 0 10px} .viewer a{color:var(--link);text-decoration:none} .viewer a:hover{background:var(--link);color:var(--bg)} .viewer .tag{color:var(--bright)} .viewer .bar{color:var(--frame-h)} .viewer ul{margin:4px 0 10px;padding-left:20px} .blink{animation:bl 1s steps(1) infinite} @keyframes bl{77%{opacity:0}} /* ---- bottom bars ---- */ .hint{padding:1px 6px;color:var(--text);border-top:1px solid var(--frame)} .fkeys{display:flex;margin-top:2px} .fkey{display:flex;flex:1;min-width:0} .fkey b{color:var(--bright);padding:0 1px} .fkey span{background:var(--frame);color:var(--sel-fg);flex:1;padding:0 4px;margin-right:2px;white-space:nowrap;overflow:hidden;cursor:pointer} .fkey span:hover{background:var(--frame-h)}