# Pages CSS CRIME

css crime

# Pages

`@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; } }`
И одуренные молитвами, проповедями, воззваниями, процессиями, картинами, газетами, пушечное мясо, сотни тысяч людей однообразно одетые, с разнообразными орудиями убийства, оставляя родителей, жен, детей, с тоской на сердце, но с напущенным молодечеством, едут туда, где они, рискуя смертью, будут совершать самое ужасное дело: убийство людей, которых они не знают и которые им ничего дурного не сделали. И за ними едут врачи, сестры милосердия, почему-то полагающие, что дома они не могут служить простым, мирным, страдающим людям, а могут служить только тем людям, которые заняты убийством друг друга. Остающиеся же дома радуются известиям об убийстве людей и, когда узнают, что убитых японцев много, благодарят за это кого-то, кого они называют Богом.
И одуренные молитвами, проповедями, воззваниями, процессиями, картинами, газетами, пушечное мясо, сотни тысяч людей однообразно одетые, с разнообразными орудиями убийства, оставляя родителей, жен, детей, с тоской на сердце, но с напущенным молодечеством, едут туда, где они, рискуя смертью, будут совершать самое ужасное дело: убийство людей, которых они не знают и которые им ничего дурного не сделали. И за ними едут врачи, сестры милосердия, почему-то полагающие, что дома они не могут служить простым, мирным, страдающим людям, а могут служить только тем людям, которые заняты убийством друг друга. Остающиеся же дома радуются известиям об убийстве людей и, когда узнают, что убитых японцев много, благодарят за это кого-то, кого они называют Богом.

## Author

Arsen Mirzaev Tatyano-Muradovich Mail:arsen@mirzaev.sexy Demonstration:pages.svoboda.works Repository:mirzaev/css-crime-pages

### License

DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
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.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.

Page