refactor cube styles using @layer
This commit is contained in:
parent
732e5a3d47
commit
3ff1fb1aae
4 changed files with 764 additions and 735 deletions
471
style/base.css
471
style/base.css
|
|
@ -1,23 +1,33 @@
|
||||||
@import url(../fonts/muller/muller.css);
|
@layer outer, face-menu, cube, face-base, faces;
|
||||||
|
|
||||||
|
@import url(../fonts/muller/muller.css) layer(outer);
|
||||||
|
@import url(properties.css);
|
||||||
|
|
||||||
|
/*
|
||||||
|
@import url(../fonts/muller/muller.css) layer(outer)
|
||||||
|
(not (prefers-reduced-data: reduce));
|
||||||
|
|
||||||
|
if a browser doesn't understand the media query it DOESN'T do
|
||||||
|
the import. so this doesn't work until prefers-reduced-data
|
||||||
|
actually exists
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
/* OUTER */
|
@layer outer {
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
* { box-sizing: border-box; }
|
:root, body {
|
||||||
|
|
||||||
html, body {
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
min-height: 100lvh;
|
min-height: 100lvh;
|
||||||
|
margin: 0;
|
||||||
scrollbar-gutter: stable;
|
scrollbar-gutter: stable;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
:root {
|
||||||
font-size: large;
|
font-size: large;
|
||||||
font-family: Muller, sans-serif;
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
color: black;
|
color: black;
|
||||||
|
|
||||||
--gradient:
|
--gradient:
|
||||||
linear-gradient(120deg in oklch,
|
linear-gradient(120deg in oklch,
|
||||||
oklch(93% 27.1% 96deg),
|
oklch(93% 27.1% 96deg),
|
||||||
|
|
@ -25,24 +35,10 @@ html {
|
||||||
oklch(80% 29.3% 303deg),
|
oklch(80% 29.3% 303deg),
|
||||||
oklch(84% 23% 233deg),
|
oklch(84% 23% 233deg),
|
||||||
oklch(89% 25% 161deg));
|
oklch(89% 25% 161deg));
|
||||||
--shadow-hsl: 330deg 40% 40%;
|
|
||||||
--base-background: var(--gradient) fixed;
|
|
||||||
background: var(--base-background);
|
|
||||||
|
|
||||||
--menu-bg-hsl: 60deg 100% 96%;
|
--menu-bg-hsl: 60deg 100% 96%;
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-data: reduce) {
|
@media (prefers-color-scheme: dark) {
|
||||||
html {
|
color: #ffd;
|
||||||
font-family: sans-serif;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html, body { margin: 0; }
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
html {
|
|
||||||
--gradient:
|
--gradient:
|
||||||
linear-gradient(20deg,
|
linear-gradient(20deg,
|
||||||
hsl(300deg 30% 20%),
|
hsl(300deg 30% 20%),
|
||||||
|
|
@ -51,23 +47,30 @@ html, body { margin: 0; }
|
||||||
hsl(30deg 30% 20%),
|
hsl(30deg 30% 20%),
|
||||||
hsl(350deg 30% 20%));
|
hsl(350deg 30% 20%));
|
||||||
--menu-bg-hsl: 260deg 100% 8%;
|
--menu-bg-hsl: 260deg 100% 8%;
|
||||||
color: #ffd;
|
}
|
||||||
|
|
||||||
|
--shadow-hsl: 330deg 40% 40%;
|
||||||
|
--base-background: var(--gradient) fixed;
|
||||||
|
background: var(--base-background);
|
||||||
|
|
||||||
|
font-family: Muller, sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
@media (prefers-reduced-data: reduce) {
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* TOP MENU */
|
@layer face-menu {
|
||||||
|
#face-menu {
|
||||||
#face-menu {
|
|
||||||
align-self: center;
|
align-self: center;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
|
||||||
|
|
||||||
.menu input, .menu label {
|
font-size: 125%;
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
menu {
|
||||||
display: flex;
|
display: flex;
|
||||||
place-content: center;
|
place-content: center;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
|
|
@ -77,38 +80,41 @@ html, body { margin: 0; }
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
font-size: 125%;
|
|
||||||
|
|
||||||
background: hsl(var(--menu-bg-hsl) / 65%);
|
background: hsl(var(--menu-bg-hsl) / 65%);
|
||||||
border: 2px solid hsl(var(--menu-bg-hsl));
|
border: 2px solid hsl(var(--menu-bg-hsl));
|
||||||
box-shadow: 0 0 10px 5px hsl(var(--menu-bg-hsl) / 30%);
|
box-shadow: 0 0 10px 5px hsl(var(--menu-bg-hsl) / 30%);
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-transparency: reduce) {
|
@media (prefers-reduced-transparency: reduce) {
|
||||||
background: hsl(var(--menu-bg-hsl));
|
background: hsl(var(--menu-bg-hsl));
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.hide-boxes input {
|
input, label { cursor: pointer; }
|
||||||
|
|
||||||
|
input {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
width: 0;
|
width: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.menu li {
|
|
||||||
display: flex;
|
label {
|
||||||
list-style: none;
|
|
||||||
flex: 1 0 4em;
|
|
||||||
}
|
|
||||||
.menu label {
|
|
||||||
padding: .25em 1.25em;
|
padding: .25em 1.25em;
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
flex: 1 0 4em;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* BASE FACE STYLES */
|
@layer face-base {
|
||||||
|
#cube > section {
|
||||||
#cube > section {
|
|
||||||
--base-background:
|
--base-background:
|
||||||
repeating-linear-gradient(var(--bg-angle),
|
repeating-linear-gradient(var(--bg-angle),
|
||||||
transparent, transparent 0.8em,
|
transparent, transparent 0.8em,
|
||||||
|
|
@ -131,42 +137,7 @@ html, body { margin: 0; }
|
||||||
-1px -1px 1px var(--text-shadow-color),
|
-1px -1px 1px var(--text-shadow-color),
|
||||||
1px -1px 1px var(--text-shadow-color);
|
1px -1px 1px var(--text-shadow-color);
|
||||||
|
|
||||||
scrollbar-color:
|
@media (prefers-color-scheme: dark) {
|
||||||
hsl(calc(var(--hue) + 180deg) 90% 60%)
|
|
||||||
hsl(var(--hue) 50% 95%);
|
|
||||||
}
|
|
||||||
|
|
||||||
#cube a {
|
|
||||||
color: hsl(calc(var(--hue) + 180deg) 90% 20%);
|
|
||||||
font-weight: 600;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
#cube a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
text-decoration-style: dotted;
|
|
||||||
text-decoration-color: currentcolor;
|
|
||||||
text-decoration-thickness: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 { margin-top: 0; }
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 + section h3 { margin-top: 0; }
|
|
||||||
|
|
||||||
strong { font-weight: 700; }
|
|
||||||
|
|
||||||
#cube section ::selection {
|
|
||||||
color: white;
|
|
||||||
background: hsl(calc(var(--hue) + 180deg), 50%, 30%);
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
#cube > section {
|
|
||||||
--base-background:
|
--base-background:
|
||||||
repeating-linear-gradient(var(--bg-angle),
|
repeating-linear-gradient(var(--bg-angle),
|
||||||
transparent, transparent 0.8em,
|
transparent, transparent 0.8em,
|
||||||
|
|
@ -182,126 +153,169 @@ strong { font-weight: 700; }
|
||||||
--text-shadow-color: black;
|
--text-shadow-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
scrollbar-color:
|
||||||
|
hsl(calc(var(--hue) + 180deg) 90% 60%)
|
||||||
|
hsl(var(--hue) 50% 95%);
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
color: white;
|
||||||
|
background: hsl(calc(var(--hue) + 180deg), 50%, 30%);
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#cube a {
|
#cube a {
|
||||||
|
color: hsl(calc(var(--hue) + 180deg) 90% 20%);
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-style: dotted;
|
||||||
|
text-decoration-color: currentcolor;
|
||||||
|
text-decoration-thickness: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
color: hsl(calc(var(--hue) + 180deg) 100% 85%);
|
color: hsl(calc(var(--hue) + 180deg) 100% 85%);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 { margin-top: 0; }
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 + section h3 { margin-top: 0; }
|
||||||
|
|
||||||
|
strong { font-weight: 700; }
|
||||||
|
|
||||||
|
.artcredit {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 1em;
|
||||||
|
font-size: smaller;
|
||||||
|
font-style: italic;
|
||||||
|
background: hsl(var(--menu-bg-hsl) / 75%);
|
||||||
|
padding: .1em .5em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@layer faces.hello {
|
||||||
/* SPECIFIC FACE STYLES */
|
#hello {
|
||||||
|
|
||||||
/* the separate "#whatever ::selection" selector is because in
|
|
||||||
* chrome, ::selection doesn't inherit variables */
|
|
||||||
#hello, #hello ::selection {
|
|
||||||
--hue: 310deg;
|
--hue: 310deg;
|
||||||
--bg-angle: 135deg;
|
--bg-angle: 135deg;
|
||||||
}
|
|
||||||
|
|
||||||
/* this one makes more sense to show if there is a paint before
|
/* this one makes more sense to show if there is a paint before
|
||||||
* the script runs */
|
* the script runs */
|
||||||
#hello {
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
|
||||||
|
|
||||||
/* extra #cube selector for specificity */
|
/* the quick linx */
|
||||||
#cube #hello {
|
h3 { text-align: left; }
|
||||||
|
|
||||||
|
ul { padding-left: 0; }
|
||||||
|
li { list-style: none; }
|
||||||
|
|
||||||
--bg-image: url(../media/wave.webp);
|
--bg-image: url(../media/wave.webp);
|
||||||
background:
|
background:
|
||||||
var(--bg-image) bottom right / auto 60% no-repeat,
|
var(--bg-image) bottom right / auto 60% no-repeat,
|
||||||
var(--base-background);
|
var(--base-background);
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
--bg-image: url(../media/wave-neon.webp);
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-data: reduce) {
|
||||||
|
--bg-image: url(../media/wave.l.webp);
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
|
||||||
|
--bg-image: url(../media/wave-neon.l.webp);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@layer faces.id {
|
||||||
#cube #hello { --bg-image: url(../media/wave-neon.webp); }
|
#id {
|
||||||
}
|
|
||||||
@media (prefers-reduced-data: reduce) {
|
|
||||||
#cube #hello { --bg-image: url(../media/wave.l.webp); }
|
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
|
|
||||||
#cube #hello { --bg-image: url(../media/wave-neon.l.webp); }
|
|
||||||
}
|
|
||||||
|
|
||||||
#id, #id ::selection, #flags img {
|
|
||||||
--hue: 10deg;
|
--hue: 10deg;
|
||||||
--bg-angle: 45deg;
|
--bg-angle: 45deg;
|
||||||
}
|
|
||||||
|
|
||||||
#id dl {
|
dl {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: min-content auto;
|
grid-template-columns: min-content auto;
|
||||||
gap: 0 2em;
|
gap: 0 2em;
|
||||||
}
|
}
|
||||||
#id dt { font-weight: 600; }
|
dt { font-weight: 600; }
|
||||||
#id dd {
|
dd {
|
||||||
margin: 0 0 0 1em;
|
margin: 0 0 0 1em;
|
||||||
display: list-item;
|
display: list-item;
|
||||||
list-style: '❧ ';
|
list-style: '❧ ';
|
||||||
grid-column: 2 / 3;
|
grid-column: 2 / 3;
|
||||||
}
|
a { font-weight: 700; }
|
||||||
#id dd a { font-weight: 700; }
|
}
|
||||||
#id dt, #id dt + dd {
|
dt, dt + dd { margin-top: 1em; }
|
||||||
margin-top: 1em;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#flags {
|
#flags {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: wrap;
|
flex-flow: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
margin-top: 3em;
|
margin-top: 3em;
|
||||||
}
|
|
||||||
|
|
||||||
#flags img {
|
img {
|
||||||
height: 2em;
|
height: 2em;
|
||||||
border: 2px solid hsl(var(--hue) 30% 5% / 60%);
|
border: 2px solid hsl(var(--hue) 30% 5% / 60%);
|
||||||
rotate: 8deg;
|
rotate: 8deg;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@layer faces.activities {
|
||||||
#activities, #activities ::selection {
|
#activities {
|
||||||
--hue: 60deg;
|
--hue: 60deg;
|
||||||
--bg-angle: -60deg;
|
--bg-angle: -60deg;
|
||||||
}
|
|
||||||
|
|
||||||
#cube #activities {
|
|
||||||
/* height of quobl.webp is 58% of width */
|
/* height of quobl.webp is 58% of width */
|
||||||
--bg-image: url(../media/quobl.webp);
|
--bg-image: url(../media/quobl.webp);
|
||||||
background:
|
background:
|
||||||
var(--bg-image) bottom left 2ex / 50% auto no-repeat local,
|
var(--bg-image) bottom left 2ex / 50% auto no-repeat local,
|
||||||
var(--base-background);
|
var(--base-background);
|
||||||
padding-bottom: 29%;
|
padding-bottom: 29%;
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
--bg-image: url(../media/quobl-neon.webp);
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-data: reduce) {
|
||||||
|
--bg-image: url(../media/quobl.l.webp);
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
|
||||||
|
--bg-image: url(../media/quobl-neon.webp);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
#cube #activities { --bg-image: url(../media/quobl-neon.webp); }
|
|
||||||
}
|
|
||||||
@media (prefers-reduced-data: reduce) {
|
|
||||||
#cube #activities { --bg-image: url(../media/quobl.l.webp); }
|
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
|
|
||||||
#cube #activities { --bg-image: url(../media/quobl-neon.webp); }
|
|
||||||
}
|
|
||||||
|
|
||||||
#links, #links ::selection {
|
@layer faces.links {
|
||||||
|
#links {
|
||||||
--hue: 130deg;
|
--hue: 130deg;
|
||||||
--bg-angle: 210deg;
|
--bg-angle: 210deg;
|
||||||
}
|
|
||||||
|
|
||||||
#links ul {
|
ul {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
}
|
}
|
||||||
#links li {
|
li {
|
||||||
flex: 1 0 10em;
|
flex: 1 0 10em;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
--icon-bg: var(--fg);
|
--icon-bg: var(--fg);
|
||||||
}
|
}
|
||||||
|
|
||||||
#links a {
|
a {
|
||||||
height: 3em;
|
height: 3em;
|
||||||
padding-left: calc(3em + 1ex);
|
padding-left: calc(3em + 1ex);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -315,140 +329,131 @@ strong { font-weight: 700; }
|
||||||
|
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
&:hover { text-decoration: none; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#links a:hover { text-decoration: none; }
|
#gallery {
|
||||||
|
|
||||||
#links #gallery {
|
|
||||||
--icon: url(../media/favicon.webp);
|
--icon: url(../media/favicon.webp);
|
||||||
--fg: hsl(280deg 38% 43%);
|
--fg: hsl(280deg 38% 43%);
|
||||||
--bg: hsl(100deg 99% 81%);
|
--bg: hsl(100deg 99% 81%);
|
||||||
image-rendering: pixelated;
|
image-rendering: pixelated;
|
||||||
}
|
}
|
||||||
|
|
||||||
#links #code {
|
#code {
|
||||||
--icon: url(../media/icons/forgejo.svg);
|
--icon: url(../media/icons/forgejo.svg);
|
||||||
--fg: white;
|
--fg: white;
|
||||||
--icon-bg: #171e26;
|
--icon-bg: #171e26;
|
||||||
--bg: #c2410c;
|
--bg: #c2410c;
|
||||||
}
|
}
|
||||||
|
|
||||||
#links #blog {
|
#blog {
|
||||||
--icon: url(../media/icons/blog.webp);
|
--icon: url(../media/icons/blog.webp);
|
||||||
--fg: #ffeebb;
|
--fg: #ffeebb;
|
||||||
--bg: #332255;
|
--bg: #332255;
|
||||||
/* image-rendering: pixelated; */
|
/* image-rendering: pixelated; */
|
||||||
}
|
a {
|
||||||
#links #blog a {
|
|
||||||
background-position: center, left calc(1.5em - 51px) center, center;
|
background-position: center, left calc(1.5em - 51px) center, center;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#links #itaku {
|
#itaku {
|
||||||
--icon: url(../media/icons/itaku.svg);
|
--icon: url(../media/icons/itaku.svg);
|
||||||
--fg: #ffeb3b;
|
--fg: #ffeb3b;
|
||||||
--bg: #303030;
|
--bg: #303030;
|
||||||
}
|
}
|
||||||
|
|
||||||
#links #weasyl {
|
#weasyl {
|
||||||
--icon: url(../media/icons/weasyl.svg);
|
--icon: url(../media/icons/weasyl.svg);
|
||||||
--fg: white;
|
--fg: white;
|
||||||
--bg: #970000;
|
--bg: #970000;
|
||||||
}
|
}
|
||||||
|
|
||||||
#links #fa {
|
#fa {
|
||||||
--icon: url(../media/icons/furaffinity.webp);
|
--icon: url(../media/icons/furaffinity.webp);
|
||||||
--icon-bg: #20242a;
|
--icon-bg: #20242a;
|
||||||
--bg: #353b45;
|
--bg: #353b45;
|
||||||
--fg: white;
|
--fg: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
#links #da {
|
#da {
|
||||||
--icon: url(../media/icons/deviantart.webp);
|
--icon: url(../media/icons/deviantart.webp);
|
||||||
--icon-bg: #000608;
|
--icon-bg: #000608;
|
||||||
--bg: #314537;
|
--bg: #314537;
|
||||||
--fg: #e7ede4;
|
--fg: #e7ede4;
|
||||||
}
|
}
|
||||||
|
|
||||||
#links #kofi {
|
#kofi {
|
||||||
--icon: url(../media/icons/ko-fi.webp);
|
--icon: url(../media/icons/ko-fi.webp);
|
||||||
--icon-bg: #def3ff;
|
--icon-bg: #def3ff;
|
||||||
--bg: white;
|
--bg: white;
|
||||||
--fg: #ff5966;
|
--fg: #ff5966;
|
||||||
}
|
}
|
||||||
|
|
||||||
#links #artfight {
|
#artfight {
|
||||||
--icon: url(../media/icons/artfight.webp);
|
--icon: url(../media/icons/artfight.webp);
|
||||||
--icon-bg: #222222;
|
--icon-bg: #222222;
|
||||||
--bg: #a65178;
|
--bg: #a65178;
|
||||||
--fg: white;
|
--fg: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
#links #chitter {
|
#chitter {
|
||||||
--icon: url(../media/icons/chitter.webp);
|
--icon: url(../media/icons/chitter.webp);
|
||||||
--bg: #582c58;
|
--bg: #582c58;
|
||||||
--icon-bg: #2c162c;
|
--icon-bg: #2c162c;
|
||||||
--fg: white;
|
--fg: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
#links #cohost {
|
#bluesky {
|
||||||
--icon: url(../media/icons/cohost.svg);
|
|
||||||
--bg: #ffab5c;
|
|
||||||
--icon-bg: #83254f;
|
|
||||||
--fg: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
#links #bluesky {
|
|
||||||
--icon: url(../media/icons/bluesky.svg);
|
--icon: url(../media/icons/bluesky.svg);
|
||||||
--bg: #161e27;
|
--bg: #161e27;
|
||||||
--fg: white;
|
--fg: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
/* most link colours are fine in both modes. except: */
|
/* most link colours are fine in both modes. except: */
|
||||||
|
#gallery {
|
||||||
#links #gallery {
|
|
||||||
--icon-bg: hsl(280deg 42% 30%);
|
--icon-bg: hsl(280deg 42% 30%);
|
||||||
--bg: hsl(280deg 38% 43%);
|
--bg: hsl(280deg 38% 43%);
|
||||||
--fg: hsl(100deg 99% 81%);
|
--fg: hsl(100deg 99% 81%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#links #weasyl {
|
#weasyl {
|
||||||
--icon-bg: #252d32;
|
--icon-bg: #252d32;
|
||||||
}
|
}
|
||||||
|
|
||||||
#links #kofi {
|
#kofi {
|
||||||
--icon-bg: #2b3a44;
|
--icon-bg: #2b3a44;
|
||||||
--bg: #192025;
|
--bg: #192025;
|
||||||
--fg: #dce7eb;
|
--fg: #dce7eb;
|
||||||
}
|
}
|
||||||
|
|
||||||
#links #bluesky {
|
#bluesky {
|
||||||
--bg: #161e27;
|
--bg: #161e27;
|
||||||
--icon-bg: #1e2936;
|
--icon-bg: #1e2936;
|
||||||
--fg: white;
|
--fg: white;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@layer faces.friends {
|
||||||
#friends, #friends ::selection {
|
#friends {
|
||||||
--hue: 190deg;
|
--hue: 190deg;
|
||||||
--bg-angle: 300deg;
|
--bg-angle: 300deg;
|
||||||
}
|
|
||||||
|
|
||||||
#cube #friends {
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid: "hdr" min-content
|
grid: "hdr" min-content
|
||||||
"links1" auto
|
"links1" auto
|
||||||
"links2" auto
|
"links2" auto
|
||||||
"buttons" auto;
|
"buttons" auto;
|
||||||
}
|
|
||||||
|
|
||||||
#friends img { image-rendering: pixelated; }
|
img { image-rendering: pixelated; }
|
||||||
|
|
||||||
#friendlinks, #otherlinks { align-self: start; }
|
> section {
|
||||||
|
align-self: start;
|
||||||
|
|
||||||
#friendlinks ul, #otherlinks ul {
|
ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
|
|
@ -457,18 +462,20 @@ strong { font-weight: 700; }
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
align-items: start;
|
align-items: start;
|
||||||
gap: 4px;
|
gap: 0;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
#friendlinks img, #otherlinks img {
|
img {
|
||||||
width: 88px;
|
width: 88px;
|
||||||
height: 31px;
|
height: 31px;
|
||||||
object-fit: none;
|
object-fit: none;
|
||||||
}
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#friends .txt {
|
.txt {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 88px;
|
width: 88px;
|
||||||
height: 31px;
|
height: 31px;
|
||||||
|
|
@ -479,68 +486,60 @@ strong { font-weight: 700; }
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#friends a:hover { text-decoration: none; }
|
a:hover { text-decoration: none; }
|
||||||
|
}
|
||||||
|
|
||||||
#friends #khr a { background: #ffab71; color: #71153e; }
|
#khr a { background: #ffab71; color: #71153e; }
|
||||||
#friends #ionchy a { background: #feca2f; color: #1b1505; }
|
#ionchy a { background: #feca2f; color: #1b1505; }
|
||||||
#friends #tenna a { background: #6095da; color: #243224; }
|
#tenna a { background: #6095da; color: #243224; }
|
||||||
#friends #river a { background: #98d8e7; color: #d67d28; }
|
#river a { background: #98d8e7; color: #d67d28; }
|
||||||
#friends #spiral a { background: #ef4d5a; color: #1f1f1f; }
|
#spiral a { background: #ef4d5a; color: #1f1f1f; }
|
||||||
#friends #codl a { background: #87261f; color: #edb970; }
|
#codl a { background: #87261f; color: #edb970; }
|
||||||
#friends #violet a { background: #8c2bd8; color: #dddddd; }
|
#violet a { background: #8c2bd8; color: #dddddd; }
|
||||||
#friends #brin a { background: #1e1e1e; color: #ff4400; }
|
#brin a { background: #1e1e1e; color: #ff4400; }
|
||||||
#friends #konsti a { background: #060038; color: #ffcccc; }
|
#konsti a { background: #060038; color: #ffcccc; }
|
||||||
#friends #lena a { background: #e3ccf7; color: #000000; }
|
#lena a { background: #e3ccf7; color: #000000; }
|
||||||
#friends #serena a { background: #e787ad; color: #204; }
|
#serena a { background: #e787ad; color: #204; }
|
||||||
#friends #deneb a { background: #540f00; color: #ee6bfa; }
|
#deneb a { background: #540f00; color: #ee6bfa; }
|
||||||
|
|
||||||
#nissbuttons {
|
#nissbuttons {
|
||||||
margin: 2em auto 0;
|
margin: 2em auto 0;
|
||||||
align-self: end;
|
align-self: end;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
}
|
|
||||||
|
|
||||||
#nissbuttons h3 {
|
h3 {
|
||||||
|
margin: 0;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
#nissbuttons * { margin: 0; }
|
|
||||||
|
|
||||||
#six, #six ::selection {
|
@layer faces.six {
|
||||||
|
#six, #six ::selection {
|
||||||
--hue: 250deg;
|
--hue: 250deg;
|
||||||
--bg-angle: 130deg;
|
--bg-angle: 130deg;
|
||||||
}
|
|
||||||
|
|
||||||
#cube #six {
|
|
||||||
--bg-image: url(../media/kesi.webp);
|
--bg-image: url(../media/kesi.webp);
|
||||||
background:
|
background:
|
||||||
var(--bg-image) bottom right / 100% auto no-repeat,
|
var(--bg-image) bottom right / 100% auto no-repeat,
|
||||||
var(--base-background);
|
var(--base-background);
|
||||||
}
|
|
||||||
|
|
||||||
.artcredit {
|
@media (prefers-color-scheme: dark) {
|
||||||
position: absolute;
|
--bg-image: url(../media/kesi-neon.webp);
|
||||||
bottom: 0;
|
}
|
||||||
left: 1em;
|
@media (prefers-reduced-data: reduce) {
|
||||||
font-size: smaller;
|
--bg-image: url(../media/kesi.l.webp);
|
||||||
font-style: italic;
|
}
|
||||||
background: hsl(var(--menu-bg-hsl) / 75%);
|
@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
|
||||||
padding: .1em .5em;
|
--bg-image: url(../media/kesi-neon.l.webp);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
#cube #six { --bg-image: url(../media/kesi-neon.webp); }
|
|
||||||
}
|
|
||||||
@media (prefers-reduced-data: reduce) {
|
|
||||||
#cube #activities { --bg-image: url(../media/kesi.l.webp); }
|
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
|
|
||||||
#cube #activities { --bg-image: url(../media/kesi-neon.l.webp); }
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
114
style/cube.css
114
style/cube.css
|
|
@ -1,9 +1,8 @@
|
||||||
@media (prefers-reduced-motion: no-preference) and
|
@media (prefers-reduced-motion: no-preference) and
|
||||||
(min-height: 650px) and (min-width: 650px) {
|
(min-height: 650px) and (min-width: 650px) {
|
||||||
|
|
||||||
/* BACKGROUND STUFF */
|
@layer outer {
|
||||||
|
:root {
|
||||||
html {
|
|
||||||
--bg-60309: url(../media/bg/60309.png);
|
--bg-60309: url(../media/bg/60309.png);
|
||||||
--bg-kesi: url(../media/bg/kesi.png);
|
--bg-kesi: url(../media/bg/kesi.png);
|
||||||
--bg-korai: url(../media/bg/korai.png);
|
--bg-korai: url(../media/bg/korai.png);
|
||||||
|
|
@ -14,10 +13,8 @@ html {
|
||||||
--bg-prickly: url(../media/bg/prickly.png);
|
--bg-prickly: url(../media/bg/prickly.png);
|
||||||
--bg-qt: url(../media/bg/qt.png);
|
--bg-qt: url(../media/bg/qt.png);
|
||||||
--bg-qt2: url(../media/bg/qt2.png);
|
--bg-qt2: url(../media/bg/qt2.png);
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
html {
|
|
||||||
--bg-60309: url(../media/bg/60309_neon.png);
|
--bg-60309: url(../media/bg/60309_neon.png);
|
||||||
--bg-kesi: url(../media/bg/kesi_neon.png);
|
--bg-kesi: url(../media/bg/kesi_neon.png);
|
||||||
--bg-korai: url(../media/bg/korai_neon.png);
|
--bg-korai: url(../media/bg/korai_neon.png);
|
||||||
|
|
@ -29,15 +26,14 @@ html {
|
||||||
--bg-qt: url(../media/bg/qt_neon.png);
|
--bg-qt: url(../media/bg/qt_neon.png);
|
||||||
--bg-qt2: url(../media/bg/qt2_neon.png);
|
--bg-qt2: url(../media/bg/qt2_neon.png);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
background-blend-mode: overlay;
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
background-blend-mode: soft-light;
|
||||||
|
}
|
||||||
|
|
||||||
background:
|
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))
|
var(--bg-60309) bottom 29% right calc(44% - var(--half))
|
||||||
/ auto 17% no-repeat,
|
/ auto 17% no-repeat,
|
||||||
var(--bg-kesi) bottom 23% left calc(44% - var(--half))
|
var(--bg-kesi) bottom 23% left calc(44% - var(--half))
|
||||||
|
|
@ -57,104 +53,96 @@ html {
|
||||||
var(--bg-prickly) bottom 9% right calc(28% - var(--half))
|
var(--bg-prickly) bottom 9% right calc(28% - var(--half))
|
||||||
/ auto 15% no-repeat,
|
/ auto 15% no-repeat,
|
||||||
var(--base-background);
|
var(--base-background);
|
||||||
background-blend-mode: overlay;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media ((prefers-reduced-data: reduce),
|
||||||
html {
|
(prefers-reduced-transparency: reduce)) {
|
||||||
background-blend-mode: soft-light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-data: reduce) {
|
|
||||||
html {
|
|
||||||
background: var(--base-background);
|
background: var(--base-background);
|
||||||
background-blend-mode: unset;
|
background-blend-mode: initial;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
body {
|
||||||
/* LAYOUT BASICS */
|
|
||||||
|
|
||||||
body {
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 5em 1fr;
|
grid-template-rows: 5em 1fr;
|
||||||
|
|
||||||
perspective: 440vw;
|
perspective: 440vw;
|
||||||
perspective-origin: 50% 120%;
|
perspective-origin: 50% 120%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MENU ANIMATION */
|
menu {
|
||||||
|
label {
|
||||||
.menu label { position: relative; }
|
position: relative;
|
||||||
.menu label::after {
|
&::after {
|
||||||
content: ' ';
|
content: ' ';
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0 0 100% 0;
|
inset: 0 0 100% 0;
|
||||||
background: hsl(var(--menu-bg-hsl));
|
background: hsl(var(--menu-bg-hsl));
|
||||||
|
|
||||||
|
@media not (prefers-reduced-motion: reduce) {
|
||||||
transition: inset .15s linear;
|
transition: inset .15s linear;
|
||||||
}
|
}
|
||||||
.menu :checked + label::after {
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:checked + label::after {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@layer cube {
|
||||||
/* CUBE ASSEMBLY */
|
:root {
|
||||||
/* the rest is in cube.ts */
|
|
||||||
|
|
||||||
html {
|
|
||||||
--side: min(65vh, 70vw);
|
--side: min(65vh, 70vw);
|
||||||
--half: calc(var(--side) * .5);
|
--half: calc(var(--side) * .5);
|
||||||
--nhalf: calc(0em - var(--half));
|
--nhalf: calc(0em - var(--half));
|
||||||
--breathe: calc(var(--side) * 0.02);
|
--breathe: calc(var(--side) * 0.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
#outer {
|
#outer {
|
||||||
--transform-origin: 50% 50% calc(var(--nhalf) - min(6vh, 6vw));
|
--transform-origin: 50% 50% calc(var(--nhalf) - min(6vh, 6vw));
|
||||||
}
|
}
|
||||||
|
|
||||||
#outer, #cube {
|
#outer, #cube {
|
||||||
transform-style: preserve-3d;
|
transform-style: preserve-3d;
|
||||||
transform-origin: var(--transform-origin);
|
transform-origin: var(--transform-origin);
|
||||||
width: calc(var(--side) + 10vw);
|
width: calc(var(--side) + 10vw);
|
||||||
height: calc(var(--side) + 10vh);
|
height: calc(var(--side) + 10vh);
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cube {
|
#cube {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
|
||||||
|
|
||||||
#cube > section {
|
> section {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 5vh 5vw;
|
inset: 5vh 5vw;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
transform-origin: var(--transform-origin);
|
transform-origin: var(--transform-origin);
|
||||||
transform: var(--base-transform);
|
transform: var(--base-transform);
|
||||||
overscroll-behavior: contain;
|
overscroll-behavior: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cube:not([data-moving]) > section:not([data-state=active]) {
|
&:not([data-moving]) > section:not([data-state=active]) {
|
||||||
animation: breathe 7.5s infinite ease-in-out;
|
animation: breathe 7.5s infinite ease-in-out;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes breathe {
|
@keyframes breathe {
|
||||||
40% { transform: var(--base-transform) translateZ(var(--breathe)); }
|
40% { transform: var(--base-transform) translateZ(var(--breathe)); }
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
@media not (prefers-reduced-motion: reduce) {
|
||||||
.zoom * { transition: all 0.25s ease-in; }
|
.zoom * { transition: all 0.25s ease-in; }
|
||||||
.zoom > :hover {
|
.zoom > :hover {
|
||||||
scale: 110%;
|
scale: 110%;
|
||||||
filter: drop-shadow(4px 4px 5px rgb(0 0 0 / 60%));
|
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; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.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; }
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
100
style/flat.css
100
style/flat.css
|
|
@ -1,122 +1,120 @@
|
||||||
@media (prefers-reduced-motion: reduce),
|
@media (prefers-reduced-motion: reduce),
|
||||||
(max-height: 649px), (max-width: 649px) {
|
(max-height: 649px), (max-width: 649px) {
|
||||||
|
|
||||||
html {
|
:root {
|
||||||
--side: 0px;
|
--side: 0px;
|
||||||
--half: 0px;
|
--half: 0px;
|
||||||
--nhalf: 0px;
|
--nhalf: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* LAYOUT */
|
@layer outer {
|
||||||
|
body {
|
||||||
body {
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template: "menu" 5em "body" 1fr;
|
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 {
|
#outer {
|
||||||
|
grid-area: body;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 90%;
|
height: 90%;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
|
||||||
|
|
||||||
#outer::after {
|
&::after {
|
||||||
content: ' ';
|
content: ' ';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
box-shadow: 0 0 40px hsl(var(--shadow-hsl) / 40%);
|
box-shadow: 0 0 40px hsl(var(--shadow-hsl) / 40%);
|
||||||
mix-blend-mode: multiply;
|
mix-blend-mode: multiply;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* not really a cube any more. but */
|
/* not really a cube any more. but */
|
||||||
#cube, #cube > section {
|
@layer cube {
|
||||||
|
#cube, #cube > section {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
}
|
}
|
||||||
#cube > section { overflow: auto; }
|
#cube > section { overflow: auto; }
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
html { --shadow-hsl: 60deg 100% 96%; }
|
html { --shadow-hsl: 60deg 100% 96%; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* BACKGROUND FIXES */
|
/* BACKGROUND FIXES */
|
||||||
|
|
||||||
@media (max-width: 649px) {
|
@layer faces {
|
||||||
#cube #hello {
|
@layer hello {
|
||||||
|
#hello {
|
||||||
|
@media (max-width: 649px) {
|
||||||
background-size: auto 80%, auto, auto;
|
background-size: auto 80%, auto, auto;
|
||||||
background-position: bottom -20% right 60%, center, center;
|
background-position: bottom -20% right 60%, center, center;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-height: 649px) {
|
@media (max-height: 649px) {
|
||||||
#cube #hello {
|
|
||||||
background-size: auto 80%, auto, auto;
|
background-size: auto 80%, auto, auto;
|
||||||
background-position: bottom right, center, center;
|
background-position: bottom right, center, center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer activities {
|
||||||
@media (max-width: 649px) {
|
#activities {
|
||||||
#cube #activities {
|
@media (max-width: 649px) {
|
||||||
background-size: auto 30%, auto, auto;
|
background-size: auto 30%, auto, auto;
|
||||||
background-position: bottom left 70%, center, center;
|
background-position: bottom left 70%, center, center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#cube #six {
|
@layer six {
|
||||||
|
#six {
|
||||||
background-position: bottom left 70%, center, center;
|
background-position: bottom left 70%, center, center;
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 649px) {
|
@media (max-width: 649px) {
|
||||||
#cube #six {
|
|
||||||
background-size: auto 100%, auto, auto;
|
background-size: auto 100%, auto, auto;
|
||||||
background-position: bottom left 70%, center, center;
|
background-position: bottom left 70%, center, center;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-height: 649px) {
|
@media (max-height: 649px) {
|
||||||
#cube #six {
|
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: top 15% center;
|
background-position: top 15% center;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* TRANSITIONS */
|
@layer cube {
|
||||||
|
#face-menu {
|
||||||
|
label { transition: background 0.1s ease-in; }
|
||||||
|
:checked + label { background: hsl(var(--menu-bg-hsl)); }
|
||||||
|
}
|
||||||
|
|
||||||
#face-menu :checked + label {
|
#cube > section {
|
||||||
background: hsl(var(--menu-bg-hsl));
|
&[data-state=entering] {
|
||||||
}
|
|
||||||
#face-menu label {
|
|
||||||
transition: background 0.1s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cube > :is(section[data-state=entering], #a) {
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cube > :is(section[data-state=active], #a) {
|
&[data-state=active] {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity 0.1s ease-in;
|
transition: opacity 0.1s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cube > :is(section[data-state=leaving], #a) {
|
&[data-state=leaving] {
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0s 0.1s ease-in;
|
transition: opacity 0s 0.1s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cube > :is(section[data-state=hidden], #a) {
|
&[data-state=hidden] {
|
||||||
display: none;
|
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