chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add backdrop blur to hero text area

Browse Source
This commit is contained in:
Chuck Dries 2021-07-11 21:43:20 -07:00
parent 4473d1a331
commit b04bef50a9
3 changed files with 60 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/index.js
View File

@ -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>

1
src/styles/global.css
View File

@ -33,7 +33,6 @@
scroll-padding: theme('spacing.6');
}
@variants responsive {
.h-two-thirds-vw {
height: 67vw;
}

66
tailwind.config.js
View File

@ -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))';
},
},
},
},