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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/index/ActionButtons.js
View File

@ -12,7 +12,7 @@ const getButtonClasses = (isClient) =>
const ActionButtons = ({ isClient, image, shuffleImage }) => ( const ActionButtons = ({ isClient, image, shuffleImage }) => (
<div className="flex flex-col"> <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> <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"> <a className="rounded-full bg-muted-light hover:bg-vibrant text-muted-dark p-2" href="https://buzzwords.gg">
Buzzwords Buzzwords

15
src/components/index/Nav.js
View File

@ -1,13 +1,18 @@
import React from 'react'; import React from "react";
import classnames from 'classnames'; import classnames from "classnames";
const getNavClasses = (isClient) => 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 <nav
className={classnames( 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", "p-2 flex justify-center",
isClient && "bg-vibrant-dark blurred-or-opaque-bg-2" isClient && "bg-vibrant-dark blurred-or-opaque-bg-2"
)} )}

7
src/pages/index.js
View File

@ -113,7 +113,7 @@ const IndexPage = ({
<Helmet> <Helmet>
<title>Chuck Dries</title> <title>Chuck Dries</title>
<body <body
className={classnames(isClient ? "bg-vibrant-dark" : "bg-gray-800")} className={classnames(isClient ? "bg-muted-dark" : "bg-gray-800")}
style={getHelmetSafeBodyStyle(vibrant, screenHeight)} style={getHelmetSafeBodyStyle(vibrant, screenHeight)}
/> />
</Helmet> </Helmet>
@ -134,11 +134,12 @@ const IndexPage = ({
)} )}
style={{ gridArea: "1/1" }} style={{ gridArea: "1/1" }}
> >
<Nav ar={ar} isClient={isClient} /> <Nav imageIsLandscape={imageIsLandscape} isClient={isClient} />
<div <div
className={classnames( 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]", "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 <h1