refactor cube styles using @layer
This commit is contained in:
parent
732e5a3d47
commit
3ff1fb1aae
4 changed files with 764 additions and 735 deletions
979
style/base.css
979
style/base.css
File diff suppressed because it is too large
Load diff
286
style/cube.css
286
style/cube.css
|
|
@ -1,160 +1,148 @@
|
|||
@media (prefers-reduced-motion: no-preference) and
|
||||
(min-height: 650px) and (min-width: 650px) {
|
||||
|
||||
/* BACKGROUND STUFF */
|
||||
@layer outer {
|
||||
:root {
|
||||
--bg-60309: url(../media/bg/60309.png);
|
||||
--bg-kesi: url(../media/bg/kesi.png);
|
||||
--bg-korai: url(../media/bg/korai.png);
|
||||
--bg-mirai: url(../media/bg/mirai.png);
|
||||
--bg-niss: url(../media/bg/niss.png);
|
||||
--bg-niss2: url(../media/bg/niss2.png);
|
||||
--bg-nisse: url(../media/bg/nisse.png);
|
||||
--bg-prickly: url(../media/bg/prickly.png);
|
||||
--bg-qt: url(../media/bg/qt.png);
|
||||
--bg-qt2: url(../media/bg/qt2.png);
|
||||
|
||||
html {
|
||||
--bg-60309: url(../media/bg/60309.png);
|
||||
--bg-kesi: url(../media/bg/kesi.png);
|
||||
--bg-korai: url(../media/bg/korai.png);
|
||||
--bg-mirai: url(../media/bg/mirai.png);
|
||||
--bg-niss: url(../media/bg/niss.png);
|
||||
--bg-niss2: url(../media/bg/niss2.png);
|
||||
--bg-nisse: url(../media/bg/nisse.png);
|
||||
--bg-prickly: url(../media/bg/prickly.png);
|
||||
--bg-qt: url(../media/bg/qt.png);
|
||||
--bg-qt2: url(../media/bg/qt2.png);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--bg-60309: url(../media/bg/60309_neon.png);
|
||||
--bg-kesi: url(../media/bg/kesi_neon.png);
|
||||
--bg-korai: url(../media/bg/korai_neon.png);
|
||||
--bg-mirai: url(../media/bg/mirai_neon.png);
|
||||
--bg-niss: url(../media/bg/niss_neon.png);
|
||||
--bg-niss2: url(../media/bg/niss2_neon.png);
|
||||
--bg-nisse: url(../media/bg/nisse_neon.png);
|
||||
--bg-prickly: url(../media/bg/prickly_neon.png);
|
||||
--bg-qt: url(../media/bg/qt_neon.png);
|
||||
--bg-qt2: url(../media/bg/qt2_neon.png);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
--bg-60309: url(../media/bg/60309_neon.png);
|
||||
--bg-kesi: url(../media/bg/kesi_neon.png);
|
||||
--bg-korai: url(../media/bg/korai_neon.png);
|
||||
--bg-mirai: url(../media/bg/mirai_neon.png);
|
||||
--bg-niss: url(../media/bg/niss_neon.png);
|
||||
--bg-niss2: url(../media/bg/niss2_neon.png);
|
||||
--bg-nisse: url(../media/bg/nisse_neon.png);
|
||||
--bg-prickly: url(../media/bg/prickly_neon.png);
|
||||
--bg-qt: url(../media/bg/qt_neon.png);
|
||||
--bg-qt2: url(../media/bg/qt2_neon.png);
|
||||
background-blend-mode: overlay;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-blend-mode: soft-light;
|
||||
}
|
||||
|
||||
background:
|
||||
var(--bg-60309) bottom 29% right calc(44% - var(--half))
|
||||
/ auto 17% no-repeat,
|
||||
var(--bg-kesi) bottom 23% left calc(44% - var(--half))
|
||||
/ auto 20% no-repeat,
|
||||
var(--bg-korai) bottom left 7% / auto 19% no-repeat,
|
||||
var(--bg-mirai) top calc(5em + 3%) right 6% / 20% auto no-repeat,
|
||||
var(--bg-niss) top 30% left calc(31% - var(--half))
|
||||
/ auto 20% no-repeat,
|
||||
var(--bg-niss2) top 51% right calc(33% - var(--half))
|
||||
/ auto 20% no-repeat,
|
||||
var(--bg-nisse) top 29% right calc(36% - var(--half))
|
||||
/ auto 15% no-repeat,
|
||||
var(--bg-qt) bottom 41% left calc(24% - var(--half))
|
||||
/ auto 18% no-repeat,
|
||||
var(--bg-qt2) top 10% left calc(46% - var(--half))
|
||||
/ auto 16% no-repeat,
|
||||
var(--bg-prickly) bottom 9% right calc(28% - var(--half))
|
||||
/ auto 15% no-repeat,
|
||||
var(--base-background);
|
||||
|
||||
@media ((prefers-reduced-data: reduce),
|
||||
(prefers-reduced-transparency: reduce)) {
|
||||
background: var(--base-background);
|
||||
background-blend-mode: initial;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-rows: 5em 1fr;
|
||||
|
||||
perspective: 440vw;
|
||||
perspective-origin: 50% 120%;
|
||||
}
|
||||
|
||||
menu {
|
||||
label {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: ' ';
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
inset: 0 0 100% 0;
|
||||
background: hsl(var(--menu-bg-hsl));
|
||||
|
||||
@media not (prefers-reduced-motion: reduce) {
|
||||
transition: inset .15s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:checked + label::after {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
background:
|
||||
/*
|
||||
url(../media/bg/kesi_sprite_front.png) top 100px right no-repeat,
|
||||
url(../media/bg/kesi_sprite_mid.png) top 150px center repeat-x,
|
||||
url(../media/bg/kesi_sprite_back.png) top 200px left no-repeat,
|
||||
*/
|
||||
var(--bg-60309) bottom 29% right calc(44% - var(--half))
|
||||
/ auto 17% no-repeat,
|
||||
var(--bg-kesi) bottom 23% left calc(44% - var(--half))
|
||||
/ auto 20% no-repeat,
|
||||
var(--bg-korai) bottom left 7% / auto 19% no-repeat,
|
||||
var(--bg-mirai) top calc(5em + 3%) right 6% / 20% auto no-repeat,
|
||||
var(--bg-niss) top 30% left calc(31% - var(--half))
|
||||
/ auto 20% no-repeat,
|
||||
var(--bg-niss2) top 51% right calc(33% - var(--half))
|
||||
/ auto 20% no-repeat,
|
||||
var(--bg-nisse) top 29% right calc(36% - var(--half))
|
||||
/ auto 15% no-repeat,
|
||||
var(--bg-qt) bottom 41% left calc(24% - var(--half))
|
||||
/ auto 18% no-repeat,
|
||||
var(--bg-qt2) top 10% left calc(46% - var(--half))
|
||||
/ auto 16% no-repeat,
|
||||
var(--bg-prickly) bottom 9% right calc(28% - var(--half))
|
||||
/ auto 15% no-repeat,
|
||||
var(--base-background);
|
||||
background-blend-mode: overlay;
|
||||
}
|
||||
@layer cube {
|
||||
:root {
|
||||
--side: min(65vh, 70vw);
|
||||
--half: calc(var(--side) * .5);
|
||||
--nhalf: calc(0em - var(--half));
|
||||
--breathe: calc(var(--side) * 0.02);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
background-blend-mode: soft-light;
|
||||
#outer {
|
||||
--transform-origin: 50% 50% calc(var(--nhalf) - min(6vh, 6vw));
|
||||
}
|
||||
|
||||
#outer, #cube {
|
||||
transform-style: preserve-3d;
|
||||
transform-origin: var(--transform-origin);
|
||||
width: calc(var(--side) + 10vw);
|
||||
height: calc(var(--side) + 10vh);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#cube {
|
||||
position: relative;
|
||||
|
||||
> section {
|
||||
position: absolute;
|
||||
inset: 5vh 5vw;
|
||||
overflow: auto;
|
||||
transform-origin: var(--transform-origin);
|
||||
transform: var(--base-transform);
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
&:not([data-moving]) > section:not([data-state=active]) {
|
||||
animation: breathe 7.5s infinite ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes breathe {
|
||||
40% { transform: var(--base-transform) translateZ(var(--breathe)); }
|
||||
}
|
||||
|
||||
@media not (prefers-reduced-motion: reduce) {
|
||||
.zoom * { transition: all 0.25s ease-in; }
|
||||
.zoom > :hover {
|
||||
scale: 110%;
|
||||
filter: drop-shadow(4px 4px 5px rgb(0 0 0 / 60%));
|
||||
&:nth-child(5n) { rotate: 4deg; }
|
||||
&:nth-child(5n+1) { rotate: -2deg; }
|
||||
&:nth-child(5n+2) { rotate: 1deg; }
|
||||
&:nth-child(5n+3) { rotate: -3deg; }
|
||||
&:nth-child(10n+4) { rotate: 4deg; }
|
||||
&:nth-child(10n+9) { rotate: -1deg; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-data: reduce) {
|
||||
html {
|
||||
background: var(--base-background);
|
||||
background-blend-mode: unset;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* LAYOUT BASICS */
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-rows: 5em 1fr;
|
||||
|
||||
perspective: 440vw;
|
||||
perspective-origin: 50% 120%;
|
||||
}
|
||||
|
||||
/* MENU ANIMATION */
|
||||
|
||||
.menu label { position: relative; }
|
||||
.menu label::after {
|
||||
content: ' ';
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
inset: 0 0 100% 0;
|
||||
background: hsl(var(--menu-bg-hsl));
|
||||
transition: inset .15s linear;
|
||||
}
|
||||
.menu :checked + label::after {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/* CUBE ASSEMBLY */
|
||||
/* the rest is in cube.ts */
|
||||
|
||||
html {
|
||||
--side: min(65vh, 70vw);
|
||||
--half: calc(var(--side) * .5);
|
||||
--nhalf: calc(0em - var(--half));
|
||||
--breathe: calc(var(--side) * 0.02);
|
||||
}
|
||||
|
||||
#outer {
|
||||
--transform-origin: 50% 50% calc(var(--nhalf) - min(6vh, 6vw));
|
||||
}
|
||||
|
||||
#outer, #cube {
|
||||
transform-style: preserve-3d;
|
||||
transform-origin: var(--transform-origin);
|
||||
width: calc(var(--side) + 10vw);
|
||||
height: calc(var(--side) + 10vh);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#cube {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#cube > section {
|
||||
position: absolute;
|
||||
inset: 5vh 5vw;
|
||||
overflow: auto;
|
||||
transform-origin: var(--transform-origin);
|
||||
transform: var(--base-transform);
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
#cube:not([data-moving]) > section:not([data-state=active]) {
|
||||
animation: breathe 7.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes breathe {
|
||||
40% { transform: var(--base-transform) translateZ(var(--breathe)); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.zoom * { transition: all 0.25s ease-in; }
|
||||
.zoom > :hover {
|
||||
scale: 110%;
|
||||
filter: drop-shadow(4px 4px 5px rgb(0 0 0 / 60%));
|
||||
}
|
||||
.zoom > :hover:nth-child(5n) { rotate: 4deg; }
|
||||
.zoom > :hover:nth-child(5n+1) { rotate: -2deg; }
|
||||
.zoom > :hover:nth-child(5n+2) { rotate: 1deg; }
|
||||
.zoom > :hover:nth-child(5n+3) { rotate: -3deg; }
|
||||
.zoom > :hover:nth-child(10n+4) { rotate: 4deg; }
|
||||
.zoom > :hover:nth-child(10n+9) { rotate: -1deg; }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
190
style/flat.css
190
style/flat.css
|
|
@ -1,122 +1,120 @@
|
|||
@media (prefers-reduced-motion: reduce),
|
||||
(max-height: 649px), (max-width: 649px) {
|
||||
|
||||
html {
|
||||
:root {
|
||||
--side: 0px;
|
||||
--half: 0px;
|
||||
--nhalf: 0px;
|
||||
}
|
||||
|
||||
/* LAYOUT */
|
||||
@layer outer {
|
||||
body {
|
||||
display: grid;
|
||||
grid-template: "menu" 5em "body" 1fr;
|
||||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
grid-template: "menu" 5em "body" 1fr;
|
||||
/* height: 100vh; height: 100dvh; */
|
||||
/* width: 100vw; width: 100dvw; */
|
||||
}
|
||||
#face-menu { grid-area: menu; }
|
||||
|
||||
#face-menu { grid-area: menu; }
|
||||
#outer { grid-area: body; }
|
||||
#outer {
|
||||
grid-area: body;
|
||||
position: relative;
|
||||
height: 90%;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
|
||||
#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;
|
||||
&::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; }
|
||||
@layer cube {
|
||||
#cube, #cube > section {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
#cube > section { overflow: auto; }
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html { --shadow-hsl: 60deg 100% 96%; }
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@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) {
|
||||
#cube #hello {
|
||||
background-size: auto 80%, auto, auto;
|
||||
background-position: bottom right, 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 649px) {
|
||||
#cube #activities {
|
||||
background-size: auto 30%, auto, auto;
|
||||
background-position: bottom left 70%, center, 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#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 > :is(section[data-state=entering], #a) {
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#cube > :is(section[data-state=active], #a) {
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
transition: opacity 0.1s ease-in;
|
||||
}
|
||||
|
||||
#cube > :is(section[data-state=leaving], #a) {
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: opacity 0s 0.1s ease-in;
|
||||
}
|
||||
|
||||
#cube > :is(section[data-state=hidden], #a) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
44
style/properties.css
Normal file
44
style/properties.css
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
/* face backgrounds */
|
||||
|
||||
@property --hue {
|
||||
syntax: "<angle>";
|
||||
inherits: true;
|
||||
initial-value: 0deg;
|
||||
}
|
||||
|
||||
@property --bg-angle {
|
||||
syntax: "<angle>";
|
||||
inherits: true;
|
||||
initial-value: 45deg;
|
||||
}
|
||||
|
||||
|
||||
/* link buttons */
|
||||
|
||||
@property --icon {
|
||||
syntax: "<url>";
|
||||
inherits: true;
|
||||
initial-value: url(../media/favicon.webp);
|
||||
}
|
||||
|
||||
@property --fg {
|
||||
syntax: "<color>";
|
||||
inherits: true;
|
||||
initial-value: white;
|
||||
}
|
||||
|
||||
@property --bg {
|
||||
syntax: "<color>";
|
||||
inherits: true;
|
||||
initial-value: black;
|
||||
}
|
||||
|
||||
@property --icon-bg {
|
||||
syntax: "<color>";
|
||||
inherits: true;
|
||||
initial-value: white;
|
||||
}
|
||||
/* the initial value can't be `var(--bg)` because only "computationally
|
||||
* independent" values are allowed
|
||||
* https://drafts.css-houdini.org/css-properties-values-api/#initial-value-descriptor
|
||||
*/
|
||||
Loading…
Add table
Reference in a new issue