122 lines
2.3 KiB
CSS
122 lines
2.3 KiB
CSS
@media (prefers-reduced-motion: reduce),
|
|
(max-height: 649px), (max-width: 649px) {
|
|
|
|
:root {
|
|
--side: 0px;
|
|
--half: 0px;
|
|
--nhalf: 0px;
|
|
}
|
|
|
|
@layer outer {
|
|
body {
|
|
display: grid;
|
|
grid-template: "menu" 5em "body" 1fr;
|
|
}
|
|
|
|
#face-menu { grid-area: menu; }
|
|
|
|
#outer {
|
|
grid-area: body;
|
|
position: relative;
|
|
height: 90%;
|
|
width: 90%;
|
|
margin: auto;
|
|
|
|
&::after {
|
|
content: ' ';
|
|
position: absolute;
|
|
inset: 0;
|
|
box-shadow: 0 0 40px hsl(var(--shadow-hsl) / 40%);
|
|
mix-blend-mode: multiply;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* not really a cube any more. but */
|
|
@layer cube {
|
|
#cube, #cube > section {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
#cube > section { overflow: auto; }
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html { --shadow-hsl: 60deg 100% 96%; }
|
|
}
|
|
}
|
|
|
|
/* BACKGROUND FIXES */
|
|
|
|
@layer faces {
|
|
@layer hello {
|
|
#hello {
|
|
@media (max-width: 649px) {
|
|
background-size: auto 80%, auto, auto;
|
|
background-position: bottom -20% right 60%, center, center;
|
|
}
|
|
|
|
@media (max-height: 649px) {
|
|
background-size: auto 80%, auto, auto;
|
|
background-position: bottom right, center, center;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer activities {
|
|
#activities {
|
|
@media (max-width: 649px) {
|
|
background-size: auto 30%, auto, auto;
|
|
background-position: bottom left 70%, center, center;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer six {
|
|
#six {
|
|
background-position: bottom left 70%, center, center;
|
|
|
|
@media (max-width: 649px) {
|
|
background-size: auto 100%, auto, auto;
|
|
background-position: bottom left 70%, center, center;
|
|
}
|
|
|
|
@media (max-height: 649px) {
|
|
background-size: cover;
|
|
background-position: top 15% center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@layer cube {
|
|
#face-menu {
|
|
label { transition: background 0.1s ease-in; }
|
|
:checked + label { background: hsl(var(--menu-bg-hsl)); }
|
|
}
|
|
|
|
#cube > section {
|
|
&[data-state=entering] {
|
|
z-index: 1;
|
|
opacity: 0;
|
|
}
|
|
|
|
&[data-state=active] {
|
|
z-index: 1;
|
|
opacity: 1;
|
|
transition: opacity 0.1s ease-in;
|
|
}
|
|
|
|
&[data-state=leaving] {
|
|
z-index: -1;
|
|
opacity: 0;
|
|
transition: opacity 0s 0.1s ease-in;
|
|
}
|
|
|
|
&[data-state=hidden] {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
} /* (the media query) */
|