609 lines
17 KiB
CSS
609 lines
17 KiB
CSS
/* ═══════════════════════════════════════════════════
|
||
AT&T 3B1 / UNIX PC · Personal Site Stylesheet
|
||
Orange phosphor, reverse-video title bars, 1984
|
||
═══════════════════════════════════════════════════ */
|
||
|
||
/* ── Variables ──────────────────────────────────── */
|
||
:root {
|
||
/* Orange phosphor — warm amber-orange, like the 3B1 monitor */
|
||
--p: #e07820; /* primary phosphor orange */
|
||
--p-dim: #7a3e0a; /* dim: borders, secondary text */
|
||
--p-bright: #ffb05c; /* bright: highlights, headings */
|
||
--p-glow: rgba(224,120,32,0.38);
|
||
--p-faint: rgba(224,120,32,0.06);
|
||
|
||
/* Backgrounds — near-black with a breath of warmth */
|
||
--bg: #060300;
|
||
--win-bg: rgba(6, 3, 0, 0.98);
|
||
--bar-bg: rgba(4, 2, 0, 0.99);
|
||
|
||
/* Shadows */
|
||
--glow-text: 0 0 5px var(--p), 0 0 14px var(--p-glow);
|
||
--glow-box: 0 0 0 1px var(--p-dim), 0 0 18px rgba(224,120,32,0.10);
|
||
|
||
/* Typography — VT323 is the star here, body for readability */
|
||
--font-display: 'VT323', 'Courier New', monospace;
|
||
--font-body: 'Share Tech Mono', 'Courier New', monospace;
|
||
}
|
||
|
||
/* ── Reset ──────────────────────────────────────── */
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
html, body {
|
||
width: 100%; height: 100%;
|
||
overflow: hidden;
|
||
background: var(--bg);
|
||
color: var(--p);
|
||
font-family: var(--font-body);
|
||
font-size: 15px;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
a { color: var(--p-bright); text-decoration: none; }
|
||
|
||
/* ── CRT Overlay Effects ────────────────────────── */
|
||
|
||
/* Scanlines — the 3B1 had a fairly sharp display;
|
||
keep these subtle so they read as "screen" not "noise" */
|
||
.scanlines {
|
||
position: fixed; inset: 0; z-index: 9999; pointer-events: none;
|
||
background: repeating-linear-gradient(
|
||
to bottom,
|
||
transparent 0px,
|
||
transparent 3px,
|
||
rgba(0, 0, 0, 0.07) 3px,
|
||
rgba(0, 0, 0, 0.07) 4px
|
||
);
|
||
}
|
||
|
||
/* Vignette — slightly asymmetric like a real CRT bezel */
|
||
.crt-vignette {
|
||
position: fixed; inset: 0; z-index: 9998; pointer-events: none;
|
||
background: radial-gradient(ellipse 90% 80% at 50% 50%,
|
||
transparent 50%,
|
||
rgba(0, 0, 0, 0.65) 100%
|
||
);
|
||
}
|
||
|
||
/* Very subtle phosphor afterglow / flicker */
|
||
@keyframes flicker {
|
||
0%, 94%, 100% { opacity: 1; }
|
||
95% { opacity: 0.975; }
|
||
97% { opacity: 0.99; }
|
||
}
|
||
body { animation: flicker 12s infinite; }
|
||
|
||
/* ── Desktop Shell ──────────────────────────────── */
|
||
|
||
.desktop {
|
||
position: relative;
|
||
width: 100vw; height: 100vh;
|
||
display: flex; flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Barely-visible dot matrix — evokes a phosphor screen surface */
|
||
.desktop::before {
|
||
content: '';
|
||
position: absolute; inset: 0; pointer-events: none;
|
||
background-image: radial-gradient(circle, rgba(224,120,32,0.055) 1px, transparent 1px);
|
||
background-size: 4px 4px;
|
||
}
|
||
|
||
/* ── Header — dense dot pattern with centred clock ── */
|
||
/*
|
||
* The 3B1 desktop had a characteristic halftone dot field
|
||
* spanning the full width of the screen, with the system
|
||
* clock displayed as a bright cutout in the centre.
|
||
*/
|
||
|
||
.desktop-header {
|
||
position: relative; z-index: 500;
|
||
height: 26px;
|
||
flex-shrink: 0;
|
||
border-bottom: 2px solid var(--p-dim);
|
||
|
||
/* Dense dot matrix — the signature 3B1 desktop pattern */
|
||
background-color: var(--bg);
|
||
background-image: radial-gradient(circle, var(--p-dim) 1px, transparent 1px);
|
||
background-size: 4px 4px;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* Clock — sits centred, punched out of the dot field */
|
||
.header-clock {
|
||
font-family: var(--font-display);
|
||
font-size: 17px;
|
||
letter-spacing: 3px;
|
||
color: var(--p);
|
||
text-shadow: 0 0 6px var(--p-glow); /* subtle warmth, not a blast */
|
||
|
||
/* Opaque background clears the dots behind the text */
|
||
background: var(--bg);
|
||
padding: 0 14px;
|
||
border-left: 1px solid var(--p-dim);
|
||
border-right: 1px solid var(--p-dim);
|
||
height: 100%;
|
||
display: flex; align-items: center;
|
||
}
|
||
|
||
/* "i'm boring" — accessibility escape hatch, tucked in the right corner */
|
||
.boring-link {
|
||
position: absolute;
|
||
right: 0; top: 0; bottom: 0;
|
||
padding: 0 10px;
|
||
font-family: var(--font-body);
|
||
font-size: 11px;
|
||
color: var(--p-dim);
|
||
display: flex; align-items: center;
|
||
border-left: 1px solid var(--p-dim);
|
||
background: var(--bg); /* clear the dots behind it */
|
||
transition: color 0.06s, background 0.06s;
|
||
white-space: nowrap;
|
||
}
|
||
.boring-link:hover {
|
||
color: var(--bg);
|
||
background: var(--p-dim);
|
||
}
|
||
|
||
/* ── Desktop Area ───────────────────────────────── */
|
||
|
||
.desktop-area {
|
||
flex: 1;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ── Desktop Icons ──────────────────────────────── */
|
||
|
||
.desktop-icons {
|
||
position: absolute;
|
||
top: 14px; left: 14px;
|
||
display: flex; flex-direction: column;
|
||
gap: 6px;
|
||
z-index: 50;
|
||
}
|
||
|
||
.desktop-icon {
|
||
display: flex; flex-direction: column;
|
||
align-items: center; gap: 5px;
|
||
cursor: pointer;
|
||
padding: 10px 8px;
|
||
border: 1px solid transparent;
|
||
width: 88px;
|
||
text-align: center;
|
||
transition: all 0.06s;
|
||
user-select: none;
|
||
}
|
||
.desktop-icon:hover { border-color: var(--p-dim); background: var(--p-faint); }
|
||
.desktop-icon.active { background: var(--p); border-color: var(--p); }
|
||
.desktop-icon.active .icon-art,
|
||
.desktop-icon.active .icon-label { color: var(--bg); text-shadow: none; }
|
||
|
||
.icon-art {
|
||
font-family: var(--font-display);
|
||
font-size: 36px;
|
||
line-height: 1;
|
||
color: var(--p);
|
||
}
|
||
|
||
.icon-label {
|
||
font-size: 12px;
|
||
color: var(--p-dim);
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
/* ── Windows ────────────────────────────────────── */
|
||
|
||
/*
|
||
* 3B1 window anatomy:
|
||
*
|
||
* ┌[⤢]──────── TITLE ──────────────────┐
|
||
* │ │ ← thick border throughout
|
||
* │ content │
|
||
* │ │
|
||
* └[×]──────────────────────────────[◢]┘
|
||
*
|
||
* Focused: amber fill on title + footer, black text, amber border.
|
||
* Unfocused: dark decorations, amber text, black border + thin outline.
|
||
*/
|
||
|
||
/* ── Unfocused (default) ──────────────────────── */
|
||
|
||
.window {
|
||
position: absolute;
|
||
min-width: 280px; min-height: 160px;
|
||
max-height: calc(100vh - 20px);
|
||
background: var(--win-bg);
|
||
border: 4px solid var(--p);
|
||
border-radius: 0;
|
||
display: flex; flex-direction: column;
|
||
}
|
||
|
||
.hidden { display: none; }
|
||
|
||
/* Title bar — dark bg, amber text */
|
||
.window-titlebar {
|
||
display: flex; align-items: stretch; gap: 0;
|
||
border-bottom: 3px solid var(--p-dim);
|
||
background: var(--win-bg);
|
||
cursor: move;
|
||
user-select: none;
|
||
flex-shrink: 0;
|
||
transition: background 0.08s, border-color 0.08s;
|
||
}
|
||
|
||
/* Base rule — strip UA button styling */
|
||
.win-btn {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
color: var(--p-dim);
|
||
}
|
||
|
||
.win-btn.maximize {
|
||
width: 28px;
|
||
border: none;
|
||
border-right: 3px solid var(--p-dim);
|
||
background: transparent;
|
||
font-family: var(--font-display);
|
||
font-size: 16px;
|
||
cursor: pointer; padding: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
flex-shrink: 0;
|
||
transition: background 0.06s, color 0.06s;
|
||
}
|
||
.win-btn.maximize:hover { background: var(--p-faint); color: var(--p); }
|
||
|
||
.window-title {
|
||
flex: 1;
|
||
font-family: var(--font-display);
|
||
font-size: 18px;
|
||
letter-spacing: 1px;
|
||
color: var(--p); /* amber text when unfocused */
|
||
padding: 2px 10px;
|
||
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
|
||
line-height: 1;
|
||
display: flex; align-items: center;
|
||
transition: color 0.08s;
|
||
}
|
||
|
||
/* Content pane */
|
||
.window-content {
|
||
flex: 1;
|
||
padding: 14px 18px;
|
||
overflow-y: auto; overflow-x: hidden;
|
||
}
|
||
|
||
/* More / scroll indicator — sits between content and footer */
|
||
.scroll-more {
|
||
padding: 1px 10px;
|
||
background: var(--win-bg);
|
||
border-top: 1px dashed var(--p-dim);
|
||
color: var(--p-dim);
|
||
font-family: var(--font-display);
|
||
font-size: 14px;
|
||
letter-spacing: 3px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
user-select: none;
|
||
transition: color 0.08s, background 0.08s, border-color 0.08s;
|
||
}
|
||
.scroll-more:hover { color: var(--p); background: var(--p-faint); }
|
||
.window.focused .scroll-more { border-top-color: var(--p-dim); }
|
||
.window.focused .scroll-more:hover { color: var(--p); }
|
||
|
||
/* Footer bar — dark bg, amber-tinted buttons */
|
||
.window-footer {
|
||
display: flex; align-items: stretch; gap: 0;
|
||
border-top: 3px solid var(--p-dim);
|
||
background: var(--win-bg);
|
||
flex-shrink: 0;
|
||
transition: background 0.08s, border-color 0.08s;
|
||
}
|
||
|
||
/* Close button — bottom-left */
|
||
.win-btn.close {
|
||
width: 28px; height: 20px;
|
||
border: none;
|
||
border-right: 3px solid var(--p-dim);
|
||
background: transparent;
|
||
color: var(--p-dim);
|
||
font-family: var(--font-display);
|
||
font-size: 20px;
|
||
line-height: 1;
|
||
cursor: pointer; padding: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
flex-shrink: 0;
|
||
transition: all 0.06s;
|
||
}
|
||
.win-btn.close:hover { background: var(--p-faint); color: var(--p); border-right-color: var(--p); }
|
||
|
||
.win-footer-spacer { flex: 1; }
|
||
|
||
/* Resize handle — bottom-right */
|
||
.win-resize {
|
||
width: 28px; height: 20px;
|
||
border: none;
|
||
border-left: 3px solid var(--p-dim);
|
||
background: transparent;
|
||
color: var(--p-dim);
|
||
font-size: 11px;
|
||
cursor: se-resize;
|
||
user-select: none;
|
||
display: flex; align-items: center; justify-content: center;
|
||
flex-shrink: 0;
|
||
transition: all 0.06s;
|
||
}
|
||
.win-resize:hover { background: var(--p-faint); color: var(--p); border-left-color: var(--p); }
|
||
|
||
/* ── Focused — amber fill on decorations, black text ── */
|
||
|
||
.window.focused {
|
||
/* border is already var(--p) — decoration fill is what signals focus */
|
||
}
|
||
|
||
.window.focused .window-titlebar {
|
||
background: var(--p);
|
||
border-bottom-color: var(--p);
|
||
}
|
||
|
||
.window.focused .window-footer {
|
||
background: var(--p);
|
||
border-top-color: var(--p);
|
||
}
|
||
|
||
/* Children all have explicit color values so inheritance won't reach them */
|
||
.window.focused .window-title,
|
||
.window.focused .win-btn,
|
||
.window.focused .win-resize {
|
||
color: #000;
|
||
}
|
||
|
||
/* Internal dividers become dark on amber */
|
||
.window.focused .win-btn.maximize { border-right-color: rgba(0,0,0,0.25); }
|
||
.window.focused .win-btn.close { border-right-color: rgba(0,0,0,0.25); }
|
||
.window.focused .win-resize { border-left-color: rgba(0,0,0,0.25); }
|
||
|
||
/* Hover: darken slightly */
|
||
.window.focused .win-btn:hover,
|
||
.window.focused .win-resize:hover {
|
||
background: rgba(0,0,0,0.18);
|
||
}
|
||
|
||
/* ── Scrollbar ──────────────────────────────────── */
|
||
|
||
::-webkit-scrollbar { width: 8px; }
|
||
::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
border-left: 2px solid var(--p-dim);
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
background: var(--p-dim);
|
||
border-left: 2px solid var(--p-dim);
|
||
}
|
||
::-webkit-scrollbar-thumb:hover { background: var(--p); }
|
||
|
||
|
||
/* ── Content Typography ─────────────────────────── */
|
||
|
||
.window-content h1,
|
||
.window-content h2,
|
||
.window-content h3 {
|
||
font-family: var(--font-display);
|
||
color: var(--p-bright);
|
||
text-shadow: none;
|
||
letter-spacing: 1px;
|
||
margin: 0 0 10px;
|
||
}
|
||
.window-content h1 { font-size: 38px; }
|
||
.window-content h2 { font-size: 28px; border-bottom: 1px solid var(--p-dim); padding-bottom: 4px; margin-bottom: 14px; }
|
||
.window-content h3 { font-size: 22px; }
|
||
|
||
.window-content p { margin: 0 0 12px; }
|
||
.window-content ul, .window-content ol { margin: 0 0 12px 20px; }
|
||
.window-content li { margin-bottom: 4px; }
|
||
|
||
.window-content a {
|
||
color: var(--p-bright);
|
||
border-bottom: 1px solid var(--p-dim);
|
||
transition: all 0.06s;
|
||
}
|
||
.window-content a:hover {
|
||
color: var(--bg);
|
||
background: var(--p);
|
||
border-bottom-color: var(--p);
|
||
text-shadow: none;
|
||
}
|
||
|
||
.window-content code {
|
||
background: rgba(224,120,32,0.08);
|
||
border: 1px solid var(--p-dim);
|
||
padding: 1px 5px;
|
||
font-family: var(--font-body);
|
||
font-size: 0.93em;
|
||
}
|
||
.window-content pre {
|
||
background: rgba(0,0,0,0.6);
|
||
border: 2px solid var(--p-dim);
|
||
border-left: 4px solid var(--p-dim);
|
||
padding: 12px 16px;
|
||
overflow-x: auto;
|
||
margin: 0 0 14px;
|
||
}
|
||
.window-content pre code { background: none; border: none; padding: 0; }
|
||
|
||
/* ── Terminal Helpers ───────────────────────────── */
|
||
|
||
.prompt { padding-left: 0; }
|
||
.prompt::before { content: '$ '; color: var(--p-bright); }
|
||
|
||
.prompt-output { color: var(--p-dim); margin-bottom: 8px; padding-left: 14px; }
|
||
|
||
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
|
||
.cursor::after { content: '█'; animation: blink 1s step-end infinite; }
|
||
|
||
/* ASCII/pre art blocks */
|
||
.window-content pre.ascii {
|
||
border: none; border-left: none;
|
||
background: none;
|
||
color: var(--p);
|
||
text-shadow: 0 0 8px var(--p-glow); /* kept faint — ascii art earns a little glow */
|
||
padding: 0;
|
||
line-height: 1.15;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
/* ── Blog window in-UI browser ─────────────────── */
|
||
|
||
/* Tag filter strip */
|
||
.blog-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 5px;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.blog-tag,
|
||
.project-tag {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
border: 1px solid var(--p-dim);
|
||
background: transparent;
|
||
color: var(--p-dim);
|
||
font-family: var(--font-body);
|
||
font-size: 14px;
|
||
letter-spacing: 0.5px;
|
||
padding: 4px 12px;
|
||
cursor: pointer;
|
||
transition: all 0.06s;
|
||
}
|
||
.blog-tag:hover,
|
||
.project-tag:hover { border-color: var(--p); color: var(--p); }
|
||
.blog-tag.active,
|
||
.project-tag.active { background: var(--p); border-color: var(--p); color: #000; }
|
||
.tag-count { opacity: 0.65; font-size: 10px; }
|
||
|
||
/* Back button inside post view */
|
||
.blog-back {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
border: 1px solid var(--p-dim);
|
||
background: transparent;
|
||
color: var(--p);
|
||
font-family: var(--font-body);
|
||
font-size: 13px;
|
||
padding: 2px 12px;
|
||
cursor: pointer;
|
||
transition: all 0.06s;
|
||
display: inline-block;
|
||
margin-bottom: 4px;
|
||
}
|
||
.blog-back:hover { background: var(--p); color: #000; border-color: var(--p); }
|
||
|
||
/* Post metadata line */
|
||
.post-meta {
|
||
font-size: 12px;
|
||
color: var(--p-dim);
|
||
margin: 4px 0 0;
|
||
}
|
||
|
||
/* Divider between meta and body */
|
||
.post-rule {
|
||
border: none;
|
||
border-top: 1px solid var(--p-dim);
|
||
margin: 12px 0 16px;
|
||
}
|
||
|
||
/* ── Blog Post List ─────────────────────────────── */
|
||
|
||
.post-list { list-style: none; margin: 0; padding: 0; }
|
||
.post-list li {
|
||
display: flex; justify-content: space-between; align-items: baseline;
|
||
border-bottom: 1px solid var(--p-dim);
|
||
padding: 7px 0; gap: 16px;
|
||
}
|
||
.post-list a { border: none; color: var(--p); }
|
||
.post-list a:hover { background: none; color: var(--p-bright); text-shadow: var(--glow-text); }
|
||
.post-date { color: var(--p-dim); font-size: 12px; white-space: nowrap; flex-shrink: 0; }
|
||
|
||
/* ── Project Cards ──────────────────────────────── */
|
||
|
||
.project-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
|
||
gap: 10px;
|
||
}
|
||
.project-card {
|
||
border: 2px solid var(--p-dim);
|
||
padding: 10px 12px;
|
||
transition: all 0.1s;
|
||
}
|
||
.project-card:hover { border-color: var(--p); background: var(--p-faint); }
|
||
.project-card h3 { font-size: 17px; margin-bottom: 6px; }
|
||
.project-card p { font-size: 13px; color: var(--p-dim); margin: 0 0 10px; }
|
||
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
|
||
.tag { font-size: 11px; border: 1px solid var(--p-dim); padding: 1px 6px; color: var(--p-dim); }
|
||
|
||
/* ── Single-page window (blog posts, /about, etc) ── */
|
||
|
||
.page-window {
|
||
top: 30px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: min(760px, 90vw);
|
||
max-height: calc(100vh - 70px);
|
||
}
|
||
|
||
/* ── Image Revealer ─────────────────────────────── */
|
||
|
||
.img-revealer {
|
||
border: 1px solid var(--p-dim);
|
||
margin: 12px 0;
|
||
}
|
||
|
||
.img-revealer-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 4px 8px;
|
||
background: var(--p-faint);
|
||
border-bottom: 1px solid var(--p-dim);
|
||
}
|
||
|
||
.img-revealer-label {
|
||
font-size: 12px;
|
||
color: var(--p-dim);
|
||
font-style: italic;
|
||
}
|
||
|
||
.img-reveal-btn {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
background: none;
|
||
border: 1px solid var(--p-dim);
|
||
color: var(--p);
|
||
font-family: inherit;
|
||
font-size: 11px;
|
||
padding: 1px 8px;
|
||
cursor: pointer;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.img-reveal-btn:hover {
|
||
background: var(--p);
|
||
color: #000;
|
||
}
|
||
|
||
/* Image hidden by default; shown when revealed */
|
||
.img-revealer img {
|
||
display: none;
|
||
max-width: 100%;
|
||
padding: 8px;
|
||
filter: sepia(1) hue-rotate(-10deg) saturate(3) brightness(0.85);
|
||
}
|
||
.img-revealer.revealed img {
|
||
display: block;
|
||
}
|