forked from rDrama/rDrama
fix spider award on mobile
parent
81d313424d
commit
a4ee73ad6d
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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) %}
|
||||||
|
|
Loading…
Reference in New Issue