Add grass backdrop

Author: Rikthepixel

Diff for: src/components/layout/Footer.tsx

@@ -6,7 +6,7 @@ const Footer = () => {
   return (
     <div className="flex items-center justify-center w-[calc(100%_+_4rem)] pt-16 mt-auto text-cr-primary-contrast">
       <footer className="flex flex-col w-full gap-4 p-8 max-w-7xl rounded-t-2xl bg-cr-primary image-star">
-        <div className="flex flex-col items-center gap-2 p-2 rounded-2xl bg-white/20 sm:flex-row backdrop-blur-[1.25px]">
+        <div className="flex flex-col items-center gap-2 p-2 rounded-2xl bg-cr-primary-contrast/20 border border-cr-primary-contrast/20 backdrop-glass sm:flex-row">
           <div className="flex items-center gap-2">
             <img
               className="w-12 h-12 rotate-30"

Diff for: src/pages/index.tsx

@@ -79,7 +79,7 @@ const FrontPage: Page = ({ pathname }) => {
             </div>
           </section>
           <section aria-label="introduction" className="flex flex-col gap-12 p-8 text-lg -mx-8 md:mx-0 motion-safe:transition-[margin] text-center rounded-2xl xl:flex-row text-cr-primary-contrast image-star bg-cr-primary">
-            <Heading.H2 id="introduction" className="flex p-4 flex-col items-center justify-center w-full rounded-2xl text-cr-primary-contrast bg-cr-primary-contrast/30 backdrop-blur-[1.25px] border border-cr-primary-contrast/20 xl:p-0 xl:w-1/2">
+            <Heading.H2 id="introduction" className="flex p-4 flex-col items-center justify-center w-full rounded-2xl text-cr-primary-contrast bg-cr-primary-contrast/30 backdrop-glass border border-cr-primary-contrast/20 xl:p-0 xl:w-1/2">
               <span className="text-2xl">
                 Introducing...
               </span>

Diff for: tailwind.config.js

@@ -47,6 +47,12 @@ module.exports = {
           "background-image": "url('/images/textures/star.svg')",
           "background-size": "2rem 2rem",
           "background-position": "50% 50%"
+        },
+        ".backdrop-glass": {
+          "--tw-backdrop-blur": "blur(1.25px);",
+          "--tw-backdrop-saturate": "saturate(180%)",
+          "-webkit-backdrop-filter": "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);",
+          "backdrop-filter": "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);"
         }
       });
       addUtilities({