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