From 27b2adf9894f1bb16f1af333b790545808b7b2c9 Mon Sep 17 00:00:00 2001
From: Aevann <randomname42029@gmail.com>
Date: Mon, 27 Feb 2023 15:26:55 +0200
Subject: [PATCH] fix tilt award

---
 files/assets/css/awards.css     | 59 ++++++++++++++++++++++++---------
 files/templates/comments.html   |  5 ++-
 files/templates/submission.html |  2 +-
 3 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/files/assets/css/awards.css b/files/assets/css/awards.css
index ea84e6e06..366241e9c 100644
--- a/files/assets/css/awards.css
+++ b/files/assets/css/awards.css
@@ -158,24 +158,53 @@
 	100% {transform: translateX(-15vw) rotate(180deg); top: 0; bottom: unset;}
 }
 
-@keyframes tilt {
-	0% {transform: rotate(0deg);}
-	25% {transform: rotate({{p.award_count("tilt", v)}}deg);}
-	75% {transform: rotate(-{{p.award_count("tilt", v)}}deg);}
-	100% {transform: rotate(0deg);}
-}
-@media (max-width: 720px) {
-	@keyframes tilt {
-		0% {transform: rotate(0deg);}
-		25% {transform: rotate({{p.award_count("tilt", v)/4}}deg);}
-		75% {transform: rotate(-{{p.award_count("tilt", v)/4}}deg);}
-		100% {transform: rotate(0deg);}
-	}
-}
 .tilt {
-	animation-name: tilt;
 	animation-duration: 60s !important;
 	animation-iteration-count: infinite !important;
 	animation-direction: alternate !important;
 	animation-timing-function: linear !important;
 }
+
+@keyframes tilt-1 {
+	0% {transform: rotate(0deg);}
+	25% {transform: rotate(1deg);}
+	75% {transform: rotate(-1deg);}
+	100% {transform: rotate(0deg);}
+}
+
+.tilt-1 {
+	animation-name: tilt-1;
+}
+
+@keyframes tilt-2 {
+	0% {transform: rotate(0deg);}
+	25% {transform: rotate(2deg);}
+	75% {transform: rotate(-2deg);}
+	100% {transform: rotate(0deg);}
+}
+
+.tilt-2 {
+	animation-name: tilt-2;
+}
+
+@keyframes tilt-3 {
+	0% {transform: rotate(0deg);}
+	25% {transform: rotate(3deg);}
+	75% {transform: rotate(-3deg);}
+	100% {transform: rotate(0deg);}
+}
+
+.tilt-3 {
+	animation-name: tilt-3;
+}
+
+@keyframes tilt-4 {
+	0% {transform: rotate(0deg);}
+	25% {transform: rotate(4deg);}
+	75% {transform: rotate(-4deg);}
+	100% {transform: rotate(0deg);}
+}
+
+.tilt-4 {
+	animation-name: tilt-4;
+}
diff --git a/files/templates/comments.html b/files/templates/comments.html
index 0513ef5ae..f7ca45253 100644
--- a/files/templates/comments.html
+++ b/files/templates/comments.html
@@ -27,8 +27,7 @@
 			<span class="comment-collapse-desktop d-mob-none" style="border-left: 2px solid #{{c.author.name_color}}" data-nonce="{{g.nonce}}" data-onclick="collapse_comment('{{c.id}}')"></span>
 
 			<div class="comment-body">
-
-					<div id="comment-{{c.id}}-only" class="{% if c.award_count('tilt', v) %}tilt{% endif %} {% if c.award_count('glowie', v) %}glow{% endif %} comment-{{c.id}}-only">
+					<div id="comment-{{c.id}}-only" class="{% if c.award_count('tilt', v) %}tilt tilt-{{c.award_count('tilt', v)}}{% endif %} {% if c.award_count('glowie', v) %}glow{% endif %} comment-{{c.id}}-only">
 							<div class="user-info">
 								<span class="comment-collapse-icon" data-nonce="{{g.nonce}}" data-onclick="collapse_comment('{{c.id}}')"></span>
 								{% if standalone and c.over_18 %}<span class="badge badge-danger">+18</span> {% endif %}
@@ -118,7 +117,7 @@
 	{% endif %}
 	<div class="comment-body">
 
-		<div id="{% if comment_info and comment_info.id == c.id %}context{%else%}comment-{{c.id}}-only{% endif %}" class="{% if c.unread %}unread{% endif %} {% if c.award_count('glowie', v) %}glow{% endif %} comment-{{c.id}}-only comment-anchor {% if comment_info and comment_info.id == c.id %}context{%endif%}{% if c.is_banned %} banned{% endif %}{% if c.deleted_utc %} deleted{% endif %}">
+		<div id="{% if comment_info and comment_info.id == c.id %}context{%else%}comment-{{c.id}}-only{% endif %}" class="{% if c.award_count('tilt', v) %}tilt tilt-{{c.award_count('tilt', v)}}{% endif %} {% if c.unread %}unread{% endif %} {% if c.award_count('glowie', v) %}glow{% endif %} comment-{{c.id}}-only comment-anchor {% if comment_info and comment_info.id == c.id %}context{%endif%}{% if c.is_banned %} banned{% endif %}{% if c.deleted_utc %} deleted{% endif %}">
 
 			<div class="user-info">
 				<span class="comment-collapse-icon" data-nonce="{{g.nonce}}" data-onclick="collapse_comment('{{c.id}}')"></span>
diff --git a/files/templates/submission.html b/files/templates/submission.html
index 878274db0..582a22648 100644
--- a/files/templates/submission.html
+++ b/files/templates/submission.html
@@ -60,7 +60,7 @@
 
 <div class="row mb-3">
 
-	<div id="post-root" class="col-12 {% if p.award_count('tilt', v) %}tilt{% endif %}">
+	<div id="post-root" class="col-12 {% if p.award_count('tilt', v) %}tilt tilt-{{p.award_count('tilt', v)}}{% endif %}">
 
 		<div class="card border-0 mt-3 {% if p.stickied %}stickied{% endif %} {% if voted==1 %}upvoted{% elif voted==-1 %} downvoted{% endif %}">
 			<div id="post-{{p.id}}" class="actual-post {% if p.ghost %}ghost-post{% endif %} {% if p.is_banned %}banned{% endif %} {% if p.deleted_utc %}deleted {% endif %} {% if p.award_count('tilt', v) %}p-3{% endif %} {% if p.award_count('glowie', v) %}glow{% endif %} d-flex flex-row-reverse flex-nowrap justify-content-end">