starting moving from codepen + amogus consequences
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 668 KiB After Width: | Height: | Size: 668 KiB |
|
Before Width: | Height: | Size: 127 KiB After Width: | Height: | Size: 127 KiB |
|
Before Width: | Height: | Size: 128 KiB After Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 967 KiB After Width: | Height: | Size: 967 KiB |
|
Before Width: | Height: | Size: 231 KiB After Width: | Height: | Size: 231 KiB |
|
Before Width: | Height: | Size: 360 KiB After Width: | Height: | Size: 360 KiB |
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 159 KiB After Width: | Height: | Size: 159 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 274 KiB After Width: | Height: | Size: 274 KiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 288 KiB After Width: | Height: | Size: 288 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 112 KiB |
|
|
@ -0,0 +1,907 @@
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
|
<title>Pages CSS CRIME</title>
|
||||||
|
|
||||||
|
<link type="text/css" rel="stylesheet" href="/index.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<strong>css crime</strong>
|
||||||
|
<h1>Pages</h1>
|
||||||
|
|
||||||
|
<details id="destiny" class="page unselectable" open="true">
|
||||||
|
<section class="content">
|
||||||
|
<img id="masha"
|
||||||
|
src="/stable/images/masha_compressed.png"
|
||||||
|
ondragstart="return false;" />
|
||||||
|
<img class="masha red"
|
||||||
|
src="/images/masha/masha_red_compressed.png"
|
||||||
|
ondragstart="return false;" />
|
||||||
|
<div id="css">
|
||||||
|
<div class="color">
|
||||||
|
<code class="flow">
|
||||||
|
@import
|
||||||
|
url("https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&family=Geologica:wght@100..900&display=swap");
|
||||||
|
|
||||||
|
@layers system interface content colorscheme animation demonstration;
|
||||||
|
|
||||||
|
@layer system {
|
||||||
|
:not(details.page) > details.page {
|
||||||
|
position: relative;
|
||||||
|
counter-reset: page 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(details.page) > details.page[open] > summary {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page {
|
||||||
|
--pages-page-width: max(20vw, 380px);
|
||||||
|
--pages-page-height: max(40vh, 370px);
|
||||||
|
--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 > details.page {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page[open] {
|
||||||
|
z-index: 10;
|
||||||
|
counter-increment: page 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page > :not(details, summary) {
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page > 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: min-content;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0.4rem 1rem;
|
||||||
|
display: flex;
|
||||||
|
gap: 0.2rem;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page[open] > summary {
|
||||||
|
left: var(--pages-page-padding, 1rem);
|
||||||
|
right: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page[open] > summary:before {
|
||||||
|
content: var(--localization-button-previous, "Previous");
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page[open] > details.page:not([open]) > summary:before {
|
||||||
|
content: var(--localization-button-next, "Next");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page > section.content > span:has(> :is(span, a).separated) {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page > section.content > :is(h2, h3) {
|
||||||
|
margin: unset;
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer author {
|
||||||
|
details.page#author > section.content {
|
||||||
|
--pages-author-avatar-diameter: 200px;
|
||||||
|
padding: var(--pages-page-padding, 1rem)
|
||||||
|
calc(var(--pages-page-padding, 1rem) + 0.5rem);
|
||||||
|
gap: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author > section.content > h2 {
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: "Cascadia Code";
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author > section.content > h2 + span#name {
|
||||||
|
margin-bottom: 1.2rem;
|
||||||
|
align-self: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-family: "Cascadia Code";
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author > section.content > span {
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
|
display: inline-flex;
|
||||||
|
font-family: "Cascadia Code";
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author > section.content > div.x:has(> div.y > img#avatar) {
|
||||||
|
--pages-author-avatar-diameter: 100px;
|
||||||
|
z-index: -10;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - (var(--pages-page-padding, 1rem) * 2 + 3rem));
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author > section.content > div.x > div.y:has(> img#avatar) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author > section.content > div.x > div.y > img#avatar {
|
||||||
|
z-index: 20;
|
||||||
|
position: absolute;
|
||||||
|
width: var(--pages-author-avatar-diameter, 100px);
|
||||||
|
height: var(--pages-author-avatar-diameter, 100px);
|
||||||
|
align-self: center;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 5rem 5rem 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer xiaomi {
|
||||||
|
details.page#xiaomi > section.content > img.xiaomi {
|
||||||
|
--pages-xiaomi-image-diameter: 120px;
|
||||||
|
position: absolute;
|
||||||
|
right: 15%;
|
||||||
|
bottom: 30%;
|
||||||
|
width: var(--pages-xiaomi-image-diameter, 120px);
|
||||||
|
height: var(--pages-xiaomi-image-diameter, 120px);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer destiny {
|
||||||
|
details.page#destiny > section.content > img#masha {
|
||||||
|
position: absolute;
|
||||||
|
top: -10%;
|
||||||
|
height: 150%;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#destiny > section.content > img.masha.red {
|
||||||
|
z-index: 100;
|
||||||
|
position: absolute;
|
||||||
|
top: -10%;
|
||||||
|
height: 150%;
|
||||||
|
align-self: center;
|
||||||
|
mix-blend-mode: overlay;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#destiny > section.content > 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; */
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#destiny > section.content > div#css > div.color {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#destiny > section.content > div#css > div.color > span.flow {
|
||||||
|
word-break: break-all;
|
||||||
|
position: absolute;
|
||||||
|
scale: 1.5;
|
||||||
|
font-family: "Cascadia Code", sans-serif;
|
||||||
|
/* font-size: 0.7rem; */
|
||||||
|
/* height: 130rem; */
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
/* line-height: 1rem; */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer license {
|
||||||
|
details.page#license > section.content > p {
|
||||||
|
margin: unset;
|
||||||
|
font-family: "Cascadia Code", sans-serif;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page > summary {
|
||||||
|
/* outline-offset: -2px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page > summary:hover {
|
||||||
|
/* outline-offset: 2px;
|
||||||
|
transition: outline-offset 0.1s ease-in; */
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page > summary:active {
|
||||||
|
filter: brightness(0.8);
|
||||||
|
/* outline-offset: -2px;
|
||||||
|
transition: outline-offset 0.05s ease-out; */
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page[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[open] > 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)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author
|
||||||
|
> section.content
|
||||||
|
> div.x
|
||||||
|
> div.y:has(> img#avatar)
|
||||||
|
> div.effects {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: var(--background-color, #000);
|
||||||
|
filter: contrast(50);
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author
|
||||||
|
> section.content
|
||||||
|
> div.x
|
||||||
|
> div.y:has(> img#avatar)
|
||||||
|
> div.effects
|
||||||
|
> div.border {
|
||||||
|
z-index: 10;
|
||||||
|
position: absolute;
|
||||||
|
width: calc(var(--pages-author-avatar-diameter, 100px) + 1rem);
|
||||||
|
height: var(--pages-author-avatar-diameter, 100px);
|
||||||
|
border-radius: 100%;
|
||||||
|
|
||||||
|
filter: blur(25px);
|
||||||
|
/* mix-blend-mode: multiply; */
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author
|
||||||
|
> section.content
|
||||||
|
> div.x
|
||||||
|
> div.y:has(> img#avatar)
|
||||||
|
> div.effects
|
||||||
|
> div.border:nth-of-type(1) {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author
|
||||||
|
> section.content
|
||||||
|
> div.x
|
||||||
|
> div.y:has(> img#avatar)
|
||||||
|
> div.effects
|
||||||
|
> div.border:nth-of-type(2) {
|
||||||
|
width: var(--pages-author-avatar-diameter, 100px);
|
||||||
|
height: calc(var(--pages-author-avatar-diameter, 100px) + 1rem);
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author
|
||||||
|
> section.content
|
||||||
|
> div.x
|
||||||
|
> div.y
|
||||||
|
> img#avatar
|
||||||
|
~ div.border:nth-of-type(3) {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer animation {
|
||||||
|
@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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author > section.content > div.x:has(> div.y > img#avatar) {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author > section.content > div.x > div.y:has(> img#avatar) {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author > section.content > div.x > div.y > img#avatar {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author
|
||||||
|
> section.content
|
||||||
|
> div.x
|
||||||
|
> div.y:has(> img#avatar)
|
||||||
|
> 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author
|
||||||
|
> section.content
|
||||||
|
> div.x
|
||||||
|
> div.y:has(> img#avatar)
|
||||||
|
> div.effects
|
||||||
|
> div.border:nth-of-type(1) {
|
||||||
|
animation-duration: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author
|
||||||
|
> section.content
|
||||||
|
> div.x
|
||||||
|
> div.y:has(> img#avatar)
|
||||||
|
> div.effects
|
||||||
|
> div.border:nth-of-type(2) {
|
||||||
|
animation-duration: 3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#author
|
||||||
|
> section.content
|
||||||
|
> div.x
|
||||||
|
> div.y:has(> img#avatar)
|
||||||
|
> div.effects
|
||||||
|
> div.border:nth-of-type(3) {
|
||||||
|
animation-duration: 1.7s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes page-from {
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
opacity: 1;
|
||||||
|
filter: blur(0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
top: -10px;
|
||||||
|
opacity: 0;
|
||||||
|
filter: blur(1px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes page-to {
|
||||||
|
0% {
|
||||||
|
top: 10px;
|
||||||
|
opacity: 0;
|
||||||
|
filter: blur(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
top: 0px;
|
||||||
|
opacity: 1;
|
||||||
|
filter: blur(0px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* details.page:has(> summary:focus) > section.content {
|
||||||
|
animation-name: page-to;
|
||||||
|
animation-duration: 0.1s;
|
||||||
|
animation-iteration-count: 1;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page[open]:has(> details.page > summary:focus) > section.content {
|
||||||
|
animation-name: page-from;
|
||||||
|
animation-duration: 0.1s;
|
||||||
|
animation-iteration-count: 1;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-timing-function: ease-in;
|
||||||
|
} */
|
||||||
|
|
||||||
|
/* details.page[open]:has(> summary:focus) > section.content {
|
||||||
|
animation-name: page-from;
|
||||||
|
animation-duration: 0.1s;
|
||||||
|
animation-iteration-count: 1;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page:has(> details.page[open] > summary:focus) > section.content {
|
||||||
|
animation-name: page-to;
|
||||||
|
animation-duration: 0.1s;
|
||||||
|
animation-iteration-count: 1;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-timing-function: ease-in;
|
||||||
|
} */
|
||||||
|
|
||||||
|
@keyframes destiny-masha {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-10px) translateY(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(-20px) translateY(-20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#destiny > section.content > img.masha.red {
|
||||||
|
animation-name: destiny-masha;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-delay: 0.4s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-direction: alternate;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes destiny-flow {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(-1000px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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-rotate {
|
||||||
|
0% {
|
||||||
|
rotate: -10deg;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
rotate: 10deg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#destiny > section.content > 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#destiny > section.content > div#css > 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
details.page#destiny > section.content > div#css > div.color > span.flow {
|
||||||
|
animation-name: destiny-flow;
|
||||||
|
animation-duration: 0.6s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer demonstration {
|
||||||
|
:root {
|
||||||
|
@layer colorscheme {
|
||||||
|
@layer system {
|
||||||
|
--text-color: #fff;
|
||||||
|
--link-text-color: #7c84f7;
|
||||||
|
--link-hover-text-color: #56b8f3;
|
||||||
|
--link-active-text-color: #6f54d9;
|
||||||
|
--background-color: #000;
|
||||||
|
--invert-background-color: #fff;
|
||||||
|
--section-background-color: #000;
|
||||||
|
--button-background-color: #000;
|
||||||
|
--button-text-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
--pages-button-next-background-color: #fff;
|
||||||
|
--pages-button-previous-background-color: #fff;
|
||||||
|
--pages-button-text-color: #000;
|
||||||
|
--pages-button-next-text-color: #000;
|
||||||
|
--pages-button-previous-text-color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer localization {
|
||||||
|
--localization-button-next: "Next";
|
||||||
|
--localization-button-previous: "Previous";
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
background-color: var(--background-color, #000);
|
||||||
|
}
|
||||||
|
|
||||||
|
.unselectable {
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--link-hover-text-color, blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:is(: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);
|
||||||
|
}
|
||||||
|
|
||||||
|
span#current_page:after {
|
||||||
|
content: counter(page);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<summary></summary>
|
||||||
|
<details id="story" class="page">
|
||||||
|
<section class="content">
|
||||||
|
<div id="marie_itself_wrap">
|
||||||
|
<img id="marie_itself"
|
||||||
|
src="/images/cap/marie_compressed.png"
|
||||||
|
alt="Marie itself" ondragstart="return false;">
|
||||||
|
|
||||||
|
<span id="tolstoy_background">
|
||||||
|
И одуренные молитвами, проповедями, воззваниями, процессиями, картинами, газетами, пушечное мясо, сотни
|
||||||
|
тысяч людей однообразно одетые, с разнообразными орудиями убийства, оставляя родителей, жен, детей, с тоской
|
||||||
|
на сердце, но с напущенным молодечеством, едут туда, где они, рискуя смертью, будут совершать самое ужасное
|
||||||
|
дело: убийство людей, которых они не знают и которые им ничего дурного не сделали. И за ними едут врачи,
|
||||||
|
сестры милосердия, почему-то полагающие, что дома они не могут служить простым, мирным, страдающим людям, а
|
||||||
|
могут служить только тем людям, которые заняты убийством друг друга. Остающиеся же дома радуются известиям
|
||||||
|
об убийстве людей и, когда узнают, что убитых японцев много, благодарят за это кого-то, кого они называют
|
||||||
|
Богом.
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div id="marie_forearm_wrap">
|
||||||
|
<img id="marie_forearm"
|
||||||
|
src="/images/cap/forearm_compressed.png"
|
||||||
|
alt="Marie forearm" ondragstart="return false;">
|
||||||
|
|
||||||
|
<div id="tolstoy">
|
||||||
|
<span>
|
||||||
|
И одуренные молитвами, проповедями, воззваниями, процессиями, картинами, газетами, пушечное мясо, сотни
|
||||||
|
тысяч людей однообразно одетые, с разнообразными орудиями убийства, оставляя родителей, жен, детей, с
|
||||||
|
тоской на сердце, но с напущенным молодечеством, едут туда, где они, рискуя смертью, будут совершать
|
||||||
|
самое ужасное дело: убийство людей, которых они не знают и которые им ничего дурного не сделали. И за
|
||||||
|
ними едут врачи, сестры милосердия, почему-то полагающие, что дома они не могут служить простым, мирным,
|
||||||
|
страдающим людям, а могут служить только тем людям, которые заняты убийством друг друга. Остающиеся же
|
||||||
|
дома радуются известиям об убийстве людей и, когда узнают, что убитых японцев много, благодарят за это
|
||||||
|
кого-то, кого они называют Богом.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="marie_hand_wrap">
|
||||||
|
<img id="marie_hand"
|
||||||
|
src="/images/cap/hand_compressed.png"
|
||||||
|
alt="Marie hand" ondragstart="return false;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="background"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<summary></summary>
|
||||||
|
<details id="adsfsdfdsf" class="page">
|
||||||
|
<section class="content">
|
||||||
|
<img id="sofa"
|
||||||
|
src="/images/sofa/transparent_compressed.png">
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<summary></summary>
|
||||||
|
<details id="code" class="page">
|
||||||
|
<section class="content">
|
||||||
|
<object data="/index.css" type="text/css"></object>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<summary></summary>
|
||||||
|
<details id="author" class="page">
|
||||||
|
<section class="content">
|
||||||
|
<h2>Author</h2>
|
||||||
|
<span id="name">Arsen Mirzaev Tatyano-Muradovich</span>
|
||||||
|
<span id="mail">Mail:<a class="separated" href="mailto:arsen@mirzaev.sexy">arsen@mirzaev.sexy</a></span>
|
||||||
|
<span id="demonstration">Demonstration:<a class="separated"
|
||||||
|
href="https://pages.svoboda.works">pages.svoboda.works</a></span>
|
||||||
|
<span id="repository">Repository:<a class="separated"
|
||||||
|
href="https://git.svoboda.works/mirzaev/css-crime-pages">mirzaev/css-crime-pages</a></span>
|
||||||
|
<div class="x">
|
||||||
|
<div class="y">
|
||||||
|
<img id="logo"
|
||||||
|
src="/images/system/gaturo.svg"
|
||||||
|
alt="mirzaev logotype" ondragstart="return false;">
|
||||||
|
<div class="effects">
|
||||||
|
<div class="border"></div>
|
||||||
|
<div class="border"></div>
|
||||||
|
<div class="border"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="room">
|
||||||
|
<div class="illuminate"></div>
|
||||||
|
<img id="lezhit"
|
||||||
|
src="/images/masha/lezhit_small_lines_compressed.png"
|
||||||
|
alt="Arsen Mirzaev Tatyano-Muradovich" ondragstart="return false;">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<summary></summary>
|
||||||
|
<details id="license" class="page">
|
||||||
|
<section class="content">
|
||||||
|
<h3>License</h3>
|
||||||
|
<p>
|
||||||
|
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE<br>
|
||||||
|
Version 2, December 2004<br>
|
||||||
|
<br>
|
||||||
|
Copyright (C) 2004 Sam Hocevar <a href="mailto:sam@hocevar.net"><sam@hocevar.net></a><br>
|
||||||
|
<br>
|
||||||
|
Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and
|
||||||
|
changing it is allowed as long as the name is changed.<br>
|
||||||
|
<br>
|
||||||
|
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
|
||||||
|
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION<br>
|
||||||
|
<br>
|
||||||
|
0. You just DO WHAT THE FUCK YOU WANT TO.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<summary></summary>
|
||||||
|
<details id="amogus" class="page">
|
||||||
|
<section class="content">
|
||||||
|
|
||||||
|
<label for="dead"></label>
|
||||||
|
<input id="dead" type="radio">
|
||||||
|
|
||||||
|
<label for="shoot">
|
||||||
|
<img id="enemy"
|
||||||
|
src="/images/amogus/transparent_compressed.png"
|
||||||
|
alt="arsen mirzaev amoguus" ondragstart="return false;">
|
||||||
|
</label>
|
||||||
|
<input id="shoot" type="radio">
|
||||||
|
|
||||||
|
<img id="screamer"
|
||||||
|
src="/images/screamers/white_cat.jpg"
|
||||||
|
alt="screamer" ondragstart="return false;">
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<summary></summary>
|
||||||
|
</details>
|
||||||
|
</details>
|
||||||
|
</details>
|
||||||
|
</details>
|
||||||
|
</details>
|
||||||
|
</details>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<span id="current_page" class="unselectable">Page</span>
|
||||||
|
|
||||||
|
<img id="mirzaev"
|
||||||
|
src="/images/arsen/transparent_compressed.png"
|
||||||
|
alt="MIRZAEV" ondragstart="return false;">
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||