You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

240 lines
4.9 KiB
SCSS

2 years ago
:root {
--scenePerspective: 1;
--scenePerspectiveOriginX: 50;
--scenePerspectiveOriginY: 0;
--itemZ: 2;
--cameraSpeed: 20; // Where 1 is the fastest
--cameraZ: 0;
--viewportHeight: 105;
}
$n : 1000;
.viewport {
height: calc(var(--viewportHeight) * 1px);
.scene3D-container {
z-index: 1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
perspective: calc(var(--scenePerspective) * var(--cameraSpeed) * 1px);
perspective-origin: calc(var(--scenePerspectiveOriginX) * 1%) calc(var(--scenePerspectiveOriginY) * 1%);
will-change: perspective-origin;
transform: translate3d(0, 0, 0); //Allow Hardware-Accelerated CSS
.scene3D {
position: absolute;
top: 0;
height: 100vh;
width: 100%;
transform-style: preserve-3d;
transform: translateZ(calc(var(--cameraZ) * 1px));
will-change: transform;
// transform: rotateX(20deg);
>div {
position: absolute;
display: block;
width: 70%;
top: 100%;
&:nth-child(2n) {
left: 80%;
bottom: 10%;
}
&:nth-child(2n + 1) {
right: 80%;
bottom: 10%
}
@for $i from 0 through $n {
&:nth-child(#{$i}) {
transform: translate3D(random(200) * .1%, random(300) * 1%, calc(var(--itemZ) * var(--cameraSpeed) * #{$i} * -.5px));
// transform: translate3D(15.4%, 250%s, calc(var(--itemZ) * var(--cameraSpeed) * 1 * -.5px));
}
}
}
}
// >div {
// position: absolute;
// display: block;
// width: 100%;
// top: 70%;
// @media only screen and (min-width: 600px) {
// width: 100%;
// }
// @media only screen and (max-width: 600px) {
// width: 100%;
// }
// &:nth-child(2n) {
// left: 0;
// }
// &:nth-child(2n + 1) {
// right: 0;
// }
// @for $i from 0 through $n {
// &:nth-child(#{$i}) {
// transform: translate3D(random(50) - 25 * 1%, random(100) - 50 * 1%, calc(var(--itemZ) * var(--cameraSpeed) * #{$i} * -1px));
// }
// }
// @media only screen and (max-width: 600px) {
// @for $i from 0 through 20 {
// &:nth-child(#{$i}) {
// transform: translate3D(1%, -80%, calc(var(--itemZ) * var(--cameraSpeed) * #{$i} * -1px));
// }
// }
// }
// }
// }
}
}
// ----------
// Styling
// ----------
@font-face {
font-family: "Cotham";
src: url("/assets/fonts/CothamSans.otf");
}
$main: #0f0;
$second: #ffffff;
$third: #000;
$reg: 5vw;
$tit: 6vw;
$regRes: 7vw;
$titRes: 9vw;
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Cotham";
background-color: $second;
background-color: rgba(0, 0, 0, 0.17);
background-color: black;
color: hsl(231, 15%, 18%);
padding: 0;
margin: 0;
}
#loading {
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
#text {
position: fixed;
z-index: 100;
left: 0;
bottom: 0;
width: 150%;
display: flex;
}
.marquee {
font-size: 40px;
font-family: sans-serif;
color: #0f0;
white-space: nowrap;
animation: marquee 50s infinite linear;
}
@keyframes marquee {
0% {
transform: translateX(0)
}
100% {
transform: translateX(-50%)
}
}
span {
position: relative;
color: black;
color: #0f0;
font-family: 'Courier New', Courier, monospace;
font-size: 20px;
// white-space: nowrap;
}
.scene3D {
@media only screen and (min-width: 600px) {
h1 {
font-size: $titRes;
}
p {
font-size: $regRes;
}
img {
width: 230vw;
}
}
>div {
padding: 5vw;
// background-color: $second;
// border: solid $main .3vw;
h1 {
font-size: $tit;
}
p,
a,
li {
font-size: $reg;
}
img {
width: 150vw;
}
a {
text-decoration: underline;
color: $second;
font-size: $reg;
}
a:hover {
text-decoration: none;
// filter: invert(100%);
}
}
}