109 lines
2 KiB
CSS
109 lines
2 KiB
CSS
|
@media (prefers-reduced-motion: reduce),
|
||
|
|
(max-height: 649px), (max-width: 649px) {
|
||
|
|
|
||
|
|
/* LAYOUT */
|
||
|
|
|
||
|
|
body {
|
||
|
|
display: grid;
|
||
|
|
grid-template: "menu" 5em "body" 1fr;
|
||
|
|
/* height: 100vh; height: 100dvh; */
|
||
|
|
/* width: 100vw; width: 100dvw; */
|
||
|
|
}
|
||
|
|
|
||
|
|
#face-menu { grid-area: menu; }
|
||
|
|
#outer { grid-area: body; }
|
||
|
|
|
||
|
|
#outer {
|
||
|
|
position: relative;
|
||
|
|
height: 90%;
|
||
|
|
width: 90%;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
#outer::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 */
|
||
|
|
#cube, #cube > section {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
}
|
||
|
|
#cube > section { overflow: auto; }
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
html { --shadow-hsl: 60deg 100% 96%; }
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* BACKGROUND FIXES */
|
||
|
|
|
||
|
|
@media (max-width: 649px) {
|
||
|
|
#cube #hello {
|
||
|
|
background-size: auto 80%, auto, auto;
|
||
|
|
background-position: bottom -20% right 60%, center, center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-height: 649px) {
|
||
|
|
#cube #hello {
|
||
|
|
background-size: auto 80%, auto, auto;
|
||
|
|
background-position: bottom right, center, center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@media (max-width: 649px) {
|
||
|
|
#cube #activities {
|
||
|
|
background-size: auto 30%, auto, auto;
|
||
|
|
background-position: bottom left 70%, center, center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#cube #six {
|
||
|
|
background-position: bottom left 70%, center, center;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 649px) {
|
||
|
|
#cube #six {
|
||
|
|
background-size: auto 100%, auto, auto;
|
||
|
|
background-position: bottom left 70%, center, center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-height: 649px) {
|
||
|
|
#cube #six {
|
||
|
|
background-size: cover;
|
||
|
|
background-position: top 15% center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* TRANSITIONS */
|
||
|
|
|
||
|
|
#face-menu :checked + label {
|
||
|
|
background: hsl(var(--menu-bg-hsl));
|
||
|
|
}
|
||
|
|
#face-menu label {
|
||
|
|
transition: background 0.1s ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
#cube > section[data-selected=true] {
|
||
|
|
z-index: 1;
|
||
|
|
opacity: 1;
|
||
|
|
transition: opacity 0.1s ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
#cube > section[data-selected=false] {
|
||
|
|
z-index: -1;
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 0s 0.1s ease-in;
|
||
|
|
}
|
||
|
|
/* todo make sure this works ok with screen readers */
|
||
|
|
|
||
|
|
}
|