slider

Author: dzinemon

.nvmrc

@@ -1 +1 @@
-v14.15.0
+v18.15.0

package.json

@@ -62,10 +62,10 @@
     "gatsby-plugin-postcss": "^4.3.0",
     "gatsby-plugin-react-helmet": "3.10.0",
     "gatsby-plugin-react-svg": "^3.0.1",
-    "gatsby-plugin-sass": "^4.3.0",
+    "gatsby-plugin-sass": "^5.0.0",
     "gatsby-plugin-scroll-reveal": "^0.0.7",
     "gatsby-plugin-sharp": "2.14.3",
-    "gatsby-plugin-styled-components": "^4.3.0",
+    "gatsby-plugin-styled-components": "^5.0.0",
     "gatsby-remark-prismjs": "^5.2.0",
     "gatsby-source-filesystem": "2.11.1",
     "gatsby-transformer-remark": "^4.2.0",
@@ -80,6 +80,6 @@
     "react-helmet": "6.1.0",
     "sass": "^1.32.10",
     "styled-components": "^5.2.3",
-    "tailwindcss": "^2.1.1"
+    "tailwindcss": "^3.1.1"
   }
 }

src/components/home/features.js

@@ -67,8 +67,8 @@ const features = [
           })}
         </div>
       </div>
-      <div class="container py-16">
-        <div class="logo-stripe w-embed">
+      <div className="container-2xl py-16">
+        <div className="logo-stripe w-embed">
 
         </div>
       </div>

src/styles/global.css

@@ -129,23 +129,23 @@ pre[class*="language-"] {
 }
 
 .logo-stripe {
-  animation: marquee 50s linear infinite;
+  animation: marquee 30s linear infinite;
   -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.776042) 20%, #000000 80%, rgba(0, 0, 0, 0) 100%);
   mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.776042) 20%, #000000 80%, rgba(0, 0, 0, 0) 100%);
 
   width: 100%;
   height: 48px;
   background-image: url(/slider-3x.png);
-  background-repeat: no-repeat;
+  background-repeat: repeat-x;
   background-position: 0 50%;
-  background-size: 4992px 48px;
+  background-size: 4198px 48px;
 }
 .logo-stripe:hover {
   animation-play-state: paused;
 }
 
 @keyframes marquee {
   to {
-    background-position: -2496px 0%;
+    background-position: -4198px 0%;
   }
 }

static/slider-3x.png

@@ -1,6 +1,6 @@
 module.exports = {
-  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
-  darkMode: false, // or 'media' or 'class'
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  // darkMode: false, // or 'media' or 'class'
   theme: {
     container: {
       center: true,