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

Darken muted colors when necessary

Browse Source
This commit is contained in:
Chuck Dries 2021-07-21 09:19:55 -07:00
parent 53261f7ee6
commit b71bc23a1c
No known key found for this signature in database
GPG Key ID: 4E6B9B2DCEC64BA9
3 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
gatsby-node.js
View File

@ -56,6 +56,11 @@ function processColors(vibrantData, imagePath) {
} }
} }
// only used for hover styles, so we should give it a shot but it's not a huge deal if it's not very legible
if (badContrast(Muted, LightMuted)) {
Muted = Muted.darken();
}
if (badContrast(DarkVibrant, Vibrant)) { if (badContrast(DarkVibrant, Vibrant)) {
console.warn("contrast still too low", imagePath); console.warn("contrast still too low", imagePath);
logColorsWithContrast(Vibrant, DarkVibrant, "V-DV"); logColorsWithContrast(Vibrant, DarkVibrant, "V-DV");

7
src/pages/index.js
View File

@ -24,8 +24,9 @@ const getDifferentRand = (range, lastNs, iterations = 0) => {
}; };
const getButtonClasses = (isClient, colorMode = "vibrant") => { const getButtonClasses = (isClient, colorMode = "vibrant") => {
const textColor = colorMode === 'vibrant' ? 'text-vibrant-light' : 'text-muted-light' const textColor =
const bgColor = colorMode === 'vibrant' ? 'bg-vibrant-dark' : 'bg-muted-dark' colorMode === "vibrant" ? "text-vibrant-light" : "text-muted-light";
const bgColor = colorMode === "vibrant" ? "bg-vibrant-dark" : "bg-muted-dark";
return classnames( return 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 && `${textColor} ${bgColor} blurred-or-opaque-bg-2`, isClient && `${textColor} ${bgColor} blurred-or-opaque-bg-2`,
@ -143,7 +144,7 @@ const IndexPage = ({
props: { currentImage: currentImage?.base }, props: { currentImage: currentImage?.base },
}); });
// eslint-disable-next-line // eslint-disable-next-line
_paq.push(['trackEvent', 'Index', 'Shuffle', currentImage?.base]); _paq.push(["trackEvent", "Index", "Shuffle", currentImage?.base]);
} catch (e) { } catch (e) {
/* do nothing */ /* do nothing */
} }

12
src/styles/global.css
View File

@ -32,26 +32,20 @@
.scroll-padding-6 { .scroll-padding-6 {
scroll-padding: theme("spacing.6"); scroll-padding: theme("spacing.6");
} }
.blurred-or-opaque-bg-1 {
@apply bg-opacity-70;
}
.blurred-or-opaque-bg-2 {
@apply bg-opacity-90;
}
@supports (backdrop-filter: none) { @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;
} }
.blurred-or-opaque-bg-2 { .blurred-or-opaque-bg-2 {
@apply bg-opacity-70 backdrop-filter backdrop-blur; @apply bg-opacity-60 backdrop-filter backdrop-blur;
} }
} }
@supports not (backdrop-filter: none) { @supports not (backdrop-filter: none) {
.blurred-or-opaque-bg-1 { .blurred-or-opaque-bg-1 {
@apply bg-opacity-70; @apply bg-opacity-60;
} }
.blurred-or-opaque-bg-2 { .blurred-or-opaque-bg-2 {
@apply bg-opacity-90; @apply bg-opacity-70;
} }
} }
@variants responsive { @variants responsive {