RGBCube/Site
1
Fork 0
mirror of https://github.com/RGBCube/Site synced 2025-08-01 13:37:49 +00:00
Code Issues Activity Actions

Use rem instead of em

Browse source
This commit is contained in:
RGBCube 2024-02-24 15:54:13 +03:00
parent f3734c5515
commit cabead07d7
No known key found for this signature in database
3 changed files with 25 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

1
site/_includes/base.vto
View file

@ -156,6 +156,7 @@
text-decoration-line: none; text-decoration-line: none;
} }
</style> </style>
{{ content }} {{ content }}
</body> </body>
</html> </html>

30
site/_includes/cube.tsx
View file

@ -17,7 +17,7 @@ const Cube = (props: CubeProps) => (
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: ` __html: `
html { html {
font-size: min(9vw, 9vh, 4.5em); font-size: min(9vw, 9vh, 4.5rem);
overscroll-behavior: none; overscroll-behavior: none;
} }
@ -31,8 +31,8 @@ const Cube = (props: CubeProps) => (
width: min-content; width: min-content;
padding: 0 0.3em; padding: 0 0.3rem;
border-radius: 1em; border-radius: 1rem;
user-select: none; user-select: none;
} }
@ -44,7 +44,7 @@ const Cube = (props: CubeProps) => (
.scene { .scene {
height: 100dvh; height: 100dvh;
width: 100dvw; width: 100dvw;
perspective: 15em; perspective: 15rem;
display: flex; display: flex;
@ -53,18 +53,18 @@ const Cube = (props: CubeProps) => (
} }
.cube { .cube {
height: 5em; height: 5rem;
width: 5em; width: 5rem;
position: relative; position: relative;
transform: translateZ(-calc(2.5em - 1px)); transform: translateZ(-calc(2.5rem - 1px));
transform-style: preserve-3d; transform-style: preserve-3d;
} }
.face { .face {
width: 5em; width: 5rem;
height: 5em; height: 5rem;
display: flex; display: flex;
@ -75,28 +75,28 @@ const Cube = (props: CubeProps) => (
} }
.front { .front {
transform: rotateY(0deg) translateZ(calc(2.5em - 1px)); transform: rotateY(0deg) translateZ(calc(2.5rem - 1px));
} }
.top { .top {
/* Guess what? Yeah, you guessed right. Safari can't render shit. */ /* Guess what? Yeah, you guessed right. Safari can't render shit. */
transform: rotateX(89.99999999999999deg) translateZ(calc(2.5em - 1px)); transform: rotateX(89.99999999999999deg) translateZ(calc(2.5rem - 1px));
} }
.back { .back {
transform: rotateY(180deg) translateZ(calc(2.5em - 1px)); transform: rotateY(180deg) translateZ(calc(2.5rem - 1px));
} }
.bottom { .bottom {
transform: rotateX(-89.99999999999999deg) translateZ(calc(2.5em - 1px)); transform: rotateX(-89.99999999999999deg) translateZ(calc(2.5rem - 1px));
} }
.right { .right {
transform: rotateY(89.99999999999999deg) translateZ(calc(2.5em - 1px)); transform: rotateY(89.99999999999999deg) translateZ(calc(2.5rem - 1px));
} }
.left { .left {
transform: rotateY(-89.99999999999999deg) translateZ(calc(2.5em - 1px)); transform: rotateY(-89.99999999999999deg) translateZ(calc(2.5rem - 1px));
} }
`, `,
}} }}

18
site/_includes/text.vto
View file

@ -24,7 +24,7 @@ layout: base.vto
font-size: large; font-size: large;
display: initial; display: initial;
width: min(100vw - 2em, 50em); width: min(100vw - 2rem, 50rem);
} }
.rotated { .rotated {
@ -43,16 +43,16 @@ layout: base.vto
overflow-x: auto; overflow-x: auto;
background-color: white; background-color: white;
padding: 0.3em 0.6em; padding: 0.3rem 0.6rem;
/* Rotated 180deg so it's top instead of bottom. */ /* Rotated 180deg so it's top instead of bottom. */
border-top-left-radius: 1em; border-top-left-radius: 1rem;
border-top-right-radius: 1em; border-top-right-radius: 1rem;
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
nav { nav {
border: 0.15em solid black; border: 0.15rem solid black;
border-bottom-width: 0; border-bottom-width: 0;
} }
} }
@ -60,7 +60,7 @@ layout: base.vto
nav a { nav a {
color: black; color: black;
font-weight: bold; font-weight: bold;
margin-right: 0.6em; margin-right: 0.6rem;
} }
a { a {
@ -72,15 +72,15 @@ layout: base.vto
} }
footer { footer {
border-top: 0.15em solid var(--foreground); border-top: 0.15rem solid var(--foreground);
display: flex; display: flex;
justify-content: center; justify-content: center;
font-size: small; font-size: small;
margin-bottom: 1em; margin-bottom: 1rem;
padding-top: 0.5em; padding-top: 0.5rem;
} }
</style> </style>