mirzaev
/
css-crime-pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
css-crime-pages/index.css

1528 lines
34 KiB
CSS
Raw Blame History

@import url("https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&family=Geologica:wght@100..900&family=Oswald:wght@200..700");
@layers system interface content colorscheme animation demonstration;
@layer system {
:not(details.page)>details.page {
position: relative;
counter-reset: page 0;
&[open]>summary {
display: none;
}
}
details.page {
--pages-page-width: max(20vw, 300px);
--pages-page-height: max(40vh, 400px);
--pages-page-padding: 1rem;
width: var(--pages-page-width, max(20vw, 380px));
height: var(--pages-page-height, max(40vh, 370px));
box-sizing: border-box;
padding: var(--pages-page-padding, 1rem);
border-radius: 0.75rem;
overflow: hidden;
>details.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&[open] {
z-index: 10;
counter-increment: page 1;
>summary {
&:before {
content: var(--localization-button-previous, "Previous");
}
left: var(--pages-page-padding, 1rem);
right: unset;
}
>details.page:not([open])>summary {
&:before {
content: var(--localization-button-next, "Next");
}
}
}
> :not(details, summary) {
z-index: 1;
position: relative;
}
>summary {
z-index: 5;
right: var(--pages-page-padding, 1rem);
bottom: var(--pages-page-padding, 1rem);
position: absolute;
max-width: calc(50% - var(--pages-page-padding, 1rem));
min-width: 30px;
width: max-content;
box-sizing: border-box;
padding: 0.4rem 1rem;
display: flex;
gap: 0.2rem;
justify-content: center;
cursor: pointer;
border-radius: 0.75rem;
}
}
}
@layer content {
@layer page {
details.page>section.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: var(--pages-page-padding, 1rem);
display: flex;
flex-direction: column;
gap: 1rem;
>span:has(> :is(span, a).separated) {
justify-content: space-between;
}
> :is(h2, h3) {
margin: unset;
margin-top: 0.2rem;
text-align: center;
font-weight: 200;
}
}
}
@layer destiny {
details.page#destiny>section.content {
>img {
&#masha {
position: absolute;
top: -10%;
height: 150%;
align-self: center;
}
&.masha.red {
z-index: 100;
position: absolute;
top: -10%;
height: 150%;
align-self: center;
mix-blend-mode: overlay;
}
}
>div#css {
z-index: 50;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
width: 100%;
height: 100%;
mix-blend-mode: multiply;
/* font-size: 0.8rem; */
>div.color {
width: 100%;
height: 100%;
display: block;
>code.flow {
position: absolute;
left: -10%;
width: 120%;
/* height: 130rem; */
height: 3000px;
/* line-height: 1rem; */
/* scale: 1.5; */
font-family: "Cascadia Code", sans-serif;
/* font-size: 0.7rem; */
word-break: break-all;
overflow: hidden;
}
}
}
}
}
@layer story {
details.page#story>section.content {
>div#marie_itself_wrap {
z-index: 100;
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
>span#tolstoy_background {
position: absolute;
top: -10%;
left: -10%;
width: 120%;
height: 120%;
font-size: 1.7rem;
line-height: 1.8rem;
font-family: "Oswald";
font-weight: 100;
rotate: -5deg;
word-wrap: break-word;
word-break: break-all;
color: var(--hint-text-color, #696969);
}
>img#marie_itself {
z-index: 100;
position: absolute;
right: -10%;
bottom: -15%;
}
>div#marie_forearm_wrap {
z-index: 150;
perspective: 1000px;
>div#tolstoy {
z-index: 180;
position: absolute;
top: 85%;
right: 0%;
transform-origin: top right;
transform: rotate3d(0, 1, 0, 285deg);
>span {
position: absolute;
right: 0%;
white-space: nowrap;
background-color: red;
padding: 0rem 100rem;
font-weight: 800;
text-transform: uppercase;
font-size: 2rem;
transform: scale(3.5);
}
}
>img#marie_forearm {
position: absolute;
right: 54.5%;
bottom: -6.2%;
}
>div#marie_hand_wrap {
z-index: 200;
transform-origin: 5% 85%;
>img#marie_hand {
position: absolute;
right: -9.5%;
bottom: 11%;
}
}
}
}
}
}
@layer code {
body:has(details.page#amogus > section.content > input#shoot:checked) details.page#code>section.content>object {
display: none;
}
details.page#code>section.content {
>object {
position: absolute;
top: -50%;
left: -50%;
width: 202%;
height: 200%;
scale: 0.5;
filter: contrast(5) brightness(0.5);
}
}
}
@layer author {
details.page#author>section.content {
--pages-author-logo-diameter: 200px;
padding: var(--pages-page-padding, 1rem) calc(var(--pages-page-padding, 1rem) + 0.5rem);
gap: unset;
>h2 {
font-weight: 500;
font-family: "Cascadia Code";
+span#name {
margin-bottom: 1.2rem;
align-self: center;
font-weight: 400;
font-family: "Cascadia Code";
}
}
>span {
margin-bottom: 0.6rem;
display: inline-flex;
font-family: "Cascadia Code";
}
>div.x {
--pages-author-logo-diameter: 100px;
z-index: -10;
width: 100%;
height: calc(100% - (var(--pages-page-padding, 1rem) * 2 + 3rem));
>div.y {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
>img#logo {
z-index: 20;
position: absolute;
width: var(--pages-author-logo-diameter, 100px);
align-self: center;
object-fit: cover;
}
}
}
>div.room {
z-index: -100;
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
overflow: hidden;
filter: contrast(12) var(--filter);
transition: opacity 0s;
&:before {
position: absolute;
right: 25%;
top: 35%;
content: "";
width: 8%;
height: 5%;
border-radius: 100%;
}
>div.illuminate {
&:after {
position: absolute;
top: -50%;
left: -50%;
content: "";
width: 200%;
height: 200%;
will-change: transform;
background-image: url(https://git.svoboda.works/mirzaev/css-crime-pages/raw/branch/stable/images/noise.png);
mix-blend-mode: screen;
backdrop-filter: contrast(1.9);
}
position: absolute;
bottom: -10%;
left: -10%;
width: 140%;
height: 140%;
rotate: -5deg;
overflow: hidden;
background-color: hsl(from white 0 100% 70%);
transform-origin: bottom left;
clip-path: polygon(0 90%,
75% 0%,
100% 0%,
100% 45%,
10% 100%,
0 100%);
mix-blend-mode: luminosity;
}
>img#lezhit {
z-index: -10;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
background-color: red;
filter: grayscale(0.7);
}
}
}
details.page#author[open] {
>summary {
transition: background-color 0.3s ease-in 0.2s;
&:not(:hover) {
background-color: #ff0000aa !important;
transition: background-color 0s ease-in 0s;
}
}
}
}
@layer license {
details.page#license>section.content>p {
margin: unset;
font-family: "Cascadia Code", sans-serif;
font-size: smaller;
}
}
@layer amogus {
details.page#amogus {
&:has(> section.content > input:is(#shoot, #dead):checked) {
display: none;
}
>summary {
right: -30%;
opacity: 0;
pointer-events: none;
}
&[open] {
>summary {
display: none;
}
>section.content:after {
z-index: 700;
position: absolute;
top: -50%;
left: -50%;
content: "";
width: 200%;
height: 200%;
pointer-events: none;
will-change: transform;
scale: 3;
background-image: url(https://git.svoboda.works/mirzaev/css-crime-pages/raw/branch/stable/images/noise.png);
filter: contrast(300);
}
}
>section.content {
justify-content: center;
align-items: center;
>label:has(+ input#shoot) {
z-index: 500;
width: 0;
height: 0;
padding: 5%;
display: flex;
justify-content: center;
align-items: center;
>img#enemy {
z-index: 100;
height: 100%;
}
}
>label:has(+ input#dead) {
z-index: -400;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
>img#screamer {
z-index: 600;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: none;
pointer-events: none;
}
}
>section.content,
>section.content * {
cursor: url("data:img/png;base64,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") 50 50,
crosshair;
}
}
details.page {
&:has(> details.page#amogus > section.content > input:is(#shoot, #dead):checked):before {
content: "";
z-index: 9999;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
}
&:has(> details.page#amogus > section.content > input:is(#shoot, #dead):checked):after {
z-index: 5;
right: var(--pages-page-padding, 1rem);
bottom: var(--pages-page-padding, 1rem);
position: absolute;
max-width: calc(50% - var(--pages-page-padding, 1rem));
min-width: 30px;
width: max-content;
box-sizing: border-box;
padding: 0.4rem 1rem;
display: flex;
gap: 0.2rem;
cursor: not-allowed;
border-radius: 0.75rem;
}
&:has(> details.page#amogus > section.content > input#shoot:checked):after {
content: var(--localization-button-alive, "ALIVE");
}
&:has(> details.page#amogus > section.content > input#dead:checked) {
&:after {
content: var(--localization-button-dead, "DEAD");
}
}
}
}
}
@layer colorscheme {
details.page {
outline: var(--pages-page-outline,
2px solid var(--invert-background-color, #fff));
background-color: var(--pages-page-background-color,
var(--section-background-color, #000));
&[open] {
>summary {
color: var(--pages-button-previous-text-color,
var(--pages-button-previous-text-color,
var(--button-text-color, #000)));
/* outline: 2px solid
var(
--pages-button-previous-background-color,
var(
--pages-button-previous-background-color,
var(--button-background-color, #fff)
)
); */
background-color: var(--pages-button-previous-background-color,
var(--pages-button-previous-background-color,
var(--button-background-color, #fff)));
}
>details.page:not([open])>summary {
color: var(--pages-button-next-text-color,
var(--pages-button-next-text-color, var(--button-text-color, #000)));
/* outline: 2px solid
var(
--pages-button-next-background-color,
var(
--pages-button-next-background-color,
var(--button-background-color, #fff)
)
); */
background-color: var(--pages-button-next-background-color,
var(--pages-button-next-background-color,
var(--button-background-color, #fff)));
}
}
>summary {
/* outline-offset: -2px; */
&:hover {
/* outline-offset: 2px;
transition: outline-offset 0.1s ease-in; */
}
&:active {
filter: brightness(0.8);
/* outline-offset: -2px;
transition: outline-offset 0.05s ease-out; */
}
}
}
@layer author {
body:has(details.page#amogus > section.content > input#dead:checked) {
details.page#author>section.content {
filter: invert(1);
background-color: var(--background-color, #000);
>div.room {
--filter: invert(1);
}
}
}
details.page#author>section.content {
>div.x>div.y>div.effects {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: var(--background-color, #000);
filter: contrast(50);
>div.border {
z-index: 10;
position: absolute;
width: calc(var(--pages-author-logo-diameter, 100px) + 1rem);
height: var(--pages-author-logo-diameter, 100px);
border-radius: 100%;
filter: blur(30px);
/* mix-blend-mode: multiply; */
&:nth-of-type(1) {
background-color: white;
}
&:nth-of-type(2) {
width: var(--pages-author-logo-diameter, 100px);
height: calc(var(--pages-author-logo-diameter, 100px) + 1rem);
background-color: white;
}
&:nth-of-type(3) {
background-color: white;
}
}
}
>div.room {
&:before {
background-color: #fff;
}
}
}
}
@layer amogus {
details.page#amogus>section.content {
background-color: red;
}
details.page[open]:has(> details.page#amogus > section.content > input:is(#shoot, #dead):checked):after {
outline: 2px solid var(--pages-button-background-color, #fff);
outline-offset: -2px;
color: var(--invert-pages-button-text-color, #fff);
background-color: var(--invert-pages-button-background-color, #000);
}
details.page:has(> details.page#amogus > section.content > input#shoot:checked) {
&:before {
background-color: #fff !important;
}
&:after {
outline: 2px solid var(--green, #42ff22) !important;
color: var(--green, #42ff22) !important;
}
}
details.page[open]:has(> details.page#amogus > section.content > input#dead:checked) {
&:after {
outline: 2px solid var(--red, #ff2222) !important;
color: var(--red, #ff2222) !important;
}
}
}
}
@layer animation {
@layer destiny {
@keyframes destiny-masha {
0% {
transform: translateX(-10px) translateY(10px);
}
100% {
transform: translateX(-20px) translateY(-20px);
}
}
@keyframes destiny-rotate {
0% {
rotate: -10deg;
}
100% {
rotate: 10deg;
}
}
@keyframes destiny-color {
0%,
30% {
font-size: 0.7rem;
font-weight: 300;
line-height: 0.7rem;
opacity: 1;
color: rgb(0, 0, 0);
}
100% {
font-size: 1.2rem;
font-weight: 900;
line-height: 1.5rem;
opacity: 1;
color: rgb(255, 0, 0);
filter: blur(0px);
}
}
@keyframes destiny-flow {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-1000px);
}
}
details.page#destiny>section.content {
>img#masha {
animation-name: destiny-masha;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}
>img.masha.red {
animation-name: destiny-masha;
animation-duration: 2s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}
>div#css {
animation-name: destiny-rotate;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
>div.color {
animation-name: destiny-color;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(1, 0, 0.5, 1);
>code.flow {
animation-name: destiny-flow;
animation-duration: 0.6s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
}
}
}
}
@layer story {
@keyframes marie_itself_breathing {
0% {
transform-origin: 100% 80%;
transform: rotate(0deg) translateY(0px);
}
100% {
transform-origin: 95% 90%;
transform: rotate(-1deg) translateY(3px);
}
}
@keyframes marie_forearm_rotate {
0% {
transform: rotate(0);
transform-origin: 40% 120%;
}
100% {
transform: rotate(2deg);
transform-origin: 40% 90%;
}
}
@keyframes storyflex {
0% {
background-color: #f00;
}
60%,
100% {
background-color: #000;
}
}
@keyframes tolstoy_sverkaet {
0%,
20% {
rotate: -5deg;
transform-origin: 60% 60%;
color: hsl(from var(--hint-text-color, #696969) h 30% 20%);
}
80%,
100% {
rotate: -8deg;
transform-origin: 60% 20%;
color: hsl(from var(--hint-text-color, #696969) h s 30%);
}
}
@keyframes tolstoy_huyarit {
0% {
top: 84%;
}
100% {
top: 87%;
}
}
@keyframes tolstoy_ebashit {
0% {
right: -9840%;
}
100% {
right: 6150%;
}
}
@keyframes marie_hand_rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(1deg) scaleY(1.05);
}
}
details.page#story {
&[open] {
animation-name: storyflex;
animation-duration: 0.4s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.6, 0, 0.2, 0.2);
>section.content>div#marie_itself_wrap {
>span#tolstoy_background {
animation-name: tolstoy_sverkaet;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
>div#marie_forearm_wrap {
>div#tolstoy {
animation-name: tolstoy_huyarit;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.5, 0, 0.35, 1);
>span {
animation-name: tolstoy_ebashit;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
}
>div#marie_hand_wrap {
animation-name: marie_hand_rotate;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
}
}
}
}
&:not([open])>section.content {
* {
animation-play-state: paused;
}
}
>section.content {
>div#marie_itself_wrap {
animation-name: marie_itself_breathing;
animation-duration: 2.2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.5, 0, 0.55, 1);
>div#marie_forearm_wrap {
animation-name: marie_forearm_rotate;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.5, 0, 0.35, 1);
}
}
}
}
}
@layer author {
@keyframes arsen-in-town {
0% {
opacity: 0;
left: -20vw;
}
40% {
opacity: 0.6;
}
100% {
opacity: 0;
left: -5vw;
}
}
@keyframes room-illuminate {
0% {
opacity: 0;
clip-path: polygon(0 100%, 100% 0%, 100% 0%, 100% 0%, 0% 100%, 0 100%);
}
40% {
opacity: 1;
}
100% {
opacity: 1;
clip-path: polygon(0 70%, 0% 0%, 100% 0%, 100% 100%, 40% 100%, 0 100%);
}
}
@keyframes masha-mouth-shut {
0%,
40% {
opacity: 1;
}
60%,
100% {
opacity: 0;
}
}
@keyframes masha-illuminate {
0%,
40% {
rotate: -5deg;
background-color: hsl(from white 0 100% 70%);
}
60%,
100% {
rotate: 0deg;
background-color: hsl(from white 0 100% 60%);
}
}
@keyframes determination-x {
0% {
transform: translateX(20%);
}
100% {
transform: translateX(-20%);
}
}
@keyframes determination-y {
0%,
5% {
transform: translateY(30px);
}
95%,
100% {
transform: translateY(-30px);
}
}
@keyframes determination-rotate {
0% {
rotate: 10deg;
}
100% {
rotate: -10deg;
}
}
@keyframes determination-border {
0% {
transform: rotate(0deg) translateY(9px);
}
100% {
transform: rotate(360deg) translateY(-9px);
}
}
@keyframes ebashilovo {
0%,
60% {
rotate: 0deg;
transform: scale(1);
}
65% {
rotate: -1.4deg;
transform: scale(1.06);
}
70% {
rotate: -1deg;
transform: scale(1);
}
80% {
rotate: -1deg;
transform: scale(1.04);
}
90%,
100% {
rotate: 0deg;
transform: scale(1);
}
}
body:has(details.page#amogus > section.content > input#shoot:checked) {
>img#mirzaev {
animation-name: arsen-in-town;
animation-duration: 0.8s;
animation-delay: 1.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
}
details.page#author {
>section.content {
>div.x {
>div.y {
>img#logo {
animation-name: unset;
}
}
}
}
}
}
details.page#author {
&:has(> summary:hover)>section.content>div.room {
z-index: 100;
animation-name: room-illuminate;
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.5, 0, 0, 1);
}
>section.content {
>div.room {
&:before {
animation-name: masha-mouth-shut;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(1, 0, 0, 1);
}
>div.illuminate {
animation-name: masha-illuminate;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(1, 0, 0, 1);
&:after {
animation: noise 0.6s steps(2) infinite;
}
}
}
>div.x {
animation-name: determination-x;
animation-duration: 1.8s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.5, 0, 0.55, 1);
>div.y {
animation-name: determination-y;
animation-duration: 2.2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1);
&:after {
animation: noise 0.6s steps(2) infinite;
}
>img#logo {
/* animation-name: determination-rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); */
animation-name: ebashilovo;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
}
>div.effects>div.border {
animation-name: determination-border;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
&:nth-of-type(1) {
animation-duration: 2s;
}
&:nth-of-type(2) {
animation-duration: 3s;
}
&:nth-of-type(3) {
animation-duration: 1.7s;
}
}
}
}
}
}
}
@layer amogus {
@keyframes secret-button {
0% {
right: -30%;
opacity: 0;
rotate: 30deg;
}
0%,
99% {
pointer-events: none;
}
100% {
right: var(--pages-page-padding, 1rem);
opacity: 1;
rotate: 0deg;
pointer-events: all;
}
}
@keyframes shoot {
0% {
width: 0%;
height: 0%;
/* rotate: -5deg; */
}
90% {
width: 100%;
height: 100%;
/* rotate: 0deg; */
}
}
@keyframes screamer {
0%,
67% {
opacity: 0;
cursor: unset;
filter: contrast(20) saturate(70) hue-rotate(40deg) brightness(10);
}
67.5% {
opacity: 1;
cursor: unset;
filter: contrast(20) saturate(70) hue-rotate(40deg) brightness(10);
}
70% {
opacity: 1;
cursor: help;
filter: contrast(1) saturate(0) hue-rotate(0deg) brightness(1);
}
100% {
opacity: 1;
cursor: help;
filter: contrast(2) saturate(0) hue-rotate(0deg) brightness(1);
}
}
@keyframes dead {
0%,
89% {
z-index: -400;
cursor: unset;
pointer-events: none;
}
90% {
z-index: -400;
cursor: unset;
pointer-events: none;
}
100% {
z-index: 600;
cursor: help;
pointer-events: all;
}
}
@keyframes flash {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
details.page#amogus[open]>section.content {
&:after {
animation: noise 0.6s steps(2) infinite;
animation-delay: 2s;
}
>label:has(+ input#shoot) {
animation-name: shoot;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: linear(0.05 0%,
0.05 5%,
0.1 10%,
0.1 20%,
0.2 25%,
0.2 35%,
0.4 40%,
0.4 89%,
1 90%);
}
>label:has(+ input#dead) {
animation-name: dead;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.35, 0.85, 0.6, 1);
}
>img#screamer {
animation-name: screamer;
animation-duration: 4s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
}
}
details.page {
&:has(> details.page#amogus > section.content > input#shoot:checked):before {
animation-name: flash;
animation-duration: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(1, 0, 0.7, 0.8);
}
&[open] {
>details.page#amogus:not([open])>summary {
animation-name: secret-button;
animation-duration: 0.7s;
animation-delay: 2s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.75, 0, 0, 0.45);
}
}
}
}
@layer effects {
@keyframes noise {
0% {
transform: translate3d(0, 9rem, 0);
}
10% {
transform: translate3d(-1rem, -4rem, 0);
}
20% {
transform: translate3d(-8rem, 2rem, 0);
}
30% {
transform: translate3d(9rem, -9rem, 0);
}
40% {
transform: translate3d(-2rem, 7rem, 0);
}
50% {
transform: translate3d(-9rem, -4rem, 0);
}
60% {
transform: translate3d(2rem, 6rem, 0);
}
70% {
transform: translate3d(7rem, -8rem, 0);
}
80% {
transform: translate3d(-9rem, 1rem, 0);
}
90% {
transform: translate3d(6rem, -5rem, 0);
}
to {
transform: translate3d(-7rem, 0, 0);
}
}
}
}
@layer demonstration {
:root {
@layer colorscheme {
@layer system {
--text-color: #fff;
--invert-text-color: #000;
--link-text-color: #7c84f7;
--link-hover-text-color: #56b8f3;
--link-active-text-color: #6f54d9;
--hint-text-color: #696969;
--background-color: #000;
--invert-background-color: #fff;
--section-background-color: #000;
--button-background-color: #000;
--invert-button-background-color: #fff;
--button-text-color: #fff;
--invert-button-text-color: #000;
--green: #42ff22;
--red: #ff2222;
}
@layer pages {
@layer page {
--pages-page-background-color: #000;
--pages-page-outline: 2px solid var(--invert-background-color, #fff);
}
@layer button {
--pages-button-background-color: #fff;
--invert-pages-button-background-color: #000;
--pages-button-next-background-color: #fff;
--invert-pages-button-next-background-color: #000;
--pages-button-previous-background-color: #fff;
--invert-pages-button-previous-background-color: #000;
--pages-button-text-color: #000;
--invert-pages-button-text-color: #fff;
--pages-button-next-text-color: #000;
--invertpages-button-next-text-color: #fff;
--pages-button-previous-text-color: #000;
--invertpages-button-previous-text-color: #fff;
}
}
}
@layer localization {
--localization-button-next: "Next";
--localization-button-previous: "Previous";
--localization-button-dead: "DEAD";
--localization-button-alive: "ALIVE";
}
color: var(--text-color, #fafafa);
font-family: "Geologica",
sans-serif;
}
body {
--gap: 2rem;
margin: unset;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: var(--background-color, #000);
}
@layer macros {
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}
input {
display: none;
}
h1 {
margin: unset;
margin-bottom: var(--gap, 2rem);
font-weight: 200;
}
strong:has(+ h1) {
margin-left: 2.5rem;
margin-bottom: -0.8rem;
font-family: "Cascadia Code", sans-serif;
font-weight: 200;
text-decoration: line-through;
color: red;
}
a {
font-family: "Cascadia Code", sans-serif;
text-decoration: unset;
color: var(--link-text-color, blue);
&:hover {
color: var(--link-hover-text-color, blue);
}
&:active,
&:focus {
color: var(--link-active-text-color, blue);
}
}
span#current_page {
z-index: 1000;
margin-top: var(--gap, 2rem);
padding: 0.4rem 1rem;
display: flex;
gap: 0.3rem;
border-radius: 0.75rem;
border: 2px solid var(--invert-background-color, #fff);
background-color: var(--background-color, #000);
&:after {
content: counter(page);
font-variant-numeric: tabular-nums;
}
}
body>img#mirzaev {
z-index: 1000;
position: absolute;
bottom: -17vh;
left: 2vw;
max-height: 400px;
height: 40vw;
opacity: 0;
}
body:has(details.page#author[open] > details.page:not([open]))>img#mirzaev {
/* opacity: 1; */
}
}
Reference in New Issue View Git Blame Copy Permalink