added gradients

Author: olton

examples/multicolor-gradients.html

@@ -43,7 +43,7 @@
     </div>
 </nav>
 
-<section class="container-fluid diagonal after-gr-blue-coral">
+<section class="container-fluid diagonal gr-blue-coral">
     <div class="container">
 
         <h2 class="section-title">blue-coral</h2>
@@ -52,7 +52,7 @@ <h2 class="section-title">blue-coral</h2>
     </div>
 </section>
 
-<section class="container-fluid diagonal after-gr-sunset-dream">
+<section class="container-fluid diagonal gr-sunset-dream">
     <div class="container">
 
         <h2 class="section-title">sunset-dream</h2>
@@ -61,7 +61,7 @@ <h2 class="section-title">sunset-dream</h2>
     </div>
 </section>
 
-<section class="container-fluid diagonal after-gr-deep-space">
+<section class="container-fluid diagonal gr-deep-space">
     <div class="container">
 
         <h2 class="section-title">deep-space</h2>
@@ -70,16 +70,8 @@ <h2 class="section-title">deep-space</h2>
     </div>
 </section>
 
-<section class="container-fluid diagonal after-gr-emerald">
-    <div class="container">
-
-        <h2 class="section-title">emerald</h2>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque cum, perspiciatis a illo veniam ratione expedita assumenda laboriosam modi error maiores fugit soluta vitae temporibus voluptatum ducimus culpa similique quaerat?</p>
 
-    </div>
-</section>
-
-<section class="container-fluid diagonal after-gr-purple-love">
+<section class="container-fluid diagonal gr-purple-love">
     <div class="container">
 
         <h2 class="section-title">purple-love</h2>
@@ -88,7 +80,7 @@ <h2 class="section-title">purple-love</h2>
     </div>
 </section>
 
-<section class="container-fluid diagonal after-gr-cherry-glow">
+<section class="container-fluid diagonal gr-cherry-glow">
     <div class="container">
 
         <h2 class="section-title">cherry-glow</h2>
@@ -97,7 +89,7 @@ <h2 class="section-title">cherry-glow</h2>
     </div>
 </section>
 
-<section class="container-fluid diagonal after-gr-cosmic-fusion">
+<section class="container-fluid diagonal gr-cosmic-fusion">
     <div class="container">
 
         <h2 class="section-title">cosmic-fusion</h2>
@@ -106,7 +98,7 @@ <h2 class="section-title">cosmic-fusion</h2>
     </div>
 </section>
 
-<section class="container-fluid diagonal after-gr-sunny-morning">
+<section class="container-fluid diagonal gr-sunny-morning">
     <div class="container">
 
         <h2 class="section-title">sunny-morning</h2>
@@ -115,7 +107,7 @@ <h2 class="section-title">sunny-morning</h2>
     </div>
 </section>
 
-<section class="container-fluid diagonal after-gr-winter-frost">
+<section class="container-fluid diagonal gr-winter-frost">
     <div class="container">
 
         <h2 class="section-title">winter-frost</h2>
@@ -124,7 +116,7 @@ <h2 class="section-title">winter-frost</h2>
     </div>
 </section>
 
-<section class="container-fluid diagonal after-gr-neon-pulse">
+<section class="container-fluid diagonal gr-neon-pulse">
     <div class="container">
 
         <h2 class="section-title">neon-pulse</h2>
@@ -133,7 +125,7 @@ <h2 class="section-title">neon-pulse</h2>
     </div>
 </section>
 
-<section class="container-fluid diagonal after-gr-royal-elegance">
+<section class="container-fluid diagonal gr-royal-elegance">
     <div class="container">
 
         <h2 class="section-title">royal-elegance</h2>
@@ -142,7 +134,7 @@ <h2 class="section-title">royal-elegance</h2>
     </div>
 </section>
 
-<section class="container-fluid diagonal after-gr-sunset">
+<section class="container-fluid diagonal gr-sunset">
     <div class="container">
 
         <h2 class="section-title">sunset</h2>
@@ -151,7 +143,7 @@ <h2 class="section-title">sunset</h2>
     </div>
 </section>
 
-<section class="container-fluid diagonal after-gr-emerald-sea">
+<section class="container-fluid diagonal gr-emerald-sea">
     <div class="container">
 
         <h2 class="section-title">emerald-sea</h2>
@@ -160,6 +152,15 @@ <h2 class="section-title">emerald-sea</h2>
     </div>
 </section>
 
+<section class="container-fluid diagonal gr-emerald-green">
+    <div class="container">
+
+        <h2 class="section-title">emerald-green</h2>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque cum, perspiciatis a illo veniam ratione expedita assumenda laboriosam modi error maiores fugit soluta vitae temporibus voluptatum ducimus culpa similique quaerat?</p>
+
+    </div>
+</section>
+
 <script src="../lib/metro.js"></script>
 <script>
 </script>

lib/metro.all.css

@@ -45520,129 +45520,106 @@ button.light.outline,
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent;
 }
-.gr-blue-coral,
-.after-gr-blue-coral::after,
-.before-gr-blue-coral::before {
-  background:
+.gradient {
+  background: var(--background);
+}
+.gr-blue-coral {
+  --background:
     linear-gradient(
       45deg,
       #12c2e9,
       #c471ed,
       #f64f59) !important;
 }
-.gr-sunset-dream,
-.after-gr-sunset-dream::after,
-.before-gr-sunset-dream::before {
-  background:
+.gr-sunset-dream {
+  --background:
     linear-gradient(
       45deg,
       #ff7e5f,
       #feb47b,
       #ffcda5) !important;
 }
-.gr-deep-space,
-.after-gr-deep-space::after,
-.before-gr-deep-space::before {
-  background:
+.gr-deep-space {
+  --background:
     linear-gradient(
       45deg,
       #0f0c29,
       #302b63,
       #24243e) !important;
 }
-.gr-emerald-sea,
-.after-gr-emerald::after,
-.before-gr-emerald::before {
-  background:
+.gr-emerald-green {
+  --background:
     linear-gradient(
       45deg,
       #16a085,
       #2ecc71,
       #4cb8c4) !important;
 }
-.gr-purple-love,
-.after-gr-purple-love::after,
-.before-gr-purple-love::before {
-  background:
+.gr-purple-love {
+  --background:
     linear-gradient(
       45deg,
       #cc2b5e,
       #753a88,
       #4a235a) !important;
 }
-.gr-cherry-glow,
-.after-gr-cherry-glow::after,
-.before-gr-cherry-glow::before {
-  background:
+.gr-cherry-glow {
+  --background:
     linear-gradient(
       45deg,
       #f05053,
       #e1eec3,
       #a7bf5d) !important;
 }
-.gr-cosmic-fusion,
-.after-gr-cosmic-fusion::after,
-.before-gr-cosmic-fusion::before {
-  background:
+.gr-cosmic-fusion {
+  --background:
     linear-gradient(
       45deg,
       #ff00cc,
       #333399,
       #0033ff) !important;
 }
-.gr-sunny-morning,
-.after-gr-sunny-morning::after,
-.before-gr-sunny-morning::before {
-  background:
+.gr-sunny-morning {
+  --background:
     linear-gradient(
       45deg,
       #f6d365,
       #fda085,
       #fbc2eb) !important;
 }
-.gr-winter-frost,
-.after-gr-winter-frost::after,
-.before-gr-winter-frost::before {
-  background:
+.gr-winter-frost {
+  --background:
     linear-gradient(
       45deg,
       #a1c4fd,
       #c2e9fb,
       #e2ebf0) !important;
 }
-.gr-neon-pulse,
-.after-gr-neon-pulse::after,
-.before-gr-neon-pulse::before {
-  background:
+.gr-neon-pulse {
+  --background:
     linear-gradient(
       45deg,
       #00fffc,
       #fc00ff,
       #fffc00) !important;
 }
-.gr-royal-elegance,
-.after-gr-royal-elegance::after,
-.before-gr-royal-elegance::before {
-  background:
+.gr-royal-elegance {
+  --background:
     linear-gradient(
       45deg,
       #141e30,
       #243b55,
       #4286f4) !important;
 }
-.gr-sunset,
-.after-gr-sunset::after,
-.before-gr-sunset::before {
-  background:
+.gr-sunset {
+  --background:
     linear-gradient(
       to right,
       #fdc830,
       #f37335) !important;
 }
-.gr-emerald-sea,
-.after-gr-emerald-sea::after,
-.before-gr-emerald-sea::before {
-  background:
+.gr-emerald-sea {
+  --background:
     linear-gradient(
       to right,
       #00f260,