From 3ea124e7fffc479f58c5c37e98fba87d488adf72 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sun, 16 Oct 2022 20:31:42 -0700
Subject: [PATCH] try removing background of header text when not against image
---
src/pages/index.tsx | 14 +++++++++++---
src/styles/global.css | 18 ++++++++++++++++++
src/styles/index.css | 20 --------------------
3 files changed, 29 insertions(+), 23 deletions(-)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4beb852..59a59c2 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -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%",
}}
/>
) : (
diff --git a/src/styles/global.css b/src/styles/global.css
index a6ec8a5..4e3a9e8 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -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 {
diff --git a/src/styles/index.css b/src/styles/index.css
index c5e3aed..e57435a 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -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));
-}
\ No newline at end of file