Шутка "Свежая трава"
This commit is contained in:
@@ -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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user