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

try removing background of header text when not against image

Browse Source
This commit is contained in:
Chuck Dries 2022-10-16 20:31:42 -07:00
parent f092be39a5
commit 3ea124e7ff
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
3 changed files with 29 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/index.tsx
View File

@ -159,8 +159,13 @@ const IndexPage = ({
>
<div
className={classnames(
"rounded-[50px] p-3 md:p-5 ml-2 mr-4 md:ml-3 md:mr-5 flex flex-col items-center z-10 border-r-[20px] border-b-[20px] mb-3",
isClient ? "cool-border-big" : "bg-gray-50"
"rounded-[50px] p-3 md:p-5 ml-2 mr-4 md:ml-3 md:mr-5 flex flex-col items-center z-10 mb-3",
isClient
? imageIsLandscape
? "text-vibrant-light landscape:text-vibrant-dark landscape:cool-border-big landscape:border-r-[20px] landscape:border-b-[20px]"
: "text-vibrant-light portrait:text-vibrant-dark portrait:cool-border-big portrait:border-r-[20px] portrait:border-b-[20px]"
: "bg-gray-50 border-r-[20px] border-b-[20px]",
isClient && ""
)}
>
<h1
@ -205,7 +210,10 @@ const IndexPage = ({
loading="eager"
style={{
gridArea: "1/1",
width: browserIsLandscape && !imageIsLandscape ? `${ar * 100}vh` : "100%",
width:
browserIsLandscape && !imageIsLandscape
? `${ar * 100}vh`
: "100%",
}}
/>
) : (

18
src/styles/global.css
View File

@ -57,6 +57,24 @@
height: 67vw;
}
}
.cool-border-big {
border: 1px solid rgb(var(--dark-vibrant));
background: rgb(var(--light-vibrant));
box-shadow: 10px 10px 0px 0px rgb(var(--dark-vibrant));
}
.cool-border-small {
color: rgb(var(--dark-vibrant));
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));
}
}
body {

20
src/styles/index.css
View File

@ -2,23 +2,3 @@
text-vibrant-dark border-vibrant bg-vibrant-light
} */
.cool-border-big {
color: rgb(var(--dark-vibrant));
border: 1px solid rgb(var(--dark-vibrant));
background: rgb(var(--light-vibrant));
box-shadow: 10px 10px 0px 0px rgb(var(--dark-vibrant));
}
.cool-border-small {
color: rgb(var(--dark-vibrant));
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));
}