From 4babc0f386d5d2641207ca5fba2790339b435f6f Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 15 Jul 2022 17:41:30 -0400
Subject: [PATCH] Revisions to sliding, + mobile-friendly

---
 src/layouts/index.html | 207 +++++++++++++++++++++++++++++++++++++----
 1 file changed, 191 insertions(+), 16 deletions(-)

diff --git a/src/layouts/index.html b/src/layouts/index.html
index 04baab7..ea77d21 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -279,12 +279,18 @@
 
   <style>
 
-    @media only screen and (max-width: 980px) {
+    @media only screen and (max-width: 992px) {
       #top-commentary{
         display:none;
       }
     }
 
+    @media only screen and (min-width: 992px) {
+      #top-commentary-mobile{
+        display:none;
+      }
+    }
+
 
     .carousel-indicators{
       margin-bottom: -50px;
@@ -315,19 +321,12 @@
     <hr>
   </div>
 
-  <div class="container" id="top-commentary" style="margin-bottom: 100px;">
-
     <h3 class="text-center display-6 mb-5">What the <span class="yellow">internet's</span> saying.</h3>
 
-    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
-    <div class="carousel-indicators">
-      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
-      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
-      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
-    </div>
+    <div class="container" id="top-commentary" style="margin-bottom: 100px;">
+      <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
     <div class="carousel-inner">
-      <div class="carousel-item active">
-
+      <div class="carousel-item active" data-bs-interval="4000">
         <!-- Item 1 -->
 
         <div class="row">
@@ -372,10 +371,8 @@
           </div>
         </div>
         <!-- End first set -->
-
       </div>
-
-      <div class="carousel-item">
+      <div class="carousel-item" data-bs-interval="4000">
         <div class="row">
 
         <!-- Item 4 -->
@@ -422,7 +419,8 @@
         </div>
 
       </div>
-      <div class="carousel-item">
+      </div>
+      <div class="carousel-item" data-bs-interval="4000">
         <div class="row">
 
         <!-- Item 7 -->
@@ -475,11 +473,188 @@
             </div>
           </div>
         </div>
-
       </div>
     </div>
   </div>
 
+  <!-- Start Mobile Top-Commentary -->
+
+  <div class="container" id="top-commentary-mobile" style="margin-bottom: 75px;">
+    <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
+  <div class="carousel-inner">
+    <div class="carousel-item active" data-bs-interval="3000">
+
+      <!-- Item 1 -->
+      <div class="row">
+        <div class="col-sm-12 col-lg-4">
+          <div class="card twi-card-container">
+            <div class="card-body p-4 twitter-card">
+                <img src="/Images/twitter.svg" alt="Twitter Logo" class="twitter-card-logo">
+                <p>alexpoon.eth<br>
+                @alexpoon_hk</p>
+                <p>Open source dev is broken. So cool to see @teaxyz_ bringing new life to popular software projects like homebrew to web3.</p>
+                <p>10:52 AM - Mar 24, 2022</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <div class="carousel-item" data-bs-interval="3000">
+
+      <!-- Item 2 -->
+      <div class="row">
+        <div class="col-sm-12 col-lg-4">
+          <div class="card twi-card-container">
+            <div class="card-body p-4 twitter-card">
+              <img src="/Images/twitter.svg" alt="Twitter Logo" class="twitter-card-logo mb-4">
+              <p>0xTea<br>
+              @0xTea_</p>
+              <p>This is the innovation we need , and technology with  the right frame of mind of rewarding the creators in a way that scales and is in perpetuity</p>
+              <p>10:52 AM - Mar 24, 2022</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <div class="carousel-item" data-bs-interval="3000">
+
+      <!-- Item 3 -->
+      <div class="row">
+        <div class="col-sm-12 col-lg-4">
+          <div class="card twi-card-container">
+            <div class="card-body p-4 twitter-card">
+              <img src="/Images/twitter.svg" alt="Twitter Logo" class="twitter-card-logo mb-4">
+              <p>jcinis.eth<br>
+              @jcinis</p>
+              <p>It is hard to think of a more perfect use for blockchain technology than coordinating package releases for opensource software. What @teaxyz_ is embarking on will improve security, maintenance, and reliability, while providing much-needed incentive for independent developers. 🙌🏼 </p>
+              <p>10:52 AM - Mar 24, 2022</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <div class="carousel-item" data-bs-interval="3000">
+
+      <!-- Item 4 -->
+      <div class="row">
+        <div class="col-sm-12 col-lg-4">
+          <div class="card twi-card-container">
+            <div class="card-body p-4 twitter-card">
+              <img src="/Images/twitter.svg" alt="Twitter Logo" class="twitter-card-logo mb-4">
+                <p>Jason Warner<br>
+                @jasoncwarner</p>
+                <p>Now this is legitimately interesting. I’m super glad to see more open source veterans looking at using crypto as distribution mechanisms.</p>
+                <p>3:14 PM - Mar 23, 2022</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <div class="carousel-item" data-bs-interval="3000">
+
+      <!-- Item 5 -->
+      <div class="row">
+        <div class="col-sm-12 col-lg-4">
+          <div class="card twi-card-container">
+            <div class="card-body p-4 twitter-card">
+              <img src="/Images/twitter.svg" alt="Twitter Logo" class="twitter-card-logo mb-4">
+              <p>Andrew Fernandez<br>
+                @bhsdrew</p>
+              <p>Congrats man [Max] this is one of the first real interesting use cases I’ve seen for web3… really excited to see this grow</p>
+              <p>8:38 AM - Mar 23, 2022</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <div class="carousel-item" data-bs-interval="3000">
+
+      <!-- Item 6 -->
+      <div class="row">
+        <div class="col-sm-12 col-lg-4">
+          <div class="card twi-card-container">
+            <div class="card-body p-4 twitter-card">
+              <img src="/Images/twitter.svg" alt="Twitter Logo" class="twitter-card-logo mb-4">
+              <p>max is building infra-as-lowcode<br>
+              @maxcan</p>
+              <p>one of the first web3 projects that actually makes sense</p>
+              <p>3:31 PM - Mar 23, 2022</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <div class="carousel-item" data-bs-interval="3000">
+
+      <!-- Item 7 -->
+      <div class="row">
+        <div class="col-sm-12 col-lg-4">
+          <div class="card twi-card-container">
+            <div class="card-body p-4 twitter-card">
+              <img src="/Images/twitter.svg" alt="Twitter Logo" class="twitter-card-logo mb-4">
+                <p>Nick Dobos<br>
+                @NickADobos</p>
+                <p>Homebrew is getting a web3 upgrade! 👀 <br>
+
+                Incredibly excited for this <br>
+
+                If this works it might be the biggest step forward in building open source software ever <br>
+
+                Pay the maintainers <br>
+                Build all the things</p>
+                <p>3:31 PM - Mar 23, 2022</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <div class="carousel-item" data-bs-interval="3000">
+
+      <!-- Item 8 -->
+      <div class="row">
+        <div class="col-sm-12 col-lg-4">
+          <div class="card twi-card-container">
+            <div class="card-body p-4 twitter-card">
+              <img src="/Images/twitter.svg" alt="Twitter Logo" class="twitter-card-logo mb-4">
+              <p>Ben<br>
+              @ben_mathes</p>
+              <p>I'm skeptical of a lot of web3. Indirect value to package maintainers though I support. Tea looks rad.<br>
+              I hope no preferential attachment concentrates the value.</p>
+              <p>2:36 PM - Mar 24, 2022</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <div class="carousel-item" data-bs-interval="3000">
+
+      <!-- Item 9 -->
+      <div class="row">
+        <div class="col-sm-12 col-lg-4">
+          <div class="card twi-card-container">
+            <div class="card-body p-4 twitter-card">
+              <img src="/Images/twitter.svg" alt="Twitter Logo" class="twitter-card-logo mb-4">
+              <p>Developer DAO (🧱, 🚀)<br>
+              @developer_dao</p>
+              <p>probably nothing</p>
+              <p>6:28 PM - Mar 23, 2022</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
   </div>
 
   <!-- Community Links -->