bolyai/CIS490
3
0
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Wiki Activity Actions

training/dashboard(vaporwave): restore CSS .vw-floor* rules (orphan from prior revert)

Browse source
This commit is contained in:
Max Gorog 2026-05-07 23:29:38 -05:00
parent f2e3e982ef
commit 004ce5f50a
2 changed files with 42 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
training/dashboard/static/dashboard.css
View file

@ -177,16 +177,47 @@ body[data-theme="laser"] .bg-laser { display: block; }
and contain: paint. The canvas approach side-steps that entirely:
no perspective transform, lines drawn at exact pixel positions
each frame, palette colors read from CSS custom properties. */
/* Canvas is a replaced element — even with top/bottom both set, it
keeps its intrinsic 300×150 size unless you give it explicit CSS
width AND height. We compute both from the horizon variable. */
.vw-floor-canvas {
position: absolute;
left: 0;
top: var(--vw-horizon, 55%);
width: 100%;
height: calc(100% - var(--vw-horizon, 55%));
display: block;
/* CSS perspective grid. Three layered elements so rotate (static)
and translate (animated) live on different layers — animating
transform on the rotated element directly was what re-rasterized
per frame in earlier attempts. Each element is also pushed into
its own compositor layer to keep the document scroll from
dirtying the bg. */
.vw-floor {
position: absolute; left: -50%; right: -50%;
top: var(--vw-horizon, 55%); bottom: -10%;
perspective: 800px;
overflow: hidden;
contain: strict;
transform: translateZ(0);
will-change: transform;
}
.vw-floor-tilt {
position: absolute; inset: 0 0 -50% 0;
transform: rotateX(var(--vw-perspective, 62deg)) translateZ(0);
transform-origin: top center;
}
.vw-floor-grid {
position: absolute; left: 0; right: 0; top: 0; height: 200%;
/* 3px lines: bigger pixel footprint = far less subpixel
sensitivity. Pattern is drawn once; only the layer offset
animates. */
background-image:
repeating-linear-gradient(
to bottom,
transparent 0 calc(var(--vw-grid-size, 80px) - 3px),
var(--c1) calc(var(--vw-grid-size, 80px) - 3px) var(--vw-grid-size, 80px)),
repeating-linear-gradient(
to right,
transparent 0 calc(var(--vw-grid-size, 80px) - 3px),
var(--c2) calc(var(--vw-grid-size, 80px) - 3px) var(--vw-grid-size, 80px));
animation: vw-floor-y calc(4s / var(--anim-speed, 1)) linear infinite;
will-change: transform;
backface-visibility: hidden;
}
@keyframes vw-floor-y {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, var(--vw-grid-size, 80px), 0); }
}
.vw-scanlines {
position: absolute; inset: 0; pointer-events: none;

2
training/dashboard/static/index.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CIS490 — live</title>
<link rel="stylesheet" href="/static/dashboard.css?v=313c1874">
<link rel="stylesheet" href="/static/dashboard.css?v=dd92c026">
</head>
<body>
<!-- SVG filter defs for the lava-lamp goo effect. Width/height 0