536 lines
10 KiB
CSS
536 lines
10 KiB
CSS
@import url(../fonts/muller/muller.css);
|
|
|
|
|
|
/* OUTER */
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
min-height: 100vh;
|
|
min-height: 100lvh;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
html {
|
|
font-size: large;
|
|
font-family: Muller, sans-serif;
|
|
font-weight: 500;
|
|
|
|
color: black;
|
|
|
|
--gradient:
|
|
linear-gradient(120deg, #fae58f, #fab6ba, #d1aeff, #89d6ff, #43f3ae);
|
|
--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 {
|
|
--gradient:
|
|
linear-gradient(20deg,
|
|
hsl(300deg 30% 20%),
|
|
hsl(220deg 30% 20%),
|
|
hsl(150deg 30% 20%),
|
|
hsl(30deg 30% 20%),
|
|
hsl(350deg 30% 20%));
|
|
--menu-bg-hsl: 260deg 100% 8%;
|
|
color: #ffd;
|
|
}
|
|
}
|
|
|
|
|
|
/* TOP MENU */
|
|
|
|
#face-menu {
|
|
align-self: center;
|
|
margin: 10px;
|
|
}
|
|
|
|
.menu input, .menu label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.menu {
|
|
display: flex;
|
|
place-content: center;
|
|
place-items: center;
|
|
margin: auto;
|
|
padding: 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 {
|
|
appearance: none;
|
|
width: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.menu li {
|
|
display: flex;
|
|
list-style: none;
|
|
flex: 1 0 4em;
|
|
}
|
|
.menu label {
|
|
padding: .25em 1.25em;
|
|
flex: 1 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/* BASE FACE STYLES */
|
|
|
|
#cube > section {
|
|
--base-background:
|
|
repeating-linear-gradient(var(--bg-angle),
|
|
transparent, transparent 0.8em,
|
|
#fff8 0.8em, #fff8 1em),
|
|
linear-gradient(150deg,
|
|
hsl(var(--hue) 86% 94%),
|
|
hsl(var(--hue) 66% 82%)
|
|
);
|
|
background: var(--base-background);
|
|
|
|
--border-thickness: 10px;
|
|
border: var(--border-thickness) solid white;
|
|
padding: 2em;
|
|
|
|
color: hsl(var(--hue) 40% 10%);
|
|
--text-shadow-color: white;
|
|
text-shadow:
|
|
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:
|
|
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,
|
|
#0014 0.8em, #0014 1em),
|
|
linear-gradient(150deg,
|
|
hsl(var(--hue) 40% 30%),
|
|
hsl(var(--hue) 40% 15%)
|
|
);
|
|
|
|
border-color: hsl(var(--hue) 40% 10%);
|
|
|
|
color: hsl(var(--hue) 40% 90%);
|
|
--text-shadow-color: black;
|
|
}
|
|
|
|
#cube a {
|
|
color: hsl(calc(var(--hue) + 180deg) 100% 85%);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* SPECIFIC FACE STYLES */
|
|
|
|
/* the separate "#whatever ::selection" selector is because in
|
|
* chrome, ::selection doesn't inherit variables */
|
|
#hello, #hello ::selection {
|
|
--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 {
|
|
--bg-image: url(../media/wave.png);
|
|
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.png); }
|
|
}
|
|
@media (prefers-reduced-data: reduce) {
|
|
#cube #hello { --bg-image: url(../media/wave.webp); }
|
|
}
|
|
@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
|
|
#cube #hello { --bg-image: url(../media/wave-neon.webp); }
|
|
}
|
|
|
|
#id, #id ::selection, #flags img {
|
|
--hue: 10deg;
|
|
--bg-angle: 45deg;
|
|
}
|
|
|
|
#id dl {
|
|
display: grid;
|
|
grid-template-columns: min-content auto;
|
|
gap: 1em 2em;
|
|
}
|
|
#id dt { font-weight: 600; }
|
|
#id dd { margin: 0; }
|
|
#id dd a { font-weight: 700; }
|
|
|
|
#id dl ul {
|
|
padding-left: 1em;
|
|
list-style: '❧ ';
|
|
}
|
|
|
|
#flags {
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
justify-content: center;
|
|
gap: 1em;
|
|
margin-top: 3em;
|
|
}
|
|
|
|
#flags img {
|
|
height: 2em;
|
|
border: 2px solid hsl(var(--hue) 30% 5% / 60%);
|
|
}
|
|
|
|
|
|
#activities, #activities ::selection {
|
|
--hue: 70deg;
|
|
--bg-angle: -60deg;
|
|
}
|
|
|
|
#cube #activities {
|
|
/* height of quobl.png is 58% of width */
|
|
--bg-image: url(../media/quobl.png);
|
|
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.png); }
|
|
}
|
|
@media (prefers-reduced-data: reduce) {
|
|
#cube #activities { --bg-image: url(../media/quobl.webp); }
|
|
}
|
|
@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
|
|
#cube #activities { --bg-image: url(../media/quobl-neon.png); }
|
|
}
|
|
|
|
#links, #links ::selection {
|
|
--hue: 130deg;
|
|
--bg-angle: 210deg;
|
|
}
|
|
|
|
#links ul {
|
|
padding: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
#links li {
|
|
flex: 1 0 10em;
|
|
list-style: none;
|
|
--icon-bg: var(--fg);
|
|
}
|
|
|
|
#links a {
|
|
height: 3em;
|
|
padding-left: calc(3em + 1ex);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
border: 2px solid black;
|
|
background:
|
|
linear-gradient(to right, transparent 3em, var(--bg) 3em),
|
|
var(--icon) calc(1.5em - 16px) center / 32px auto no-repeat,
|
|
var(--icon-bg);
|
|
|
|
color: var(--fg);
|
|
text-shadow: none;
|
|
}
|
|
|
|
#links a:hover { text-decoration: none; }
|
|
|
|
#links #gallery {
|
|
--icon: url(../media/favicon.png);
|
|
--fg: hsl(280deg 38% 43%);
|
|
--bg: hsl(100deg 99% 81%);
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
#links #code {
|
|
--icon: url(../media/icons/forgejo.svg);
|
|
--fg: white;
|
|
--icon-bg: #171e26;
|
|
--bg: #c2410c;
|
|
}
|
|
|
|
#links #blog {
|
|
--icon: url(../media/icons/blog.png);
|
|
--fg: #ffeebb;
|
|
--bg: #332255;
|
|
/* image-rendering: pixelated; */
|
|
}
|
|
#links #blog a {
|
|
background-position: center, left calc(1.5em - 51px) center, center;
|
|
background-size: contain;
|
|
}
|
|
|
|
#links #itaku {
|
|
--icon: url(../media/icons/itaku.svg);
|
|
--fg: #ffeb3b;
|
|
--bg: #303030;
|
|
}
|
|
|
|
#links #weasyl {
|
|
--icon: url(../media/icons/weasyl.svg);
|
|
--fg: white;
|
|
--bg: #970000;
|
|
}
|
|
|
|
#links #fa {
|
|
--icon: url(../media/icons/furaffinity.png);
|
|
--icon-bg: #20242a;
|
|
--bg: #353b45;
|
|
--fg: white;
|
|
}
|
|
|
|
#links #da {
|
|
--icon: url(../media/icons/deviantart.png);
|
|
--icon-bg: #000608;
|
|
--bg: #314537;
|
|
--fg: #e7ede4;
|
|
}
|
|
|
|
#links #kofi {
|
|
--icon: url(../media/icons/ko-fi.webp);
|
|
--icon-bg: #def3ff;
|
|
--bg: white;
|
|
--fg: #ff5966;
|
|
}
|
|
|
|
#links #artfight {
|
|
--icon: url(../media/icons/artfight.png);
|
|
--icon-bg: #222222;
|
|
--bg: #a65178;
|
|
--fg: white;
|
|
}
|
|
|
|
#links #chitter {
|
|
--icon: url(../media/icons/chitter.png);
|
|
--bg: #582c58;
|
|
--icon-bg: #2c162c;
|
|
--fg: white;
|
|
}
|
|
|
|
#links #cohost {
|
|
--icon: url(../media/icons/cohost.svg);
|
|
--bg: #ffab5c;
|
|
--icon-bg: #83254f;
|
|
--fg: black;
|
|
}
|
|
|
|
#links #bluesky {
|
|
--icon: url(../media/icons/bluesky.svg);
|
|
--bg: #161e27;
|
|
--fg: white;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
/* most link colours are fine in both modes. except: */
|
|
|
|
#links #gallery {
|
|
--icon-bg: hsl(280deg 42% 30%);
|
|
--bg: hsl(280deg 38% 43%);
|
|
--fg: hsl(100deg 99% 81%);
|
|
}
|
|
|
|
#links #weasyl {
|
|
--icon-bg: #252d32;
|
|
}
|
|
|
|
#links #kofi {
|
|
--icon-bg: #2b3a44;
|
|
--bg: #192025;
|
|
--fg: #dce7eb;
|
|
}
|
|
|
|
#links #bluesky {
|
|
--bg: #161e27;
|
|
--icon-bg: #1e2936;
|
|
--fg: white;
|
|
}
|
|
}
|
|
|
|
|
|
#friends, #friends ::selection {
|
|
--hue: 190deg;
|
|
--bg-angle: 300deg;
|
|
}
|
|
|
|
#cube #friends {
|
|
display: grid;
|
|
grid: "hdr" min-content
|
|
"links1" auto
|
|
"links2" auto
|
|
"buttons" auto;
|
|
}
|
|
|
|
#friends img { image-rendering: pixelated; }
|
|
|
|
#friendlinks, #otherlinks { align-self: start; }
|
|
|
|
#friendlinks ul, #otherlinks ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
|
|
display: flex;
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
|
|
align-items: start;
|
|
gap: 4px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#friendlinks img, #otherlinks img {
|
|
width: 88px;
|
|
height: 31px;
|
|
object-fit: none;
|
|
}
|
|
|
|
#friends .txt {
|
|
display: inline-block;
|
|
width: 88px;
|
|
height: 31px;
|
|
border: 3px outset currentcolor;
|
|
text-align: center;
|
|
line-height: 28px;
|
|
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
text-shadow: none;
|
|
}
|
|
|
|
#friends 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; }
|
|
|
|
#nissbuttons {
|
|
margin: 2em auto 0;
|
|
align-self: end;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1em;
|
|
}
|
|
|
|
#nissbuttons h3 {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
text-align: right;
|
|
text-wrap: balance;
|
|
}
|
|
#nissbuttons * { margin: 0; }
|
|
|
|
#six, #six ::selection {
|
|
--hue: 250deg;
|
|
--bg-angle: 130deg;
|
|
}
|
|
|
|
#cube #six {
|
|
--bg-image: url(../media/kesi.png);
|
|
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.png); }
|
|
}
|
|
@media (prefers-reduced-data: reduce) {
|
|
#cube #activities { --bg-image: url(../media/kesi.webp); }
|
|
}
|
|
@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
|
|
#cube #activities { --bg-image: url(../media/kesi-neon.webp); }
|
|
}
|