fix: correct colours, correctly change padding when hiring banner closed

Author: ThatNerdSquared

src/components/HiringBanner.astro

@@ -7,7 +7,8 @@
 
 <script>
   const closeHiringBanner = () => {
-    document.documentElement.style.setProperty("--hiring-banner-height", "0")
+    // we have to specify unit here for this value to be valid in calc() calls
+    document.documentElement.style.setProperty("--hiring-banner-height", "0rem")
     document.getElementById("hiring-banner").remove()
   }
 
@@ -29,7 +30,7 @@
     padding: 0 0.5rem;
     height: var(--hiring-banner-height);
     width: 100%;
-    background-color: var(--color-secondary-red);
+    background-color: var(--color-alert-red);
   }
 
   a {

src/layouts/Layout.astro

@@ -47,11 +47,12 @@ const { title } = Astro.props
 		--color-secondary-green: #d8f0e2;
 		--color-secondary-orange: #fff0e2;
 		--color-secondary-purple: #e4e6fc;
-    --color-secondary-red: #ba4943;
+    --color-secondary-red: #fff6f5; /* used in how we work pg */
 		--color-secondary-blue: #ebf3fe;
 		--color-secondary-peach: #fdf2e9;
 
 		--color-tertiary-green: #1b8043;
+    --color-alert-red: #ba4943;
 
 		--background-color: #ffffff;
 		--text-color-primary: var(--color-primary-black);