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

groovier borders

Browse Source
This commit is contained in:
Chuck Dries 2022-05-20 00:03:42 -07:00
parent 77d1825b08
commit f905c9fd9c
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
4 changed files with 13 additions and 7 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 }) => (
<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 border-2 border-vibrant">
<div className="text-muted-light p-4 m-4 bg-muted-dark rounded-xl flex flex-col text-center z-10 cool-border-small-light">
<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

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

@ -10,11 +10,12 @@ const getNavClasses = (isClient) =>
const Nav = ({ imageIsLandscape, isClient }) => (
<nav
className={classnames(
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",
// imageIsLandscape
// ? "landscape:w-screen portrait:rounded-3xl portrait:m-2"
// : "portrait:w-screen landscape:rounded-3xl landscape:m-2",
"rounded-3xl m-2",
"p-2 flex justify-center",
isClient && "bg-vibrant-dark blurred-or-opaque-bg-2"
isClient && "bg-vibrant-dark cool-border-small-light"
)}
style={{ zIndex: 100 }}
>

3
src/pages/index.js
View File

@ -127,7 +127,7 @@ const IndexPage = ({
>
<div
className={classnames(
"landscape:flex-auto flex flex-col items-center justify-between",
"landscape:flex-auto flex flex-col items-center justify-between w-screen",
imageIsLandscape
? "portrait:items-center"
: "landscape:justify-center"
@ -246,6 +246,7 @@ export const query = graphql`
"DSC06490.jpg" # Japanese garden steps
"DSC06687.jpg" # Multnomah Falls long exposure
"DSC06616.jpg" # B&W abstract
"DSC05930.jpg" # Sedona thumb
]
}
}

6
src/styles/index.css
View File

@ -11,10 +11,14 @@ text-vibrant-dark border-vibrant bg-vibrant-light
}
.cool-border-small {
color: rgb(var(--dark-vibrant));
border: 1px solid black;
border: 1px solid rgb(var(--dark-vibrant));
background: rgb(var(--light-vibrant));
box-shadow: 3px 3px 0px 0px rgb(var(--dark-vibrant));
}
.cool-border-small:hover{
box-shadow: 6px 6px 0px 0px rgb(var(--dark-vibrant));
}
.cool-border-small-light {
border: 1px solid rgb(var(--light-vibrant));
box-shadow: 3px 3px 0px 0px rgb(var(--light-vibrant));
}