171 lines
4.9 KiB
CSS
171 lines
4.9 KiB
CSS
@import url(/fonts/muller/muller.css);
|
|
|
|
@property --transition {
|
|
syntax: "*";
|
|
inherits: true;
|
|
initial-value: none;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* { transition: none; }
|
|
}
|
|
|
|
:root {
|
|
--hue: 300;
|
|
--c-hue: calc(180 + var(--hue));
|
|
min-height: 100vh; display: flex;
|
|
align-items: center; justify-content: center;
|
|
|
|
--font: Muller, sans-serif;
|
|
font-family: var(--font);
|
|
|
|
color-scheme: light dark;
|
|
background: oklch(0.9 0.08 var(--hue));
|
|
|
|
width: 100vw;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root { background: oklch(0.3 0.12 var(--hue)); }
|
|
}
|
|
|
|
#pic {
|
|
position: relative;
|
|
width: min(1000px, 75vw);
|
|
margin: auto;
|
|
aspect-ratio: 2000/1312;
|
|
}
|
|
#pic div {
|
|
position: absolute; inset: 0;
|
|
mask-size: contain; mask-repeat: no-repeat;
|
|
}
|
|
|
|
|
|
#front, #back {
|
|
transition: all 0.45s cubic-bezier(.23,-0.03,.68,1.11);
|
|
}
|
|
|
|
.back > #front { translate: -125vw; }
|
|
:not(.back) > #back { translate: -125vw; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
#front, #back { transition: none; }
|
|
|
|
.back > #front { translate: none; rotate: none; display: none; }
|
|
:not(.back) > #back { translate: none; rotate: none; display: none; }
|
|
}
|
|
|
|
|
|
#front .static { background: url(front/static.webp) 0 0 / contain; }
|
|
#back .static { background: url(back/static.webp) 0 0 / contain; }
|
|
|
|
.spines { background: oklch(30.77% 0.1306 298.19); }
|
|
#front .spines { mask-image: url(front/spines.webp); }
|
|
#back .spines { mask-image: url(back/spines.webp); }
|
|
|
|
.stripes { background: oklch(88.2% 0.0613 209.07); }
|
|
#front .stripes { mask-image: url(front/stripes.webp); }
|
|
#back .stripes { mask-image: url(back/stripes.webp); }
|
|
|
|
.cuffs { background: oklch(72.74% 0.1008 225.69); }
|
|
#front .cuffs { mask-image: url(front/cuffs.webp); }
|
|
#back .cuffs { mask-image: url(back/cuffs.webp); }
|
|
|
|
.outer { background: oklch(38.37% 0.1437 306.27); }
|
|
#front .outer { mask-image: url(front/outer.webp); }
|
|
#back .outer { mask-image: url(back/outer.webp); }
|
|
|
|
.fins1 { background: oklch(85.06% 0.0961 81.4); }
|
|
#front .fins1 { mask-image: url(front/fins1.webp); }
|
|
#back .fins1 { mask-image: url(back/fins1.webp); }
|
|
|
|
.fins2 { background: oklch(79.59% 0.1208 73.56); }
|
|
#front .fins2 { mask-image: url(front/fins2.webp); }
|
|
#back .fins2 { mask-image: url(back/fins2.webp); }
|
|
|
|
.fins3 { background: oklch(74.11% 0.1268 64.62); }
|
|
#front .fins3 { mask-image: url(front/fins3.webp); }
|
|
#back .fins3 { mask-image: url(back/fins3.webp); }
|
|
|
|
.belly1 { background: oklch(87.26% 0.0699 80.94); }
|
|
#front .belly1 { mask-image: url(front/belly1.webp); }
|
|
#back .belly1 { mask-image: url(back/belly1.webp); }
|
|
|
|
.belly2 { background: oklch(76.92% 0.0954 58.36); }
|
|
#front .belly2 { mask-image: url(front/belly2.webp); }
|
|
#back .belly2 { mask-image: url(back/belly2.webp); }
|
|
|
|
.eyes { background: oklch(36.26% 0.1107 145.78); }
|
|
#front .eyes { mask-image: url(front/eyes.webp); }
|
|
#back .eyes { mask-image: url(back/eyes.webp); }
|
|
|
|
.masks { background: oklch(77.1% 0.0243 317.12); }
|
|
#front .masks { mask-image: url(front/masks.webp); }
|
|
#back .masks { mask-image: url(back/masks.webp); }
|
|
|
|
.claws { background: oklch(88.92% 0.0207 325.75); }
|
|
#front .claws { mask-image: url(front/claws.webp); }
|
|
#back .claws { mask-image: url(back/claws.webp); }
|
|
|
|
.vitiligo1 { background: oklch(79.4% 0.0588 309.27); }
|
|
#front .vitiligo1 { mask-image: url(front/vitiligo1.webp); }
|
|
#back .vitiligo1 { mask-image: url(back/vitiligo1.webp); }
|
|
|
|
.vitiligo2 { background: oklch(93.14% 0.0331 83.71); }
|
|
#front .vitiligo2 { mask-image: url(front/vitiligo2.webp); }
|
|
#back .vitiligo2 { mask-image: url(back/vitiligo2.webp); }
|
|
|
|
.vitiligo3 { background: oklch(95.7% 0.0296 94.35); }
|
|
#front .vitiligo3 { mask-image: url(front/vitiligo3.webp); }
|
|
#back .vitiligo3 { mask-image: url(back/vitiligo3.webp); }
|
|
|
|
.vitiligo4 { background: oklch(95.7% 0.0296 94.35); }
|
|
#front .vitiligo4 { mask-image: url(front/vitiligo4.webp); }
|
|
#back .vitiligo4 { mask-image: url(back/vitiligo4.webp); }
|
|
|
|
.lines { background: oklch(21.96% 0.0661 296.36); }
|
|
#front .lines { mask-image: url(front/lines.webp); }
|
|
#back .lines { mask-image: url(back/lines.webp); }
|
|
|
|
.eye-shine { mask: none; mix-blend-mode: luminosity; }
|
|
#front .eye-shine { background: url(front/eyes.webp) 0 0 / contain; }
|
|
#back .eye-shine { background: url(back/eyes.webp) 0 0 / contain; }
|
|
|
|
|
|
#buttons {
|
|
margin-top: 3rem;
|
|
display: flex; gap: 20px;
|
|
z-index: -1;
|
|
}
|
|
|
|
button {
|
|
font: 700 25pt var(--font);
|
|
flex: 30%;
|
|
background: oklch(0.5 0.2 var(--hue));
|
|
color: oklch(0.95 0.075 var(--c-hue));
|
|
border: 3px solid oklch(0.2 0.05 var(--hue));
|
|
padding: 0.2em 0.5em;
|
|
filter: drop-shadow(0 0 10px oklch(0.4 0.2 var(--hue) / 0.45));
|
|
}
|
|
|
|
nav {
|
|
position: absolute;
|
|
bottom: 15px; left: 22px;
|
|
}
|
|
|
|
nav a {
|
|
color: oklch(0.4 0.15 var(--c-hue));
|
|
text-decoration: 3px solid underline;
|
|
text-decoration-color:
|
|
oklch(0.6 0.1 var(--c-hue));
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
nav a { color: oklch(0.9 0.19 var(--c-hue)); }
|
|
}
|