Centered shout text fix

~ ajusted stroke on shout star

diff --git a/static/assets/star5.svg b/static/assets/star5.svg
index 7ad77ec17485dd30a3027f6567dc48d54219ac5a..2fac3b0192d1277db576264156c073834ac08163 100644 (file)
--- a/static/assets/star5.svg
+++ b/static/assets/star5.svg
@@ -49,7 +49,7 @@
   </metadata>
   <path
      sodipodi:type="star"
-     style="fill:#ff4eac;fill-opacity:1;stroke:#ffffff;stroke-width:3.36072;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+     style="fill:#ff4eac;fill-opacity:1;stroke:#ffffff;stroke-width:1.69097735;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
      id="path1"
      inkscape:flatsided="false"
      sodipodi:sides="9"

diff --git a/templates/gfx.html b/templates/gfx.html
index e61f0938c2672fdcf21c103897f10aad00b07219..d5bd5805fd477ae17d490d1e829312359b40fa2c 100644 (file)
--- a/templates/gfx.html
+++ b/templates/gfx.html
@@ -27,11 +27,11 @@ body {
     100% {transform: rotate(1turn) scale(1.2);}
 }
 @keyframes spinOffset {
-    0% {transform: perspective(300px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(0turn) scale(1.2);}
-    25% {transform: perspective(300px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(0.25turn) scale(1);}
+    0% {transform: perspective(200px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(0turn) scale(1.2);}
+    25% {transform: perspective(250px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(0.25turn) scale(1);}
     50% {transform: perspective(300px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(0.5turn) scale(1.2);}
-    75% {transform: perspective(300px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(0.75turn) scale(1);}
-    100% {transform: perspective(300px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(1turn) scale(1.2);}
+    75% {transform: perspective(250px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(0.75turn) scale(1);}
+    100% {transform: perspective(200px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(1turn) scale(1.2);}
 }
 @keyframes spinText {
     0% {transform: rotate(-0.01turn);}
@@ -39,9 +39,9 @@ body {
     100% {transform: rotate(-0.01turn);}
 }
 @keyframes spinTextOffset {
-    0% {transform: perspective(400px) translateX(-50%) rotateY( -15deg ) rotateZ(-0.01turn);}
-    50% {transform: perspective(400px) translateX(-50%) rotateY( -15deg) rotateZ(0.01turn);}
-    100% {transform: perspective(400px) translateX(-50%) rotateY( -15deg ) rotateZ(-0.01turn);}
+    0% {transform: perspective(500px) translateX(-50%) rotateY( -10deg ) rotateZ(-0.01turn);}
+    50% {transform: perspective(500px) translateX(-50%) rotateY( -10deg) rotateZ(0.01turn);}
+    100% {transform: perspective(500px) translateX(-50%) rotateY( -10deg ) rotateZ(-0.01turn);}
 }
 @keyframes flicker {
     0% {
@@ -321,7 +321,7 @@ body {
 }
 #shoutTextContainer {
     position: absolute;
-    top: 0vh;
+    top: 0;
     opacity: 0;
     transform: translateX(30vw);
     transition: opacity 2s ease, transform 2s ease;
@@ -332,19 +332,19 @@ body {
     transform: translateX(0vw);
 }
 #shoutBadgeContainer > img {
-    width: 40vh;
-    height: 40vh;
+    width: 45vh;
+    height: 45vh;
     padding: 0;
     animation: spinOffset 10s linear 0s infinite;
 }
 #shout {
     position: absolute;
-    top: -1em;
     width: 100vw;
+    top: 0;
     perspective: 400px;
     animation: spinTextOffset 10s linear 0s infinite;
     rotate: 0.025turn;
-    font-size: 6em;
+    font-size: 7em;
     text-align: center;
 }
 #currentPrice {
@@ -542,7 +542,7 @@ circle {
                 <img class="badge" src="./static/assets/star5.svg"></img>
             </div>
             <div id="shoutTextContainer">
-                <h1 id="shout">SHOUT TEXT</h1>
+                <h1 id="shout" style="top: 0">SHOUT TEXT</h1>
             </div>
                </div>
 
@@ -645,6 +645,7 @@ const remaining = document.getElementById("unitsLeft");
 const origional = document.getElementById("origionalPrice");
 const topTextElement = document.getElementById("topText");
 const bottomTextElement = document.getElementById("bottomText");
+const shout = document.getElementById("shout");
 
 const marqueeContainer = document.getElementById("marquee");
 
@@ -800,7 +801,7 @@ function update() {
             }
 
             // Shout
-            document.getElementById("shout").innerHTML = data.shout;
+            shout.innerHTML = data.shout;
             let current = Math.round((Date.now() + data['timer_offset']) / 1000);
             var time = data[`end_timer_shout`] - current;
             if (time > 0) {
@@ -848,9 +849,6 @@ function update() {
                 price = Math.round(price * 100) / 100;
             }
 
-            console.log(item.currency);
-            console.log(item.prefix);
-
             let priceString;
             let ezString;
             if (item.prefix) {priceString = `${item.currency}${price}`}