Add text shadow to hero text

Author: SheepTester

client/src/components/Dashboard/style.module.scss

@@ -64,6 +64,13 @@
       background-size: 500%;
       animation: gradient-in 2.5s 0.5s both;
 
+      // Wrap each shadow in drop-shadow()
+      $drop-shadows: ();
+      @each $shadow in vars.$text-shadow {
+        $drop-shadows: append($drop-shadows, drop-shadow(#{$shadow}));
+      }
+      filter: #{$drop-shadows};
+
       @keyframes gradient-in {
         from {
           background-position: right;
@@ -75,6 +82,7 @@
     }
 
     .subtitle {
+      text-shadow: vars.$text-shadow;
       animation: fade-in 1s 1.5s backwards;
     }
 

client/src/components/Footer/style.module.scss

@@ -9,9 +9,7 @@
   padding: 8rem 0;
   position: relative;
 
-  text-shadow:
-    0 1px 4px rgba(0, 0, 0, 0.5),
-    0 3px 15px rgba(0, 0, 0, 0.7);
+  text-shadow: vars.$text-shadow;
 }
 
 .backgroundLeft {

client/src/styles/vars.scss

@@ -22,6 +22,10 @@ $breakpoint-sm: 425px; //
 $breakpoint-md: 870px; // Use this breakpoint for most mobile-first CSS designs
 $breakpoint-lg: 1024px;
 
+$text-shadow:
+  0 1px 4px rgba(0, 0, 0, 0.5),
+  0 3px 15px rgba(0, 0, 0, 0.7);
+
 $side-padding: 4rem;
 $side-padding-mobile: 1rem;