Change static text color to gradient animation

Signed-off-by: Nicolas Hernan Silva <[email protected]>

Author: Koppeks

assets/scss/_styles_project.scss

@@ -41,10 +41,13 @@
 .nav-link.active {
   border-width: 1px;
   border-style: solid;
-  border-image: linear-gradient(to bottom,
+  border-image: linear-gradient(
+      to bottom,
       rgba($dark, 0.2) 30%,
       rgba($primary, 0.3) 60%,
-      $primary 90% 100%) 1;
+      $primary 90% 100%
+    )
+    1;
   padding-bottom: 0.3rem;
   align-items: center;
   justify-content: center;
@@ -92,7 +95,7 @@ body {
 
   // Inline code
   p code,
-  li>code,
+  li > code,
   table code {
     color: inherit;
     padding: 0.2em 0.4em;
@@ -113,7 +116,7 @@ body {
     background-color: $gray-900;
     padding: $spacer;
 
-    >code {
+    > code {
       background-color: inherit !important;
       padding: 0;
       margin: 0;
@@ -167,7 +170,6 @@ a:not([href]):not([class]):hover {
   // .taxonomy-terms-cloud
 
   .taxonomy-term {
-
     border-width: 0;
     border-radius: 0 3px 3px 0;
     display: inline-block;
@@ -182,13 +184,10 @@ a:not([href]):not([class]):hover {
     transition: color 0.2s;
     clip-path: polygon(100% 0, 100% 100%, 0.8em 100%, 0 50%, 0.8em 0);
 
-
     &:hover {
       background-color: $primary;
       color: $white;
-
     }
-
   }
 
   .article-teaser {
@@ -217,12 +216,14 @@ a:not([href]):not([class]):hover {
 }
 
 .td-sidebar {
-  background-image: linear-gradient(to top,
-      #1e2117,
-      #1d1912,
-      #18120e,
-      #0f0a09,
-      #000000);
+  background-image: linear-gradient(
+    to top,
+    #1e2117,
+    #1d1912,
+    #18120e,
+    #0f0a09,
+    #000000
+  );
   position: sticky;
   height: calc(100vh - 5.5rem);
   top: 5.5rem;
@@ -268,18 +269,9 @@ a:not([href]):not([class]):hover {
 
     &__section {
       margin-top: 1rem;
-      font-family:
-        "Qanelas Soft",
-        sans-serif,
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        Roboto,
-        "Helvetica Neue",
-        Arial,
-        "Apple Color Emoji",
-        "Segoe UI Emoji",
-        "Segoe UI Symbol";
+      font-family: "Qanelas Soft", sans-serif, -apple-system, BlinkMacSystemFont,
+        "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji",
+        "Segoe UI Emoji", "Segoe UI Symbol";
     }
   }
 
@@ -292,14 +284,20 @@ a:not([href]):not([class]):hover {
     &.active:not(.tree-root) {
       border-width: 1px;
       border-style: solid;
-      border-image: linear-gradient(to left,
+      border-image: linear-gradient(
+          to left,
           rgba($dark, 0) 30%,
           rgba($primary, 0.3) 60%,
-          $primary 90% 100%) 1;
-      background-image: linear-gradient(to left,
+          $primary 90% 100%
+        )
+        1;
+      background-image: linear-gradient(
+          to left,
           rgba($dark, 0.2) 30%,
           rgba($primary, 0.3) 60%,
-          $primary 90% 100%) 1;
+          $primary 90% 100%
+        )
+        1;
       padding: 0.25rem;
       padding-left: 0.5rem !important;
       // background-image: linear-gradient(to left, rgba($dark,.33),rgba($dark,.5),rgba($dark,.75),#1e2117, #31412b, #3b6447, #378b6d, #00b39f);
@@ -321,12 +319,14 @@ a:not([href]):not([class]):hover {
 .td-sidebar-toc {
   line-height: 1.25rem;
   border-left: 1px solid $border-color;
-  background-image: linear-gradient(to top,
-      #1e2117,
-      #1d1912,
-      #18120e,
-      #0f0a09,
-      #000000);
+  background-image: linear-gradient(
+    to top,
+    #1e2117,
+    #1d1912,
+    #18120e,
+    #0f0a09,
+    #000000
+  );
 
   @supports (position: sticky) {
     position: sticky;
@@ -403,13 +403,13 @@ a:not([href]):not([class]):hover {
 }
 
 .matterinfo .plan-support {
-  padding: .5rem;
-  border: .5px solid $border-color;
+  padding: 0.5rem;
+  border: 0.5px solid $border-color;
   display: flex;
   align-items: center;
   color: $casper;
   &:hover {
-    background-color: rgba($primary, 0.3)
+    background-color: rgba($primary, 0.3);
   }
 }
 
@@ -429,7 +429,6 @@ a:not([href]):not([class]):hover {
   color: $casper;
 }
 
-
 // Style alert boxes.
 
 .alert {
@@ -456,12 +455,12 @@ a:not([href]):not([class]):hover {
   transition: color 0.8s;
   transition: background-color 0.8s;
 
-  >img {
+  > img {
     width: 2rem;
     margin-right: 0.5rem;
   }
 
-  >img:hover {
+  > img:hover {
     filter: brightness(0) invert(1);
   }
 
@@ -484,7 +483,7 @@ a:not([href]):not([class]):hover {
 .td-content figure > img {
   width: auto;
   max-width: 100%;
-  border-radius: .5rem .5rem 0 0;
+  border-radius: 0.5rem 0.5rem 0 0;
   box-shadow: 0 0 0.5rem rgba(0, 179, 159, 0.4);
   transition: box-shadow 0.2s;
 }
@@ -495,7 +494,7 @@ a:not([href]):not([class]):hover {
   padding: 0.5rem 1rem;
   background-color: rgba($lightslategray, 1);
   color: $dark;
-  border-radius: 0 0 .5rem .5rem;
+  border-radius: 0 0 0.5rem 0.5rem;
   box-sizing: border-box;
 }
 
@@ -504,23 +503,24 @@ a:not([href]):not([class]):hover {
   margin-bottom: 4rem;
   font-size: 5rem;
   text-align: left;
-  background: linear-gradient(217deg,
-      rgba(249, 245, 13, 0.26),
-      rgba(223, 255, 219, 0.57) 9.03%),
-    linear-gradient(127deg,
-      rgba(249, 245, 13, 0.7),
-      rgba(223, 225, 199, 0.1) 41.12%),
-    linear-gradient(336deg,
-      rgba(249, 245, 13, 0.1),
-      rgba(239, 239, 251, 0.81) 0%);
-  background-position:
-    0% 0%,
-    0% 0%;
+  background-image: linear-gradient(
+    135deg,
+    rgb(224, 242, 157),
+    rgb(218, 237, 192),
+    rgb(211, 227, 212),
+    rgb(213, 232, 213),
+    rgb(211, 227, 212),
+    rgb(218, 237, 192),
+    rgb(224, 242, 157),
+    );
+  background-size: 200%;
   box-sizing: auto;
-  color: rgba(0, 0, 0, 0);
+  color: transparent;
   display: block;
   text-rendering: optimizelegibility;
-  background-clip: text, text;
+  background-clip: text;
+  -webkit-background-clip: text;
+  animation: color-shift 8s linear infinite;
 
   @media (max-width: 768px) {
     font-size: 3.5rem;
@@ -531,15 +531,23 @@ a:not([href]):not([class]):hover {
   // }
 }
 
+@keyframes color-shift {
+  to {
+    background-position: -200%;
+  }
+}
+
 .dash-tangle {
   width: 78.14231rem;
   height: 74.72rem;
   transform: rotate(-55.68deg);
   flex-shrink: 0;
   overflow: hidden;
-  background-image: linear-gradient(180deg,
-      rgba(0, 179, 115, 0) 0%,
-      rgba(0, 179, 159, 0.3) 100%);
+  background-image: linear-gradient(
+    180deg,
+    rgba(0, 179, 115, 0) 0%,
+    rgba(0, 179, 159, 0.3) 100%
+  );
   position: absolute;
   top: -18rem;
   right: -32rem;
@@ -568,13 +576,15 @@ a:not([href]):not([class]):hover {
   left: -24rem;
   overflow: hidden;
 
-  >.dash-ircle {
+  > .dash-ircle {
     width: 74.125rem;
     height: 74.125rem;
     flex-shrink: 0;
-    background: radial-gradient(50% 50% at 50% 50%,
-        rgba(0, 179, 159, 0.2) 0%,
-        rgba(0, 179, 159, 0) 100%);
+    background: radial-gradient(
+      50% 50% at 50% 50%,
+      rgba(0, 179, 159, 0.2) 0%,
+      rgba(0, 179, 159, 0) 100%
+    );
     position: absolute;
     overflow: hidden;
     background-clip: border-box;
@@ -605,9 +615,7 @@ a:not([href]):not([class]):hover {
 
   a.dash-sign {
     color: #fffbf1;
-    text-shadow:
-      0 20px 25px #2e2e31,
-      0 40px 60px #2e2e31;
+    text-shadow: 0 20px 25px #2e2e31, 0 40px 60px #2e2e31;
     font-size: 28px;
     font-weight: 600;
     text-decoration: none;
@@ -711,7 +719,7 @@ a:not([href]):not([class]):hover {
   gap: 1rem;
 }
 
-.tab-content>.active {
+.tab-content > .active {
   display: flex;
 }
 
@@ -727,14 +735,17 @@ a:not([href]):not([class]):hover {
 [id^="tabs-"] {
   border: 1px solid rgba($light, 0.1);
   border-radius: 0.5rem;
-  padding: .5rem;
+  padding: 0.5rem;
   margin-bottom: 1rem;
   background-color: rgba($light, 0.02);
   box-shadow: 0 0 8px rgba($dark, 0.2);
 
   .nav-link {
     color: $light;
-    background-color: rgba($light, 0.3); // 🆕 consistent visible bg for inactive tabs
+    background-color: rgba(
+      $light,
+      0.3
+    ); // 🆕 consistent visible bg for inactive tabs
     border: 2px solid rgba($light, 0.15);
     border-radius: 0.5rem 0.5rem 0 0;
     margin: 2px;
@@ -762,7 +773,7 @@ a:not([href]):not([class]):hover {
     }
   }
 
-   .nav-link.disabled {
+  .nav-link.disabled {
     background: transparent;
     border: none;
     color: rgba($light, 0.5);
@@ -783,6 +794,11 @@ html {
   scroll-behavior: smooth;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   scroll-margin-top: 1rem;
 }