mirror of
https://github.com/RGBCube/rgbcube.github.io
synced 2025-05-31 05:08:12 +00:00
cd8a891bd7
Yes, it's true. Safari can't render a webpage properly without hacks unless it is a plain fucking HTML page without any CSS whatsoever. Apple, just switch to Chromium or Gecko already. Abandon Safari like how Microsoft did with Blink.
112 lines
No EOL
1.6 KiB
CSS
112 lines
No EOL
1.6 KiB
CSS
@font-face {
|
|
font-family: "Bai Jamjuree";
|
|
font-weight: 700;
|
|
src: url(BaiJamjuree700.woff2) format(woff2);
|
|
}
|
|
|
|
body,
|
|
html {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
html {
|
|
background-color: #000000;
|
|
font-family: "Bai Jamjuree", sans;
|
|
font-size: 450%;
|
|
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
@media screen and (max-width: 400px) {
|
|
html {
|
|
font-size: 200%;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 800px) and (min-width: 400px) {
|
|
html {
|
|
font-size: 300%;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: #000000;
|
|
text-decoration-line: none;
|
|
}
|
|
|
|
.frame {
|
|
background-color: #FFFFFF;
|
|
|
|
width: min-content;
|
|
|
|
padding: 0 .3em;
|
|
border-radius: 1em;
|
|
|
|
user-select: none;
|
|
}
|
|
|
|
.frame:hover {
|
|
background-color: #FFFF00;
|
|
}
|
|
|
|
.scene {
|
|
height: 100%;
|
|
width: 100%;
|
|
perspective: 15em;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.cube {
|
|
height: 5em;
|
|
width: 5em;
|
|
|
|
position: relative;
|
|
|
|
transform: translateZ(-2.498em);
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.face {
|
|
background-size: cover;
|
|
background-position: center;
|
|
|
|
width: 5em;
|
|
height: 5em;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
position: absolute;
|
|
}
|
|
|
|
.front {
|
|
transform: rotateY(0deg) translateZ(2.498em);
|
|
}
|
|
|
|
.top {
|
|
/* Guess what? Yeah, you guessed right. Safari can't render shit. */
|
|
transform: rotateX(89.99999999999999deg) translateZ(2.498em);
|
|
}
|
|
|
|
.back {
|
|
transform: rotateY(180deg) translateZ(2.498em);
|
|
}
|
|
|
|
.bottom {
|
|
transform: rotateX(-89.99999999999999deg) translateZ(2.498em);
|
|
}
|
|
|
|
.right {
|
|
transform: rotateY(89.99999999999999deg) translateZ(2.498em);
|
|
}
|
|
|
|
.left {
|
|
transform: rotateY(-89.99999999999999deg) translateZ(2.498em);
|
|
} |