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