From b04bef50a9650ca9854a21c7fcb4285fc01f34ba Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sun, 11 Jul 2021 21:43:20 -0700
Subject: [PATCH] Add backdrop blur to hero text area

---
 src/pages/index.js    |  7 ++++-
 src/styles/global.css |  1 -
 tailwind.config.js    | 66 +++++++++++++++++++++++++++++++++++--------
 3 files changed, 60 insertions(+), 14 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index d6de8a0..d1d109d 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -109,7 +109,12 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
         : <div className="landscape:h-screen portrait:h-two-thirds-vw w-full" style={{gridArea: '1/1' }}></div> }
       <div className="relative grid place-items-center" style={{gridArea: '1/1'}}>
         <div className="m-0 sm:m-3 flex flex-col items-end">
-          <section className={classnames('rounded-xl md:px-6 px-4 md:py-5 py-3', isClient && 'border-2 border-vibrant-light bg-vibrant-dark-75')}>
+          <section
+            className={classnames(
+              'rounded-xl md:px-6 px-4 md:py-5 py-3', isClient &&
+              'border-2 border-vibrant-light bg-vibrant-dark bg-opacity-60 backdrop-filter backdrop-blur-lg'
+            )}
+          >
             <div className="mx-auto">
               <h1 className={classnames('font-black text-4xl sm:text-5xl md:text-6xl', isClient && 'text-vibrant-light')}>Chuck Dries</h1>
               <h2 className={classnames('text-xl md:text-2xl', isClient && 'text-vibrant')}>Full stack software engineer &amp; hobbyist photographer</h2>
diff --git a/src/styles/global.css b/src/styles/global.css
index 85f11a2..f6a90bc 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -33,7 +33,6 @@
     scroll-padding: theme('spacing.6');
   }
   @variants responsive {
-
     .h-two-thirds-vw {
       height: 67vw;
     }
diff --git a/tailwind.config.js b/tailwind.config.js
index 4e760f2..5b8e451 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -33,20 +33,62 @@ module.exports = {
     extend: {
       colors: {
         vibrant: {
-          DEFAULT: 'rgb(var(--vibrant))',
-          light: 'rgb(var(--light-vibrant))',
-          dark: 'rgb(var(--dark-vibrant))',
-          '75': 'rgba(var(--vibrant), .8)',
-          'light-75': 'rgba(var(--light-vibrant), .8)',
-          'dark-75': 'rgba(var(--dark-vibrant), .8)',
+          DEFAULT: ({ opacityVariable, opacityValue }) => {
+            if (opacityValue !== undefined) {
+              return `rgba(var(--vibrant), ${opacityValue})`;
+            }
+            if (opacityVariable !== undefined) {
+              return `rgba(var(--vibrant), var(${opacityVariable}, 1))`;
+            }
+            return 'rgb(var(--vibrant))';
+          },
+          light: ({ opacityVariable, opacityValue }) => {
+            if (opacityValue !== undefined) {
+              return `rgba(var(--light-vibrant), ${opacityValue})`;
+            }
+            if (opacityVariable !== undefined) {
+              return `rgba(var(--light-vibrant), var(${opacityVariable}, 1))`;
+            }
+            return 'rgb(var(--light-vibrant))';
+          },
+          dark: ({ opacityVariable, opacityValue }) => {
+            if (opacityValue !== undefined) {
+              return `rgba(var(--dark-vibrant), ${opacityValue})`;
+            }
+            if (opacityVariable !== undefined) {
+              return `rgba(var(--dark-vibrant), var(${opacityVariable}, 1))`;
+            }
+            return 'rgb(var(--dark-vibrant))';
+          },
         },
         muted: {
-          DEFAULT: 'rgb(var(--muted))',
-          light: 'rgb(var(--light-muted))',
-          dark: 'rgb(var(--dark-muted))',
-          '75': 'rgba(var(--muted), .8)',
-          'light-75': 'rgba(var(--light-muted), .8)',
-          'dark-75': 'rgba(var(--dark-muted), .8)',
+          DEFAULT: ({ opacityVariable, opacityValue }) => {
+            if (opacityValue !== undefined) {
+              return `rgba(var(--muted), ${opacityValue})`;
+            }
+            if (opacityVariable !== undefined) {
+              return `rgba(var(--muted), var(${opacityVariable}, 1))`;
+            }
+            return 'rgb(var(--muted))';
+          },
+          light: ({ opacityVariable, opacityValue }) => {
+            if (opacityValue !== undefined) {
+              return `rgba(var(--light-muted), ${opacityValue})`;
+            }
+            if (opacityVariable !== undefined) {
+              return `rgba(var(--light-muted), var(${opacityVariable}, 1))`;
+            }
+            return 'rgb(var(--light-muted))';
+          },
+          dark: ({ opacityVariable, opacityValue }) => {
+            if (opacityValue !== undefined) {
+              return `rgba(var(--dark-muted), ${opacityValue})`;
+            }
+            if (opacityVariable !== undefined) {
+              return `rgba(var(--dark-muted), var(${opacityVariable}, 1))`;
+            }
+            return 'rgb(var(--dark-muted))';
+          },
         },
       },
     },