tweak styles

replayio-public · Apr 7, 2024 · a04e37a · a04e37a
1 parent 9fec0db
commit a04e37a
Show file tree

Hide file tree

Showing 6 changed files with 5,563 additions and 3,623 deletions.
diff --git 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
@@ -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
@@ -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
@@ -29,4 +29,4 @@
     "cypress": "^12.14.0",
     "webpack": "^5.75.0"
   }
-}
+}
diff --git 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}>
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,4 +29,4 @@ @@
         "cypress": "^12.14.0",
         "webpack": "^5.75.0"
       }
-    }
+    }