From c88fcb215a0d8dbb258738f15940d818b9ce9adb Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Tue, 5 Jul 2022 16:05:33 -0400
Subject: [PATCH] cycle text in order

---
 src/layouts/index.html           |  2 +-
 src/layouts/partials/footer.html | 87 ++++++++------------------------
 src/static/css/style.css         | 44 ----------------
 3 files changed, 23 insertions(+), 110 deletions(-)

diff --git a/src/layouts/index.html b/src/layouts/index.html
index a815820..940667b 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -7,7 +7,7 @@
     <div class="row hero my-auto">
       <div style="z-index:100; display:flex; flex-direction:column;" class="col-lg-6 col-sm-12">
         <div style="margin-top:auto; margin-bottom:auto;">
-          <h1 class="display-1 mb-4"><span class="yellow">Equitable</span> Open&#8208;Source for <span id="cycle-br"><br></span><span class="verb">web3</span></h1>
+          <h1 class="display-1 mb-4"><span class="yellow">Equitable</span> Open&#8208;Source for <span id="cycle-br"><br></span><span id="cycle">web3</span></h1>
           <p class="mb-5 fs-sm-5 fs-lg-6 lead">The tools that build the internet have steeped too long. For the past two
             decades, big tech has made trillions off the generosity of visionary developers and web pioneers… never
             thanking, never mentioning, and certainly never paying. At tea, we’re brewing something to change that by
diff --git a/src/layouts/partials/footer.html b/src/layouts/partials/footer.html
index 7104d0c..e489838 100644
--- a/src/layouts/partials/footer.html
+++ b/src/layouts/partials/footer.html
@@ -154,70 +154,27 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
   </script>
 
   <script>
-        var words = (function(){
-    var words = [
-        'web',
-        'web3',
-        'game dev',
-        'AI',
-        'automation',
-        'data',
-        'ML',
-        'devops',
-        'smart contracts',
-        'creating',
-        'everything',
-        '<i>you<i>'
-        ],
-      el = document.querySelector('.verb'),
-      currentIndex,
-      currentWord,
-      prevWord,
-      duration = 3000;
-    var _getIndex = function(max, min){
-      currentIndex = Math.floor(Math.random() * (max - min + 1)) + min;
-      //Generates a random number between beginning and end of words array
-      return currentIndex;
+    const textList = [
+    "web3",
+    "game dev",
+    "web",
+    "AI",
+    "automation",
+    "data",
+    "ML",
+    "smart contracts",
+    "devops",
+    "ML",
+    "creating",
+    "everything",
+    "<i>you<i>"
+    ];
+    const cycle = document.querySelector("#cycle");
+    let i = 0;
+    const cycleText = () => {
+      cycle.innerHTML = textList[i];
+      i = ++i % textList.length;
     };
-    var _getWord = function(index){
-      currentWord = words[index];
-      return currentWord;
-    };
-    var _clear = function() {
-      setTimeout(function(){
-        el.className = 'verb';
-      }, duration/4);
-    };
-    var _toggleWord = function(duration){
-      setInterval(function(){
-        //Stores value of previous word
-        prevWord = currentWord;
-        //Generate new current word
-        currentWord = words[_getIndex(words.length-1, 0)];
-        //Generate new word if prev matches current
-        if(prevWord === currentWord){
-          currentWord = words[_getIndex(words.length-1, 0)];
-        }
-        //Swap new value
-        el.innerHTML = currentWord;
-        //Clear class styles
-        _clear();
-        //Fade in word
-        el.classList.add(
-          'js-block',
-          'js-fade-in-verb'
-          );
-      }, duration);
-    };
-    var _init = function(){
-      _toggleWord(duration);
-    };
-    //Public API
-    return {
-      init : function(){
-        _init();
-      }
-    };
-    })();
-    words.init();
+    cycleText();
+    setInterval(cycleText, 1200);
   </script>
diff --git a/src/static/css/style.css b/src/static/css/style.css
index fb7563d..9cb96a3 100644
--- a/src/static/css/style.css
+++ b/src/static/css/style.css
@@ -522,47 +522,3 @@ For authenticated users:
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232B3033'%3e%3cpath fill-rule='evenodd' d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3e%3c/svg%3e");
         transform: rotate(90deg);
       }
-
-      /* CSS for text cycling */
-
-      @-moz-keyframes
-      fade-it { 0% {
-      opacity:0
-      }
-      100% {
-      opacity:1
-      }
-      }
-      @-webkit-keyframes
-      fade-it { 0% {
-      opacity:0
-      }
-      100% {
-      opacity:1
-      }
-      }
-      @keyframes
-      fade-it { 0% {
-      opacity:0
-      }
-      100% {
-      opacity:1
-      }
-      }
-      .js-fade-in-verb {
-        animation-name: fade-it;
-        animation-duration: 1s;
-        animation-fill-mode: forwards;
-        -webkit-animation-name: fade-it;
-        -webkit-animation-duration: 1s;
-        -webkit-animation-fill-mode: forwards
-      }
-      .verb.js-block { display: inline-block }
-      .verb.js-hide {
-        display: none;
-        opacity: 0
-      }
-      .verb {
-        display: inline-block;
-        visibility: visible;
-      }