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

Fix firefox and bottom buttons

Browse Source
This commit is contained in:
Chuck Dries 2021-07-19 12:18:59 -07:00
parent 0060da3eb9
commit 269e674872
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/index.js
View File

@ -26,7 +26,7 @@ const getDifferentRand = (range, lastNs, iterations = 0) => {
const getButtonClasses = (isClient, colorMode = "vibrant") => const getButtonClasses = (isClient, colorMode = "vibrant") =>
classnames( classnames(
"z-20 rounded-md text-md inline-block px-3 py-2 my-1 mr-2 text-md hover:underline", "z-20 rounded-md text-md inline-block px-3 py-2 my-1 mr-2 text-md hover:underline",
isClient && `text-muted-light bg-${colorMode}-dark blurred-or-opaque-bg-2`, isClient && `text-${colorMode}-light bg-${colorMode}-dark blurred-or-opaque-bg-2`,
isClient && colorMode === "muted" ? `hover:bg-muted` : "" isClient && colorMode === "muted" ? `hover:bg-muted` : ""
); );
@ -263,7 +263,7 @@ const IndexPage = ({
className={classnames( className={classnames(
ar > 1 && "landscape:shadow-lg", ar > 1 && "landscape:shadow-lg",
"z-20 mb-4 inline-block mx-2", "z-20 mb-4 inline-block mx-2",
isClient && "bg-vibrant-dark blurred-or-opaque-bg-1" isClient && "bg-vibrant-dark blurred-or-opaque-bg-2"
)} )}
> >
<div className="flex-auto"> <div className="flex-auto">

10
src/styles/global.css
View File

@ -38,7 +38,7 @@
.blurred-or-opaque-bg-2 { .blurred-or-opaque-bg-2 {
@apply bg-opacity-90; @apply bg-opacity-90;
} }
@supports (backdrop-filter: blur(24px)) { @supports (backdrop-filter: none) {
.blurred-or-opaque-bg-1 { .blurred-or-opaque-bg-1 {
@apply bg-opacity-50 backdrop-filter backdrop-blur-lg; @apply bg-opacity-50 backdrop-filter backdrop-blur-lg;
} }
@ -46,6 +46,14 @@
@apply bg-opacity-70 backdrop-filter backdrop-blur; @apply bg-opacity-70 backdrop-filter backdrop-blur;
} }
} }
@supports not (backdrop-filter: none) {
.blurred-or-opaque-bg-1 {
@apply bg-opacity-70;
}
.blurred-or-opaque-bg-2 {
@apply bg-opacity-90;
}
}
@variants responsive { @variants responsive {
.h-two-thirds-vw { .h-two-thirds-vw {
height: 67vw; height: 67vw;