Amirhossein Khalili
b3cfcfe057
Remove skeleton swaps and deferred layout estimates, restore reveal state, and use native proximity scrolling for project cards. Also make the Docker build npm registry configurable.
101 lines
1.6 KiB
CSS
101 lines
1.6 KiB
CSS
.heroScene,
|
|
.aboutScene {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
background: var(--bg-page);
|
|
}
|
|
|
|
.heroScene,
|
|
.aboutScene {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.heroScene {
|
|
z-index: 0;
|
|
background:
|
|
linear-gradient(to bottom, #c7edfb 0%, #dff5fc 47%, #f8faff 82%, var(--bg-page) 100%);
|
|
}
|
|
|
|
.heroScene::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to bottom, transparent 82%, var(--bg-page) 100%);
|
|
}
|
|
|
|
:global([data-theme="dark"]) .heroScene {
|
|
background:
|
|
linear-gradient(to bottom, #071936 0%, #06142f 50%, #020e28 82%, var(--bg-page) 100%);
|
|
}
|
|
|
|
.heroScene canvas,
|
|
.aboutScene canvas {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.aboutScene canvas {
|
|
opacity: 0.62;
|
|
}
|
|
|
|
.aboutScene {
|
|
z-index: 0;
|
|
}
|
|
|
|
.aboutSceneBoundary {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.aboutScene::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to bottom, var(--bg-page), transparent 12%, transparent 88%, var(--bg-page));
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.heroScene::after {
|
|
opacity: 0.62;
|
|
}
|
|
|
|
.aboutScene {
|
|
bottom: auto;
|
|
height: 40rem;
|
|
}
|
|
|
|
.aboutSceneBoundary {
|
|
bottom: auto;
|
|
height: 40rem;
|
|
}
|
|
|
|
.aboutScene canvas {
|
|
opacity: 0.56;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1441px) {
|
|
.aboutSceneBoundary {
|
|
overflow: visible;
|
|
}
|
|
|
|
.aboutScene {
|
|
overflow: visible;
|
|
left: 50%;
|
|
right: auto;
|
|
transform: translateX(-50%);
|
|
width: 100vw;
|
|
}
|
|
|
|
.aboutScene::after {
|
|
left: 50%;
|
|
right: auto;
|
|
transform: translateX(-50%);
|
|
width: 100vw;
|
|
}
|
|
}
|