pcm awards
parent
c35d69ba06
commit
c35c852b90
GPG Key ID:
4D09E4B0A7264746
|
|
@ -1,11 +1,17 @@
|
|||
#awards-container {
|
||||
position:fixed;
|
||||
pointer-events: none;
|
||||
z-index:9999;
|
||||
position:fixed;
|
||||
pointer-events: none;
|
||||
z-index:9999;
|
||||
}
|
||||
|
||||
#awards-container > div {
|
||||
position: absolute;
|
||||
.stackable-container > div {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.stackable-container div,
|
||||
.stackable-container img, .ricardo {
|
||||
animation-iteration-count: infinite !important;
|
||||
animation-timing-function: linear !important;
|
||||
}
|
||||
|
||||
/*seal*/
|
||||
|
|
@ -20,34 +26,18 @@ position: absolute;
|
|||
}
|
||||
}
|
||||
|
||||
.wholesome {animation: sealX 9s linear infinite}
|
||||
.wholesome img {animation: sealY 10s linear infinite}
|
||||
.wholesome {animation: sealX 9s alternate}
|
||||
.wholesome img {animation: sealY 10s alternate}
|
||||
|
||||
.wholesome1 {animation-direction: alternate}
|
||||
.wholesome1 img {animation-direction: alternate}
|
||||
.wholesome2 {animation-direction: alternate-reverse}
|
||||
.wholesome2 img {animation-direction: alternate-reverse}
|
||||
.wholesome3 {animation-direction: alternate}
|
||||
.wholesome3 img {animation-direction: alternate-reverse}
|
||||
.wholesome4 {animation-direction: alternate-reverse}
|
||||
.wholesome4 img {animation-direction: alternate}
|
||||
.wholesome:nth-child(even),
|
||||
.wholesome:nth-child(n+2):nth-child(n+3) img
|
||||
{animation-direction: alternate-reverse}
|
||||
|
||||
@keyframes sealX {
|
||||
from {} to {transform: translateX(98vw)}
|
||||
100% {transform: translateX(98vw)}
|
||||
}
|
||||
@keyframes sealY {
|
||||
from {} to {transform: translateY(85vh)}
|
||||
}
|
||||
|
||||
/*train common*/
|
||||
.train1, .scooter1 {top:2%}
|
||||
.train2, .scooter2 {top:27%}
|
||||
.train3, .scooter3 {top:52%}
|
||||
.train4, .scooter4 {top:77%}
|
||||
|
||||
@keyframes train {
|
||||
from {transform: translateX(-3vw)}
|
||||
to {transform: translateX(99vw)}
|
||||
100% {transform: translateY(85vh)}
|
||||
}
|
||||
|
||||
/*train*/
|
||||
|
|
@ -62,9 +52,19 @@ position: absolute;
|
|||
}
|
||||
}
|
||||
|
||||
.train{animation: train 11s linear infinite;}
|
||||
.train:nth-of-type(odd) {animation-direction: reverse;}
|
||||
.train:nth-of-type(odd) img {transform: scaleX(-1);}
|
||||
.train:nth-child(1), .scooter:nth-child(1) {top:2%}
|
||||
.train:nth-child(2), .scooter:nth-child(2) {top:27%}
|
||||
.train:nth-child(3), .scooter:nth-child(3) {top:52%}
|
||||
.train:nth-child(4), .scooter:nth-child(4) {top:77%}
|
||||
|
||||
.train {animation: train 12s;}
|
||||
.train:nth-child(odd) {animation-direction: reverse;}
|
||||
.train:nth-child(odd) img {transform: scaleX(-1);}
|
||||
|
||||
@keyframes train {
|
||||
from {transform: translateX(-3vw)}
|
||||
to {transform: translateX(99vw)}
|
||||
}
|
||||
|
||||
/*scooter*/
|
||||
.scooter img {
|
||||
|
|
@ -78,9 +78,9 @@ position: absolute;
|
|||
}
|
||||
}
|
||||
|
||||
.scooter {animation: train 11s linear infinite;}
|
||||
.scooter:nth-of-type(even) {animation-direction: reverse;}
|
||||
.scooter:nth-of-type(even) img {transform: scaleX(-1);}
|
||||
.scooter {animation: train 14s;}
|
||||
.scooter:nth-child(even) {animation-direction: reverse;}
|
||||
.scooter:nth-child(even) img {transform: scaleX(-1);}
|
||||
|
||||
/*confetti*/
|
||||
.confetti {
|
||||
|
|
@ -102,9 +102,9 @@ position: absolute;
|
|||
max-height: min(30vw,15rem);
|
||||
}
|
||||
|
||||
.ricardo1 {animation: ricardo1Xa 5.8s linear infinite, ricardo1Xb 11.6s linear infinite, ricardo1Y 23.2s linear infinite;}
|
||||
.ricardo2 {animation: ricardo2 8.5s linear infinite;}
|
||||
.ricardo3 {animation: ricardo3 10s linear infinite;}
|
||||
.ricardo1 {animation: ricardo1Xa 5.8s, ricardo1Xb 11.6s, ricardo1Y 23.2s;}
|
||||
.ricardo2 {animation: ricardo2 8.5s;}
|
||||
.ricardo3 {animation: ricardo3 10s;}
|
||||
|
||||
@keyframes ricardo1Xa {
|
||||
0% {right: -200px}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
<div id="awards-container" class="w-100 h-100">
|
||||
{% macro stackable_award(award, src, alt) %}
|
||||
<div class="stackable-container">
|
||||
{% for i in range(min(p.award_count(award, v), 4)) %}
|
||||
<div class="{{award}} {{award}}{{i+1}}">
|
||||
<div class="{{award}}">
|
||||
<img alt="{{alt}}" src="{{src}}">
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% if p.award_count("wholesome", v) %}
|
||||
{% set wholesome = '/i/wholesome.webp' if SITE_NAME == PCM else '/e/marseywholesome.webp' %}
|
||||
{% set wholesome = '/i/wholesome.webp' if SITE_NAME == 'PCM' else '/e/marseywholesome.webp' %}
|
||||
{{ stackable_award('wholesome', wholesome, ':#marseywholesome:') }}
|
||||
{% endif %}
|
||||
|
||||
|
|
@ -22,7 +24,7 @@
|
|||
|
||||
{% if p.award_count("firework", v) %}
|
||||
<script defer src="{{'js/fireworks.js' | asset}}"></script>
|
||||
{{ stackable_award('firework', i) }}
|
||||
{{ stackable_award('firework') }}
|
||||
{% endif %}
|
||||
|
||||
{% if p.award_count("confetti", v) %}
|
||||
|
|
@ -73,4 +75,8 @@
|
|||
</style>
|
||||
{% endif %}
|
||||
|
||||
{% if SITE_NAME == 'PCM' %}
|
||||
{% include "awards_PCM.html" %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,199 +1,11 @@
|
|||
{% if p.award_count("croag", v) %}
|
||||
<style>
|
||||
.croag {
|
||||
position:fixed;
|
||||
z-index:9999;
|
||||
pointer-events: none;
|
||||
}
|
||||
.croag1 {
|
||||
top: 15%
|
||||
}
|
||||
.croag2 {
|
||||
top: 40%
|
||||
}
|
||||
.croag3 {
|
||||
top: 65%
|
||||
}
|
||||
.croag4 {
|
||||
top: 90%
|
||||
}
|
||||
.croagimg {
|
||||
width: 169px !important;
|
||||
height: 68px !important;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.croagimg {
|
||||
width: 100px !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<marquee class="croag croag1" direction="left" scrollamount=10 width="100%">
|
||||
<img alt="croag" class="croagimg mirrored" src="/i/PCM/croag.webp?v=2000">
|
||||
</marquee>
|
||||
|
||||
{% if p.award_count("croag", v) > 1 %}
|
||||
<marquee class="croag croag2" direction="right" scrollamount=10 width="100%">
|
||||
<img alt="croag" class="croagimg" src="/i/PCM/croag.webp?v=2000">
|
||||
</marquee>
|
||||
{% endif %}
|
||||
|
||||
{% if p.award_count("croag", v) > 2 %}
|
||||
<marquee class="croag croag3" direction="left" scrollamount=10 width="100%">
|
||||
<img alt="croag" class="croagimg mirrored" src="/i/PCM/croag.webp?v=2000">
|
||||
</marquee>
|
||||
{% endif %}
|
||||
|
||||
{% if p.award_count("croag", v) > 3 %}
|
||||
<marquee class="croag croag4" direction="right" scrollamount=10 width="100%">
|
||||
<img alt="croag" class="croagimg" src="/i/PCM/croag.webp?v=2000">
|
||||
</marquee>
|
||||
{% endif %}
|
||||
{{ stackable_award('croag', '/i/PCM/croag.webp', 'croag') }}
|
||||
{% endif %}
|
||||
|
||||
{% if p.award_count("toe", v) %}
|
||||
{% if g.inferior_browser %}
|
||||
<style>
|
||||
.toeimg {
|
||||
width: 100px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.toeimg {
|
||||
width: 30px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.toe {
|
||||
position:fixed;
|
||||
z-index:9999;
|
||||
pointer-events: none;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
@keyframes moveX {
|
||||
from {} to {transform: translateX(98vw)}
|
||||
}
|
||||
|
||||
@keyframes moveY {
|
||||
from {} to {transform: translateY(90vh)}
|
||||
}
|
||||
|
||||
.toe1 {
|
||||
animation: moveX 4s linear 0s infinite alternate !important;
|
||||
animation-delay:0s;
|
||||
}
|
||||
.toe1 > img {
|
||||
animation: moveY 6.8s linear 0s infinite alternate !important;
|
||||
}
|
||||
</style>
|
||||
<div class="toe toe1" height="100%" width="100%">
|
||||
<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
|
||||
</div>
|
||||
|
||||
{% if p.award_count("toe", v) > 1 %}
|
||||
<style>
|
||||
.toe2 {
|
||||
animation: moveX 5s linear 0s infinite alternate !important;
|
||||
animation-delay:1s;
|
||||
}
|
||||
.toe2 > img {
|
||||
animation: moveY 8s linear 0s infinite alternate !important;
|
||||
animation-delay:1s;
|
||||
}
|
||||
</style>
|
||||
<div class="toe toe2" height="100%" width="100%">
|
||||
<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if p.award_count("toe", v) > 2 %}
|
||||
<style>
|
||||
.toe3 {
|
||||
animation: moveX 4s linear 0s infinite alternate !important;
|
||||
animation-delay:2s;
|
||||
}
|
||||
.toe3 > img {
|
||||
animation: moveY 5s linear 0s infinite alternate !important;
|
||||
animation-delay:2s;
|
||||
}
|
||||
</style>
|
||||
<div class="toe toe3" height="100%" width="100%">
|
||||
<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if p.award_count("toe", v) > 3 %}
|
||||
<style>
|
||||
.toe4 {
|
||||
animation: moveX 5s linear 0s infinite alternate !important;
|
||||
animation-delay:3s;
|
||||
}
|
||||
.toe4 > img {
|
||||
animation: moveY 6.8s linear 0s infinite alternate !important;
|
||||
animation-delay:3s;
|
||||
}
|
||||
</style>
|
||||
<div class="toe toe4" height="100%" width="100%">
|
||||
<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<style>
|
||||
.toe {
|
||||
position:fixed;
|
||||
z-index:9999;
|
||||
pointer-events: none;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.toeimg {
|
||||
width: 100px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.toeimg {
|
||||
width: 30px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="toe" height="100%" width="100%">
|
||||
<marquee class="toe" scrollamount=10 behavior="alternate" direction="up" height="100%" width="100%">
|
||||
<marquee direction="right" scrollamount=10 behavior="alternate" height="100%" width="100%">
|
||||
<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
|
||||
</marquee>
|
||||
</marquee>
|
||||
</div>
|
||||
|
||||
{% if p.award_count("toe", v) > 1 %}
|
||||
<marquee class="toe" scrollamount=10 behavior="alternate" direction="down" height="100%">
|
||||
<marquee direction="right" scrollamount=10 behavior="alternate" width="100%">
|
||||
<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
|
||||
</marquee>
|
||||
</marquee>
|
||||
{% endif %}
|
||||
|
||||
{% if p.award_count("toe", v) > 2 %}
|
||||
<marquee class="toe" scrollamount=10 behavior="alternate" direction="up" height="100%">
|
||||
<marquee direction="left" scrollamount=10 behavior="alternate" width="100%">
|
||||
<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
|
||||
</marquee>
|
||||
</marquee>
|
||||
{% endif %}
|
||||
|
||||
{% if p.award_count("toe", v) > 3 %}
|
||||
<marquee class="toe" scrollamount=10 behavior="alternate" direction="down" height="100%">
|
||||
<marquee direction="left" scrollamount=10 behavior="alternate" width="100%">
|
||||
<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
|
||||
</marquee>
|
||||
</marquee>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{{ stackable_award('toe', '/i/PCM/toe.webp', "Blade's toe") }}
|
||||
{% endif %}
|
||||
|
||||
{% if p.award_count("crab", v) %}
|
||||
<script>
|
||||
let audio = new Audio('/assets/media/crab.mp3');
|
||||
|
|
@ -207,3 +19,45 @@
|
|||
prepare_to_pause(audio)
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.toe img {
|
||||
width: 100px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.toe img {
|
||||
width: 30px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.toe {animation: sealX 8s alternate; animation-delay: -1s}
|
||||
.toe img {animation: sealY 11s alternate-reverse; animation-delay: -1s}
|
||||
|
||||
.toe:nth-child(even) {animation-direction: alternate-reverse}
|
||||
.toe:nth-child(n+2):nth-child(n+3) img {animation-direction: alternate}
|
||||
|
||||
.croag img {
|
||||
width: 169px !important;
|
||||
height: 68px !important;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.croag img {
|
||||
width: 100px !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.croag:nth-child(1) {top:2%}
|
||||
.croag:nth-child(2) {top:27%}
|
||||
.croag:nth-child(3) {top:52%}
|
||||
.croag:nth-child(4) {top:77%}
|
||||
|
||||
.croag {margin-top:10vh; animation-delay:-1s !important}
|
||||
|
||||
.croag {animation: train 14s;}
|
||||
.croag:nth-child(odd) {animation-direction: reverse;}
|
||||
.croag:nth-child(odd) img {transform: scaleX(-1);}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,9 +16,6 @@
|
|||
</style>
|
||||
|
||||
{% include "awards.html" %}
|
||||
{% if SITE_NAME == 'PCM' %}
|
||||
{% include "awards_PCM.html" %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% set ups=p.upvotes %}
|
||||
{% set downs=p.downvotes %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue