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)) {
console.warn("contrast still too low", imagePath);
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 textColor = colorMode === 'vibrant' ? 'text-vibrant-light' : 'text-muted-light'
const bgColor = colorMode === 'vibrant' ? 'bg-vibrant-dark' : 'bg-muted-dark'
const textColor =
colorMode === "vibrant" ? "text-vibrant-light" : "text-muted-light";
const bgColor = colorMode === "vibrant" ? "bg-vibrant-dark" : "bg-muted-dark";
return classnames(
"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`,
@ -143,7 +144,7 @@ const IndexPage = ({
props: { currentImage: currentImage?.base },
});
// eslint-disable-next-line
_paq.push(['trackEvent', 'Index', 'Shuffle', currentImage?.base]);
_paq.push(["trackEvent", "Index", "Shuffle", currentImage?.base]);
} catch (e) {
/* do nothing */
}

12
src/styles/global.css
View File

@ -32,26 +32,20 @@
.scroll-padding-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) {
.blurred-or-opaque-bg-1 {
@apply bg-opacity-50 backdrop-filter backdrop-blur-lg;
}
.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) {
.blurred-or-opaque-bg-1 {
@apply bg-opacity-70;
@apply bg-opacity-60;
}
.blurred-or-opaque-bg-2 {
@apply bg-opacity-90;
@apply bg-opacity-70;
}
}
@variants responsive {