From 9c5ded406ae05d77be63a89d93ef4285674280a0 Mon Sep 17 00:00:00 2001
From: Simon Priet <spriet@alkemics.com>
Date: Mon, 22 Nov 2021 14:49:52 +0100
Subject: [PATCH] Changed PROD banner to be animated gradient with Salsify
 colors

---
 .DS_Store      | Bin 0 -> 6148 bytes
 PRD banner.css |  30 ++++++++--------------
 test.css       |  66 +++++++++++--------------------------------------
 test.html      |   5 +++-
 4 files changed, 29 insertions(+), 72 deletions(-)
 create mode 100644 .DS_Store

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..9fbbe3c1c304ce89df5eb8a5340e566a1e29be7c
GIT binary patch
literal 6148
zcmeHK!AiqG5PefCBnZ-@7h%63;2)$VMFa&=KS0|G9#RWd@45RA{(_%a-|Q@<Nh^4g
zqBCXYZ6@=w-ItKb0+7+$><kzH$moi_oMDIQdG#&prOY8w;x#6Cz%zf3c-gA<#6BvZ
z_wE>%xWhRDHt%17DVA7X)Qjn)UQAf056LIJSViMVx!1Ts^&{@E!_CPYV@UQDvA`U&
z_H1(6VPtsav$bU0`S0YtQ=f0tKXE)q-JT(?=fl>sT9NJM3b+EUz<*GHJzFh1GW6&Q
zxB{-gS^<4O1iE6GurZ9U4u-e|AoiJ##<6}TDkmf?6E=oCLldJCjVfu2Ax39Dq`ER;
zV`y|p+I&cwS<((g;_SSBh~<#d(4#Bh3bYkCu)~4&|MB<x|2D~wTme_$Pbnb%>b4qj
zNvXGPElzuFpx@Kgw5~B+Q#gpNn6=u9Pw3H@4>};02^&LZX#OD(W$@q%{Hg+9rBGA^

literal 0
HcmV?d00001

diff --git a/PRD banner.css b/PRD banner.css
index f978736..351fa3e 100644
--- a/PRD banner.css	
+++ b/PRD banner.css	
@@ -1,28 +1,18 @@
 @-moz-document domain("stream.alkemics.com") {
-     :root {
-        --stripe-size: 100px;
-        --color1: hsl(234, 71%, 48%);
-        --color2: hsl(239, 100%, 60%);
-        --duration: 6s;
+    .Navbar.bg-inverse {
+        background: linear-gradient(-45deg, #00e1d0, #00c4ff, #0562e8, #8a25f9);
+        background-size: 400% 100% !important;
+        animation: salsigrad 60s linear infinite !important;
     }
-    .Navbar::before {
-        z-index: -10;
-        content: "";
-        position: absolute;
-        top: 0;
-        left: calc(-1 * var(--stripe-size));
-        width: calc(100% + var(--stripe-size));
-        height: 100%;
-        background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
-        background-size: var(--stripe-size) var(--stripe-size);
-        animation: stripeTransform var(--duration) linear infinite;
-    }
-    @keyframes stripeTransform {
+    @keyframes salsigrad {
         0% {
-            transform: translateX(0);
+            background-position: 0% 0%;
+        }
+        50% {
+            background-position: 100% 50%;
         }
         100% {
-            transform: translateX(calc(var(--stripe-size) * 1));
+            background-position: 0% 0%;
         }
     }
 }
\ No newline at end of file
diff --git a/test.css b/test.css
index c464343..b157867 100644
--- a/test.css
+++ b/test.css
@@ -1,54 +1,18 @@
-:root {
-  --stripe-size: 100px;
-  --color1: #c44;
-  --color2: #313131;
-  --duration: 4s;
+.Navbar {
+    background: linear-gradient(-45deg, #00e1d0, #00c4ff, #0562e8, #8a25f9) !important;
+    background-size: 400% 400% !important;
+    animation: salsigrad 15s linear infinite !important;
+    height: 100vh;
 }
 
-body {
-  display: flex;
-  height: 100vh;
-  overflow: hidden;
-  margin: 0;
-}
-
-.stripe {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.stripe::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: calc(-1 * var(--stripe-size));
-  width: calc(100% + var(--stripe-size));
-  height: 100%;
-  background: repeating-linear-gradient(45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
-  background-size: var(--stripe-size) var(--stripe-size);
-  -webkit-animation: stripeTransform var(--duration) linear infinite;
-          animation: stripeTransform var(--duration) linear infinite;
-}
-
-
-@keyframes stripeTransform {
-  0% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(calc(var(--stripe-size) * 1));
-  }
-}
-
-@keyframes stripeBackgroundPosition {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: calc(var(--stripe-size) * 1) 0;
-  }
+@keyframes salsigrad {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
 }
\ No newline at end of file
diff --git a/test.html b/test.html
index 25f1a24..d406187 100644
--- a/test.html
+++ b/test.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -7,9 +8,11 @@
     <title>Document</title>
     <link href="test.css" rel="stylesheet" type="text/css">
 </head>
+
 <body>
-    <div class="stripe">
+    <div class="Navbar">
         <br>
     </div>
 </body>
+
 </html>
\ No newline at end of file