Add top banner animation (#4690)

gitcoinco · Jun 26, 2019 · e8e789e · e8e789e
1 parent 6b46066
commit e8e789e
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 6 deletions.
diff --git a/app/assets/v2/css/base.css b/app/assets/v2/css/base.css
@@ -674,6 +674,24 @@ input[type=text].loading {
   margin-left: 0px;
 }
 
+.bottom_notification-beyond {
+  background: #000;
+  position: relative;
+  background-image: linear-gradient(90deg, #000, rgba(15, 206, 124, 0.7), #000), url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' opacity='1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='20' height='20' rx='3.5' stroke='rgba(15, 206, 124, 0.7)'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat, repeat-x;
+  background-size:  100%, 24px;
+  background-position: center, 100% center;
+  animation: bg-move 17s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
+}
+@keyframes bg-move {
+  0% {
+    background-position: center, 0 center;
+  }
+  100% {
+    background-position: center, 100% center;
+  }
+}
+
 .metamask_recc {
   width: 45%;
   display: inline-block;

diff --git a/app/dashboard/templates/ftux/onboard.html b/app/dashboard/templates/ftux/onboard.html
@@ -30,8 +30,8 @@
   </head>
   <body class="g-font-muli">
     {% include 'shared/tag_manager_2.html' %}
+    {% include 'shared/top_nav.html' with class='d-md-flex' %}
     <div class="container-fluid header dash">
-      {% include 'shared/top_nav.html' with class='d-md-flex' %}
       {% include 'home/nav.html' %}
     </div>
     <div class="row">

diff --git a/app/retail/templates/about.html b/app/retail/templates/about.html
@@ -27,8 +27,8 @@
   </head>
   <body class="{{ active }} g-font-muli">
     {% include 'shared/tag_manager_2.html' %}
+    {% include 'shared/top_nav.html' with class='d-md-flex' %}
     <div class="container-fluid header">
-      {% include 'shared/top_nav.html' with class='d-md-flex' %}
       {% include 'home/nav.html' %}
       {% include 'shared/minihero.html' with h1='About' %}
     </div>

diff --git a/app/retail/templates/products.html b/app/retail/templates/products.html
@@ -28,8 +28,8 @@
 
   <body class="{{ active }} g-font-muli">
     {% include 'shared/tag_manager_2.html' %}
+    {% include 'shared/top_nav.html' with class='d-md-flex' %}
     <div class="container-fluid header">
-      {% include 'shared/top_nav.html' with class='d-md-flex' %}
       {% include 'home/nav.html' %}
     </div>
 

diff --git a/app/retail/templates/shared/top_nav.html b/app/retail/templates/shared/top_nav.html
@@ -18,12 +18,12 @@
 {% load i18n static matches %}
 
 <!--- Top Row Notification -->
-<div class="row bottom_notification font-caption" style="text-align: center;">
+<div class="row bottom_notification bottom_notification-beyond font-caption" style="text-align: center;">
   <span style="text-align: center; margin: auto;">
-    {% blocktrans %}<strong>The Beyond Blockchain Hackathon was just announced!</strong> - A three week virtual hackathon where global developers + entrepeneurs will collaborate to push blockchain applications to new frontiers of business + technology + social change <a href="https://gitcoin.co/hackathon/beyondblocks">Sign up today</a>.{% endblocktrans %}
+    {% blocktrans %}<strong>There's still time! Participate in Beyond Blockchain Virtual Hackathon happening now!</strong> <a href="https://gitcoin.co/hackathon/beyondblockchain/">View the Prizes</a>.{% endblocktrans %}
   </span>
   <span style="cursor: pointer;" id="top_nav_notification">
-    X
+      &times;
   </span>
 </div>
 <!--- /Top Row Notification -->