48 lines
1.5 KiB
CSS
48 lines
1.5 KiB
CSS
.matrix-canvas {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
background: rgba(0, 0, 0, 0.88);
|
|
/* Colors are pre-dimmed (x0.7) rather than using `filter: brightness()`,
|
|
which would re-filter the whole animated canvas every frame. The
|
|
particle colors get the same treatment in js/flowfield.js. */
|
|
background-image:
|
|
radial-gradient(120% 100% at 50% 0%, rgba(14, 17, 34, 0.55) 0%, rgba(0, 0, 0, 0) 60%),
|
|
linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(13, 13, 27, 0.72) 100%);
|
|
}
|
|
|
|
/* CSS only on phones/tablets and for reduced motion: no canvas work. */
|
|
/* Keep this query in sync with js/flowfield.js. */
|
|
@media (max-width: 1024px), (pointer: coarse), (prefers-reduced-motion: reduce) {
|
|
body {
|
|
background:
|
|
radial-gradient(ellipse at 0% 0%, rgba(79, 195, 247, 0.18), transparent 55%),
|
|
radial-gradient(ellipse at 100% 65%, rgba(118, 75, 162, 0.22), transparent 60%),
|
|
linear-gradient(150deg, #0b1220, #100c1c);
|
|
}
|
|
|
|
.matrix-canvas,
|
|
.avatar .glitch-layer {
|
|
display: none;
|
|
}
|
|
|
|
.main-container .glass,
|
|
.avatar::after,
|
|
.homelab-background,
|
|
.homelab-background::after,
|
|
.homelab-title {
|
|
animation: none;
|
|
}
|
|
|
|
/* Avoid blur compositing work while scrolling. */
|
|
body .main-container :is(.glass, .content, .projects-section, .homelab-section, .btn) {
|
|
backdrop-filter: none;
|
|
-webkit-backdrop-filter: none;
|
|
}
|
|
}
|