🐐
This commit is contained in:
@@ -242,6 +242,7 @@ main { position: relative; z-index: 1; }
|
||||
padding: 0.35rem 0.9rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* Slot-machine reels: each slot is a one-line window onto a word column */
|
||||
.hero-role .slot { display: block; height: 1.6em; overflow: hidden; transition: width 0.2s ease; }
|
||||
@@ -412,7 +413,9 @@ main { position: relative; z-index: 1; }
|
||||
text-align: center;
|
||||
}
|
||||
.pepsi-placeholder {
|
||||
height: 400px;
|
||||
/* ~7:6, tuned so the card exactly levels with .about-text at full
|
||||
container width (480px photo box -> 461px card) */
|
||||
aspect-ratio: 41 / 35;
|
||||
border-bottom: var(--border);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -701,6 +704,119 @@ footer {
|
||||
.dialog-button:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
|
||||
.dialog-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
|
||||
|
||||
/* ── Terminal (js/terminal.js, lazy-built dialog) ───────────── */
|
||||
.term-dialog {
|
||||
margin: auto;
|
||||
width: min(720px, 92vw);
|
||||
padding: 0;
|
||||
/* clips the dark screen to the sticker's rounded corners */
|
||||
overflow: hidden;
|
||||
background: var(--white);
|
||||
color: var(--ink);
|
||||
border: var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.term-dialog::backdrop { background: rgba(23, 23, 23, 0.55); }
|
||||
.term-dialog[open] { animation: termPop 0.22s var(--ease); }
|
||||
@keyframes termPop {
|
||||
from { transform: scale(0.92) translateY(10px); opacity: 0; }
|
||||
to { transform: none; opacity: 1; }
|
||||
}
|
||||
.term-titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.6rem 1rem;
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
.term-title {
|
||||
font-family: var(--mono);
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.term-screen {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
font-family: var(--mono);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
height: min(480px, 70vh);
|
||||
padding: 0.9rem 1rem;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
cursor: text;
|
||||
}
|
||||
/* min-height keeps blank scrollback lines one line tall */
|
||||
.term-line {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
min-height: 1.5em;
|
||||
}
|
||||
.term-ps1, .term-prompt { color: var(--green); }
|
||||
.term-dir { color: var(--blue); }
|
||||
.term-inputrow { display: flex; gap: 1ch; align-items: baseline; }
|
||||
.term-prompt { white-space: nowrap; }
|
||||
.term-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
caret-color: var(--paper);
|
||||
}
|
||||
/* nano takes over the whole screen; shell scrollback hides underneath */
|
||||
.term-screen.nano-open {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.term-screen.nano-open .term-out,
|
||||
.term-screen.nano-open .term-inputrow { display: none; }
|
||||
.nano {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
/* reverse video, like the real thing */
|
||||
.nano-bar {
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
padding: 0 0.5ch;
|
||||
}
|
||||
.nano-title { display: flex; justify-content: space-between; }
|
||||
.nano-edit {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
white-space: pre;
|
||||
overflow: auto;
|
||||
caret-color: var(--paper);
|
||||
}
|
||||
.nano-status { text-align: center; min-height: 1.5em; }
|
||||
.nano-status span {
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
padding: 0 1ch;
|
||||
}
|
||||
.nano-keys { white-space: pre-wrap; }
|
||||
.nano-key {
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
padding: 0 0.5ch;
|
||||
}
|
||||
|
||||
/* ── Responsive ─────────────────────────────────────────────── */
|
||||
@media (max-width: 960px) {
|
||||
.about-grid { grid-template-columns: 1fr; gap: 2rem; }
|
||||
@@ -741,6 +857,8 @@ footer {
|
||||
.burger { display: flex; }
|
||||
.education-grid { grid-template-columns: 1fr; }
|
||||
.project-title-row { flex-direction: column; align-items: flex-start; }
|
||||
.term-dialog { width: calc(100vw - 1.5rem); }
|
||||
.term-screen { height: min(480px, 65vh); }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@@ -794,7 +912,7 @@ footer {
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* Tooltip: shows on hover, keyboard focus, or tap (script.js toggles .tip-open) */
|
||||
/* Tooltip: shows on hover, keyboard focus, or tap (js/tooltips.js toggles .tip-open) */
|
||||
[data-tip]:not([data-tip=""]):hover::after,
|
||||
[data-tip]:not([data-tip=""]):focus-visible::after,
|
||||
[data-tip]:not([data-tip=""]).tip-open::after {
|
||||
@@ -896,15 +1014,15 @@ footer {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
margin-left: -55px;
|
||||
perspective: 420px;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
/* No perspective/preserve-3d: js/d20.js projects each face flat itself —
|
||||
Firefox's 3D plane-splitting drops parts of faces at grazing angles */
|
||||
.die {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.die-face {
|
||||
position: absolute;
|
||||
@@ -913,7 +1031,7 @@ footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backface-visibility: hidden;
|
||||
/* no backface-visibility: js/d20.js culls faces itself (Firefox flicker) */
|
||||
color: var(--ink);
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -934,6 +1052,221 @@ footer {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── Achievements (js/achievements.js, absent until first unlock) ── */
|
||||
.achv {
|
||||
position: fixed;
|
||||
top: 0.75rem;
|
||||
left: 0.75rem;
|
||||
z-index: 950;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
transition: top 0.3s var(--ease);
|
||||
animation: achvPop 0.35s var(--ease);
|
||||
transform-origin: top left;
|
||||
}
|
||||
/* Tucked below the nav whenever it's on screen */
|
||||
#header.scrolled ~ .achv { top: calc(var(--nav-h) + 0.75rem); }
|
||||
@keyframes achvPop {
|
||||
from { transform: scale(0); }
|
||||
}
|
||||
.achv-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.6ch;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.85rem;
|
||||
color: var(--ink);
|
||||
padding: 0.3rem 0.85rem;
|
||||
background: var(--white);
|
||||
border: var(--border-thin);
|
||||
border-radius: var(--radius-pill);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: background 150ms ease;
|
||||
}
|
||||
.achv-badge:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
|
||||
.achv-badge:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
|
||||
.achv-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
.achv-panel[hidden] { display: none; }
|
||||
/* Opening the panel marches the shields in from off-screen left,
|
||||
staggered down the column (re-triggers on every un-hide) */
|
||||
.achv-panel:not([hidden]) .achv-medal {
|
||||
animation: medalSlide 0.3s var(--ease) backwards;
|
||||
}
|
||||
.achv-medal:nth-child(2) { animation-delay: 45ms; }
|
||||
.achv-medal:nth-child(3) { animation-delay: 90ms; }
|
||||
.achv-medal:nth-child(4) { animation-delay: 135ms; }
|
||||
.achv-medal:nth-child(5) { animation-delay: 180ms; }
|
||||
.achv-medal:nth-child(6) { animation-delay: 225ms; }
|
||||
@keyframes medalSlide {
|
||||
from { transform: translateX(-105px); }
|
||||
}
|
||||
/* …and back out on close, unwinding bottom-first. js/achievements.js
|
||||
flips hidden after the last shield leaves */
|
||||
.achv-panel.achv-panel--closing .achv-medal {
|
||||
animation: medalSlideOut 0.3s var(--ease) forwards;
|
||||
}
|
||||
.achv-panel.achv-panel--closing .achv-medal:nth-child(1) { animation-delay: 225ms; }
|
||||
.achv-panel.achv-panel--closing .achv-medal:nth-child(2) { animation-delay: 180ms; }
|
||||
.achv-panel.achv-panel--closing .achv-medal:nth-child(3) { animation-delay: 135ms; }
|
||||
.achv-panel.achv-panel--closing .achv-medal:nth-child(4) { animation-delay: 90ms; }
|
||||
.achv-panel.achv-panel--closing .achv-medal:nth-child(5) { animation-delay: 45ms; }
|
||||
.achv-panel.achv-panel--closing .achv-medal:nth-child(6) { animation-delay: 0ms; }
|
||||
@keyframes medalSlideOut {
|
||||
to { transform: translateX(-105px); }
|
||||
}
|
||||
.achv-sr {
|
||||
position: absolute;
|
||||
width: 1px; height: 1px;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* Medals: heraldic shields — black until earned, blank stickers until
|
||||
their art lands (see MEDALS in js/achievements.js). clip-path eats
|
||||
borders, so the ink outline is a clipped ::before behind a smaller
|
||||
clipped ::after face; the art is an inline SVG above both */
|
||||
.achv-medal {
|
||||
position: relative;
|
||||
width: 80px; height: 95px;
|
||||
cursor: help;
|
||||
}
|
||||
/* Medal tooltips: the shield's own pseudo-elements are spent on the
|
||||
clip-path layers, so this is a child bubble instead of [data-tip] —
|
||||
keep it visually in step with the house tooltip above */
|
||||
.achv-tip {
|
||||
position: absolute;
|
||||
left: calc(100% + 12px);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: max-content;
|
||||
max-width: 220px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--ink);
|
||||
color: var(--white);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
.achv-tip b { display: block; font-weight: 700; }
|
||||
.achv-tip::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -13px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border: 8px solid transparent;
|
||||
border-right-color: var(--ink);
|
||||
}
|
||||
.achv-medal:hover .achv-tip { visibility: visible; }
|
||||
.achv-medal::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--ink);
|
||||
clip-path: path('M0 0 H80 V37.5 C80 70 56.25 87.5 40 95 C23.75 87.5 0 70 0 37.5 Z');
|
||||
}
|
||||
.achv-medal::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 3px;
|
||||
background: var(--ink);
|
||||
clip-path: path('M0 0 H74 V34.5 C74 65 52 81 37 89 C22 81 0 65 0 34.5 Z');
|
||||
}
|
||||
.achv-medal--got::after { background: var(--white); }
|
||||
/* Cat lover: Pepsi (a black cat) over the Pepsi-invoking tricolor bend */
|
||||
.achv-medal--cat::after {
|
||||
background: linear-gradient(135deg,
|
||||
#e32636 0 50px,
|
||||
var(--white) 50px 66px,
|
||||
#0e4c96 66px 100%);
|
||||
}
|
||||
.m-cat, .m-inv, .m-hk, .m-nat, .m-adv, .m-comp {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%; height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
/* Natural: a golden burst on royal purple behind a white d20 */
|
||||
.achv-medal--natural::after { background: #4b2e83; }
|
||||
/* Adventurer: a sword palewise on deep gules */
|
||||
.achv-medal--adventurer::after { background: #a01f2f; }
|
||||
/* Completionist: a gold crown on the finish flag (checky of ink and
|
||||
white, 9.25px squares — one conic tile is a 2×2 check) */
|
||||
.achv-medal--completionist::after {
|
||||
background: repeating-conic-gradient(var(--ink) 0% 25%, var(--white) 0% 50%)
|
||||
top left / 18.5px 18.5px;
|
||||
}
|
||||
/* Hacker: the terminal quoted back — ink screen, glowing green prompt,
|
||||
blinking cursor. Must re-override --got's white face */
|
||||
.achv-medal--hacker::after { background: var(--ink); }
|
||||
.m-hk-cursor { animation: hkBlink 1.1s infinite; }
|
||||
@keyframes hkBlink {
|
||||
0%, 49% { opacity: 1; }
|
||||
50%, 100% { opacity: 0; }
|
||||
}
|
||||
/* Investigator: a semé of sprinkles under a white magnifying glass;
|
||||
the lens is filled with the field color (same literal in the SVG)
|
||||
so the ring reads clean */
|
||||
.achv-medal--investigator::after { background: #177245; }
|
||||
.achv-toast {
|
||||
position: fixed;
|
||||
/* Undo the [popover] UA centering (inset: 0 + margin: auto) */
|
||||
inset: auto;
|
||||
margin: 0;
|
||||
top: 1rem;
|
||||
left: 50%;
|
||||
/* Parked above the viewport; js/achievements.js animates it in */
|
||||
transform: translate(-50%, -140%);
|
||||
z-index: 1200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
background: var(--white);
|
||||
border: var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 0.6rem 1.5rem 0.6rem 0.9rem;
|
||||
}
|
||||
/* The tiny medal: a real 80×95 shield scaled to 0.4, so the clip-path
|
||||
px coordinates and the SVG art need no small-size variants */
|
||||
.achv-toast-medal {
|
||||
flex: none;
|
||||
width: 32px; height: 38px;
|
||||
}
|
||||
.achv-toast-medal .achv-medal {
|
||||
display: block;
|
||||
transform: scale(0.4);
|
||||
transform-origin: top left;
|
||||
cursor: default;
|
||||
}
|
||||
.achv-toast-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
}
|
||||
.achv-toast-kicker {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.achv-toast-name {
|
||||
font-weight: 700;
|
||||
font-size: 1.05rem;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
/* ── Reduced motion ─────────────────────────────────────────── */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
@@ -941,4 +1274,9 @@ footer {
|
||||
.project-tags span, .timeline-tags span,
|
||||
.nav-link::after, #header, .hero-role .slot { transition: none; }
|
||||
.scroll-hint.visible i { animation: none; }
|
||||
.term-dialog[open] { animation: none; }
|
||||
.achv { animation: none; transition: none; }
|
||||
.achv-panel:not([hidden]) .achv-medal,
|
||||
.achv-panel.achv-panel--closing .achv-medal { animation: none; }
|
||||
.m-hk-cursor { animation: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user