forked from rDrama/rDrama
90 lines
1.7 KiB
HTML
90 lines
1.7 KiB
HTML
![]() |
<!-- For use in Submission (threads) page only -->
|
||
|
<!-- Include in /templates/submission/submission.html -->
|
||
|
<!-- Requires `p` object -->
|
||
|
|
||
|
<img class="train1" src="/assets/images/emojis/marseytrain.webp">
|
||
|
|
||
|
{% if p.award_count("train") > 1 %}
|
||
|
<img class="train2" src="/assets/images/emojis/marseytrain.webp">
|
||
|
{% endif %}
|
||
|
|
||
|
{% if p.award_count("train") > 2 %}
|
||
|
<img class="train3" src="/assets/images/emojis/marseytrain.webp">
|
||
|
{% endif %}
|
||
|
|
||
|
{% if p.award_count("train") > 3 %}
|
||
|
<img class="train4" src="/assets/images/emojis/marseytrain.webp">
|
||
|
{% endif %}
|
||
|
|
||
|
<style>
|
||
|
@keyframes train {
|
||
|
0% {
|
||
|
left: 0%;
|
||
|
}
|
||
|
100% {
|
||
|
left: 100%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes trainrev {
|
||
|
0% {
|
||
|
left: 100%;
|
||
|
}
|
||
|
100% {
|
||
|
left: 0%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 768px) {
|
||
|
.train1 {
|
||
|
position: fixed;
|
||
|
z-index: 10;
|
||
|
width: 35px;
|
||
|
animation: train 3s linear infinite !important;
|
||
|
}
|
||
|
.train2 {
|
||
|
display: none !important;
|
||
|
}
|
||
|
.train3 {
|
||
|
display: none !important;
|
||
|
}
|
||
|
.train4 {
|
||
|
display: none !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 768px) {
|
||
|
.train1 {
|
||
|
position: absolute;
|
||
|
z-index: 10;
|
||
|
width: 100px;
|
||
|
animation: trainrev 5s linear infinite !important;
|
||
|
transform: scaleX(-1);
|
||
|
-webkit-transform: scaleX(-1);
|
||
|
top: 35%
|
||
|
}
|
||
|
.train2 {
|
||
|
position: absolute;
|
||
|
z-index: 10;
|
||
|
width: 100px;
|
||
|
animation: train 5s linear infinite !important;
|
||
|
top: 10%
|
||
|
}
|
||
|
.train3 {
|
||
|
position: absolute;
|
||
|
z-index: 10;
|
||
|
width: 100px;
|
||
|
animation: train 5s linear infinite !important;
|
||
|
top: 60%
|
||
|
}
|
||
|
.train4 {
|
||
|
position: absolute;
|
||
|
z-index: 10;
|
||
|
width: 100px;
|
||
|
animation: trainrev 5s linear infinite !important;
|
||
|
transform: scaleX(-1);
|
||
|
-webkit-transform: scaleX(-1);
|
||
|
top: 85%
|
||
|
}
|
||
|
}
|
||
|
</style>
|