forked from rDrama/rDrama
1
0
Fork 0

fix spider award on mobile

master
Aevann 2023-10-20 00:33:17 +03:00
parent 81d313424d
commit a4ee73ad6d
2 changed files with 55 additions and 44 deletions

View File

@ -232,43 +232,19 @@ body::after {
.spider:nth-child(2) { .spider:nth-child(2) {
animation-delay: 250ms; animation-delay: 250ms;
animation-duration: 2100ms; animation-duration: 2100ms;
left: 20%; left: 30%;
} }
.spider:nth-child(3) { .spider:nth-child(3) {
animation-delay: 300ms; animation-delay: 300ms;
animation-duration: 1600ms; animation-duration: 1600ms;
left: 30%; left: 50%;
} }
.spider:nth-child(4) { .spider:nth-child(4) {
animation-delay: 400ms; animation-delay: 400ms;
animation-duration: 1800ms;
left: 40%;
}
.spider:nth-child(5) {
animation-delay: 240ms;
animation-duration: 1900ms;
left: 50%;
}
.spider:nth-child(6) {
animation-delay: 250ms;
animation-duration: 2300ms;
left: 60%;
}
.spider:nth-child(7) {
animation-delay: 400ms;
animation-duration: 2100ms;
left: 70%;
}
.spider:nth-child(8) {
animation-delay: 4000ms;
animation-duration: 200ms; animation-duration: 200ms;
left: 80%; left: 70%;
} }
.spider { .spider {
@ -283,6 +259,30 @@ body::after {
pointer-events: none; pointer-events: none;
} }
@media (max-width: 768px) {
.spider {
zoom: 0.5;
}
}
@media (max-width: 768px) {
@supports (-moz-appearance:none) {
.spider {
left: 5%;
}
.spider:nth-child(2) {
left: 20%;
}
.spider:nth-child(3) {
left: 35%;
}
.spider:nth-child(4) {
left: 50%;
}
}
}
.spider:hover .body { .spider:hover .body {
transform: rotate(20deg); transform: rotate(20deg);
transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;
@ -327,19 +327,18 @@ body::after {
.spider .body .eye:after { .spider .body .eye:after {
background: #222; background: #222;
width: 7px; width: 16px;
height: 7px; height: 16px;
content: ""; content: "";
display: block; display: block;
margin: 55%; margin: 55%;
border-radius: 50%; border-radius: 50%;
animation: look 4s infinite; animation: look 4s infinite;
} }
.spider:nth-child(8) .body .eye { .spider:nth-child(4) .body .eye {
background-color: #FF0000; background-color: #FF0000;
background: radial-gradient(#FF9B9B, #FF0000); background: radial-gradient(#FF9B9B, #FF0000);
} }
.spider:nth-child(odd) .body .eye:after { .spider:nth-child(odd) .body .eye:after {
@ -441,7 +440,7 @@ body::after {
position: fixed; position: fixed;
bottom:0; bottom:0;
left: 0; left: 0;
width:100%; width: 100%;
height: 100%; height: 100%;
z-index: 1031; z-index: 1031;
} }
@ -724,11 +723,6 @@ body::after {
background-image: url('/assets/events/homoween/images/cursormarsey.webp?x=6') !important; background-image: url('/assets/events/homoween/images/cursormarsey.webp?x=6') !important;
} }
.spider .body .eye::after {
width: 16px;
height: 16px;
}
.post-flair { .post-flair {
padding-top: 5px !important; padding-top: 5px !important;
} }

View File

@ -16,11 +16,28 @@
{% endif %} {% endif %}
{% if p.award_count("spiders", v) %} {% if p.award_count("spiders", v) %}
{% set spiders = p.award_count("spiders", v) %} <div>
{% set spiders = p.award_count("spiders", v) %}
{% for i in range(spiders) %} {% for i in range(spiders) %}
{% include "events/homoween/spider.html" %} <div class="spider">
{% endfor %} <div class="spiderweb"></div>
<div class="body">
<div class="eye left"></div>
<div class="eye right"></div>
</div>
<div class="legs left">
<div class="leg"></div>
<div class="leg"></div>
<div class="leg"></div>
</div>
<div class="legs right">
<div class="leg"></div>
<div class="leg"></div>
<div class="leg"></div>
</div>
</div>
{% endfor %}
</div>
{% endif %} {% endif %}
{% if p.award_count("fog", v) %} {% if p.award_count("fog", v) %}