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;
}
</style>
{{ content }}
</body>
</html>

30
site/_includes/cube.tsx
View file

@ -17,7 +17,7 @@ const Cube = (props: CubeProps) => (
dangerouslySetInnerHTML={{
__html: `
html {
font-size: min(9vw, 9vh, 4.5em);
font-size: min(9vw, 9vh, 4.5rem);
overscroll-behavior: none;
}
@ -31,8 +31,8 @@ const Cube = (props: CubeProps) => (
width: min-content;
padding: 0 0.3em;
border-radius: 1em;
padding: 0 0.3rem;
border-radius: 1rem;
user-select: none;
}
@ -44,7 +44,7 @@ const Cube = (props: CubeProps) => (
.scene {
height: 100dvh;
width: 100dvw;
perspective: 15em;
perspective: 15rem;
display: flex;
@ -53,18 +53,18 @@ const Cube = (props: CubeProps) => (
}
.cube {
height: 5em;
width: 5em;
height: 5rem;
width: 5rem;
position: relative;
transform: translateZ(-calc(2.5em - 1px));
transform: translateZ(-calc(2.5rem - 1px));
transform-style: preserve-3d;
}
.face {
width: 5em;
height: 5em;
width: 5rem;
height: 5rem;
display: flex;
@ -75,28 +75,28 @@ const Cube = (props: CubeProps) => (
}
.front {
transform: rotateY(0deg) translateZ(calc(2.5em - 1px));
transform: rotateY(0deg) translateZ(calc(2.5rem - 1px));
}
.top {
/* 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 {
transform: rotateY(180deg) translateZ(calc(2.5em - 1px));
transform: rotateY(180deg) translateZ(calc(2.5rem - 1px));
}
.bottom {
transform: rotateX(-89.99999999999999deg) translateZ(calc(2.5em - 1px));
transform: rotateX(-89.99999999999999deg) translateZ(calc(2.5rem - 1px));
}
.right {
transform: rotateY(89.99999999999999deg) translateZ(calc(2.5em - 1px));
transform: rotateY(89.99999999999999deg) translateZ(calc(2.5rem - 1px));
}
.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;
display: initial;
width: min(100vw - 2em, 50em);
width: min(100vw - 2rem, 50rem);
}
.rotated {
@ -43,16 +43,16 @@ layout: base.vto
overflow-x: auto;
background-color: white;
padding: 0.3em 0.6em;
padding: 0.3rem 0.6rem;
/* Rotated 180deg so it's top instead of bottom. */
border-top-left-radius: 1em;
border-top-right-radius: 1em;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
@media (prefers-color-scheme: light) {
nav {
border: 0.15em solid black;
border: 0.15rem solid black;
border-bottom-width: 0;
}
}
@ -60,7 +60,7 @@ layout: base.vto
nav a {
color: black;
font-weight: bold;
margin-right: 0.6em;
margin-right: 0.6rem;
}
a {
@ -72,15 +72,15 @@ layout: base.vto
}
footer {
border-top: 0.15em solid var(--foreground);
border-top: 0.15rem solid var(--foreground);
display: flex;
justify-content: center;
font-size: small;
margin-bottom: 1em;
padding-top: 0.5em;
margin-bottom: 1rem;
padding-top: 0.5rem;
}
</style>