Шутка "Свежая трава"

This commit is contained in:
2024-04-01 00:48:19 +04:00
parent 0213eb1ca3
commit 3dbabfbf0c
9 changed files with 836 additions and 69 deletions
+16
View File
@@ -0,0 +1,16 @@
<div class="april-fools__joke__fresh-grass">
<div class="april-fools__joke__fresh-grass__window">
<h4>А ты трогал сегодня траву?</h4>
<img class="april-fools__joke__fresh-grass__image"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Green_Grass.JPG/1280px-Green_Grass.JPG"
alt="Здесь должная быть трава, но что-то сломалось... Притворись, что она здесь есть, хорошо?">
<small>
Изображение травы взято с
<a href="https://commons.wikimedia.org/wiki/File:Green_Grass.JPG">WikiMedia</a>
под лицензией
<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0 DEED</a>.
</small>
</div>
</div>
+127 -63
View File
@@ -1,65 +1,129 @@
<style class="april-fools__styles">
.april-fools__button {
position: fixed;
bottom: 0.2rem;
right: 0.2rem;
padding: 0;
font-size: 3rem;
border: 0 solid;
background: transparent none;
opacity: 0.3;
transition: 0.4s all;
cursor: pointer;
}
.april-fools__button:hover {
opacity: 1;
}
.april-fools__joke-row {
border-bottom: 1px solid black;
}
.april-fools__joke-row:first-of-type {
border-top: 1px solid black;
}
.april-fools__joke {
display: flex;
flex-flow: row wrap;
padding: 10px;
opacity: 0.5;
justify-content: space-between;
align-items: center;
gap: 1ch;
cursor: pointer;
}
.april-fools__joke:hover {
text-shadow: 0 0 black;
}
.april-fools__joke:before {
display: block;
flex: 0 0 2ch;
text-align: center;
content: "✔";
opacity: 0;
}
input.april-fools__joke-input:checked + .april-fools__joke {
opacity: 1;
}
input.april-fools__joke-input:checked + .april-fools__joke:before {
opacity: 1;
}
.april-fools__joke .april-fools__joke-title {
flex: 1 auto;
font-weight: bold;
}
.april-fools__joke .april-fools__joke-description {
flex: 1 auto;
text-align: right;
}
.april-fools__joke .april-fools__joke-chance {
flex: 0 0 4ch;
text-align: right;
}
.april-fools__content .april-fools__reset-button {
display: block;
margin: 10px auto;
}
.april-fools__button {
position: fixed;
bottom: 0.2rem;
right: 0.2rem;
padding: 0;
font-size: 3rem;
border: 0 solid;
background: transparent none;
opacity: 0.3;
transition: 0.4s all;
cursor: pointer;
}
.april-fools__button:hover {
opacity: 1;
}
.april-fools__joke-row {
border-bottom: 1px solid black;
}
.april-fools__joke-row:first-of-type {
border-top: 1px solid black;
}
.april-fools__joke {
display: flex;
flex-flow: row wrap;
padding: 10px;
opacity: 0.5;
justify-content: space-between;
align-items: center;
gap: 1ch;
cursor: pointer;
}
.april-fools__joke:hover {
text-shadow: 0 0 black;
}
.april-fools__joke:before {
display: block;
flex: 0 0 2ch;
text-align: center;
content: "✔";
opacity: 0;
}
input.april-fools__joke-input:checked + .april-fools__joke {
opacity: 1;
}
input.april-fools__joke-input:checked + .april-fools__joke:before {
opacity: 1;
}
.april-fools__joke .april-fools__joke-title {
flex: 1 auto;
font-weight: bold;
}
.april-fools__joke .april-fools__joke-description {
flex: 1 auto;
text-align: right;
}
.april-fools__joke .april-fools__joke-chance {
flex: 0 0 4ch;
text-align: right;
}
.april-fools__content .april-fools__reset-button {
display: block;
margin: 10px auto;
}
/* Шутка "Свежая трава" */
html:has(.april-fools__joke__fresh-grass),
body:has(.april-fools__joke__fresh-grass) {
position: fixed;
width: 100%;
left: 0;
top: var(--fresh-grass-body-top);
}
.april-fools__joke__fresh-grass {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #008000C0;
z-index: 1000;
}
.april-fools__joke__fresh-grass__window {
height: 100%;
width: 100%;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
user-select: none;
}
.april-fools__joke__fresh-grass__window h4 {
position: absolute;
top: 0;
color: #FFFFFF;
margin: 1vh 0;
font-size: 2vh;
line-height: 2vh;
text-align: center;
}
.april-fools__joke__fresh-grass__window small {
position: absolute;
bottom: 0;
}
.april-fools__joke__fresh-grass__window img {
display: block;
max-width: 10vw;
max-height: 10vh;
}
</style>