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

swap some colors around

Browse Source
This commit is contained in:
Chuck Dries 2022-05-19 23:28:08 -07:00
parent 1b5042d87e
commit 8ded51ac62
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
3 changed files with 16 additions and 10 deletions
src
components/index
ActionButtons.jsNav.js
pages
index.js

2
src/components/index/ActionButtons.js

@ -12,7 +12,7 @@ const getButtonClasses = (isClient) =>
const ActionButtons = ({ isClient, image, shuffleImage }) => (
<div className="flex flex-col">
<div className="text-muted-light p-4 m-4 bg-muted-dark rounded-xl flex flex-col text-center z-10">
<div className="text-muted-light p-4 m-4 bg-muted-dark rounded-xl flex flex-col text-center z-10 border-2 border-vibrant">
<h3 className="mb-2 drop-shadow">Try my word game!</h3>
<a className="rounded-full bg-muted-light hover:bg-vibrant text-muted-dark p-2" href="https://buzzwords.gg">
Buzzwords

17
src/components/index/Nav.js

@ -1,13 +1,18 @@
import React from 'react';
import classnames from 'classnames';
import React from "react";
import classnames from "classnames";
const getNavClasses = (isClient) =>
classnames("hover:underline mx-2 md:mx-3", isClient ? "text-vibrant-light" : 'text-gray-200');
classnames(
"hover:underline mx-2 md:mx-3",
isClient ? "text-vibrant-light" : "text-gray-200"
);
const Nav = ({ ar, isClient }) => (
const Nav = ({ imageIsLandscape, isClient }) => (
<nav
className={classnames(
ar > 1 || !isClient ? "landscape:w-screen" : "portrait:w-screen",
imageIsLandscape
? "landscape:w-screen portrait:rounded-xl portrait:m-2 portrait:border-2 border-vibrant-light"
: "portrait:w-screen landscape:rounded-xl landscape:m-2 landscape:border-2 border-vibrant-light",
"p-2 flex justify-center",
isClient && "bg-vibrant-dark blurred-or-opaque-bg-2"
)}
@ -89,4 +94,4 @@ const Nav = ({ ar, isClient }) => (
</nav>
);
export default Nav;
export default Nav;

7
src/pages/index.js

@ -113,7 +113,7 @@ const IndexPage = ({
<Helmet>
<title>Chuck Dries</title>
<body
className={classnames(isClient ? "bg-vibrant-dark" : "bg-gray-800")}
className={classnames(isClient ? "bg-muted-dark" : "bg-gray-800")}
style={getHelmetSafeBodyStyle(vibrant, screenHeight)}
/>
</Helmet>
@ -134,11 +134,12 @@ const IndexPage = ({
)}
style={{ gridArea: "1/1" }}
>
<Nav ar={ar} isClient={isClient} />
<Nav imageIsLandscape={imageIsLandscape} isClient={isClient} />
<div
className={classnames(
"rounded-[50px] p-3 md:p-5 flex flex-col items-center z-10 border-r-[20px] border-b-[20px] mb-3 mx-2 md:mb-[-90px]",
isClient ? "cool-border-big" : "bg-gray-50"
isClient ? "cool-border-big" : "bg-gray-50",
!imageIsLandscape && "landscape:mr-4" // text is on left side of image, make some room for drop shadow
)}
>
<h1