From 05f876270295c66326ebb5c237332875f386ad0a Mon Sep 17 00:00:00 2001
From: Jason Laster <jason.laster.11@gmail.com>
Date: Sat, 6 Apr 2024 23:20:41 -0700
Subject: [PATCH] tweak styles

---
 packages/overboard/index.css              |  8 ++++----
 packages/site/app.css                     | 15 ++++++++-------
 packages/site/components/PurchaseForm.tsx |  4 ++--
 packages/site/package.json                |  2 +-
 packages/site/pages/index.tsx             |  4 ++--
 5 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/overboard/index.css b/packages/overboard/index.css
index ae327dd..df9e0b7 100644
--- a/packages/overboard/index.css
+++ b/packages/overboard/index.css
@@ -84,8 +84,8 @@
   --foreground-error: #fff;
   display: grid;
   align-items: center;
-  min-height: 72px;
-  min-width: 320px;
+  min-height: 65px;
+  min-width: 240px;
   justify-content: center;
   align-items: center;
   padding: 8px 16px;
@@ -94,8 +94,8 @@
     0px 0px 5px rgba(255, 99, 228, 0.5);
   border-radius: 112px;
   font-weight: 600;
-  font-size: 20px;
-  line-height: 24px;
+  font-size: 15px;
+  line-height: 18px;
   text-align: center;
   letter-spacing: 0.26em;
   text-transform: uppercase;
diff --git a/packages/site/app.css b/packages/site/app.css
index 0e08eeb..672c3a8 100644
--- a/packages/site/app.css
+++ b/packages/site/app.css
@@ -10,8 +10,8 @@
 }
 
 :root {
-  --font-size-primary: 5rem;
-  --font-size-secondary: 2rem;
+  --font-size-primary: 3rem;
+  --font-size-secondary: 1.5rem;
   --font-size-tertiary: 1rem;
 
   --radii-primary: 0.2rem;
@@ -43,7 +43,8 @@ body {
 img,
 svg {
   display: block;
-  max-width: 100%;
+  max-width: 70%;
+  margin: 0 auto;
 }
 
 h1,
@@ -136,10 +137,10 @@ header {
 .Color input {
   grid-area: 1 / 1 / 1 / 1;
   appearance: none;
-  width: var(--overboard-space-4);
-  height: var(--overboard-space-4);
-  min-width: 40px;
-  min-height: 40px;
+  width: var(--overboard-space-3);
+  height: var(--overboard-space-3);
+  min-width: 20px;
+  min-height: 20px;
   border-radius: 100%;
   transform: scale(1);
   transition: transform 180ms ease-out;
diff --git a/packages/site/components/PurchaseForm.tsx b/packages/site/components/PurchaseForm.tsx
index e77fa18..ff4ae8c 100644
--- a/packages/site/components/PurchaseForm.tsx
+++ b/packages/site/components/PurchaseForm.tsx
@@ -40,10 +40,10 @@ export function PurchaseForm({
       action="/api/purchase"
       method="post"
       onSubmit={handleSubmit}
-      gap={4}
+      gap={3}
       style={{ placeItems: "center" }}
     >
-      <Column gap={3}>
+      <Column gap={2}>
         <Colors onColorChange={color => onDataChange("color", color)}>
           {Object.entries(colorways).map(([name, [start, end]]) => (
             <Color
diff --git a/packages/site/package.json b/packages/site/package.json
index 92c4b7c..4fcbe6c 100644
--- a/packages/site/package.json
+++ b/packages/site/package.json
@@ -29,4 +29,4 @@
     "cypress": "^12.14.0",
     "webpack": "^5.75.0"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/site/pages/index.tsx b/packages/site/pages/index.tsx
index 8683274..e44b57e 100644
--- a/packages/site/pages/index.tsx
+++ b/packages/site/pages/index.tsx
@@ -24,8 +24,8 @@ export default function Product() {
         display: "grid",
         placeItems: "center",
         paddingTop: "var(--space-3)",
-        paddingBottom: "var(--space-3)",
-        gap: "var(--space-3)",
+        paddingBottom: "var(--space-2",
+        gap: "var(--space-2)",
       }}
     >
       <Column gap={1}>