Add page width configs

kobykotiv · Aug 18, 2024 · 980a403 · 980a403
1 parent a14295e
commit 980a403
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 16 deletions.
diff --git a/app/components/Section.tsx b/app/components/Section.tsx
@@ -36,7 +36,7 @@ let variants = cva("relative", {
     width: {
       full: "w-full h-full",
       stretch: "w-full h-full",
-      fixed: "w-full h-full max-w-[var(--page-width,1280px)] mx-auto",
+      fixed: "w-full h-full max-w-page mx-auto",
     },
     padding: {
       full: "",

diff --git a/app/modules/Cart.tsx b/app/modules/Cart.tsx
@@ -58,15 +58,18 @@ export function CartDetails({
       className={clsx(
         layout === "drawer" &&
           "grid grid-cols-1 h-screen-no-nav grid-rows-[1fr_auto] w-[400px]",
-        layout === "page" &&
-          "w-full pb-12 grid md:grid-cols-2 md:items-start gap-8 md:gap-8 lg:gap-12",
+        layout === "page" && [
+          "pb-12 w-full max-w-page mx-auto",
+          "grid md:grid-cols-2 lg:grid-cols-3 md:items-start",
+          "gap-8 md:gap-8 lg:gap-12",
+        ],
       )}
     >
       <CartLines lines={cart?.lines?.nodes} layout={layout} />
       {cartHasItems && (
         <CartSummary cost={cart.cost} layout={layout}>
           <CartDiscounts discountCodes={cart.discountCodes} />
-          <CartCheckoutActions checkoutUrl={cart.checkoutUrl} />
+          <CartCheckoutActions checkoutUrl={cart.checkoutUrl} layout={layout} />
         </CartSummary>
       )}
     </div>
@@ -163,7 +166,7 @@ function CartLines({
       aria-labelledby="cart-contents"
       className={clsx([
         y > 0 ? "border-t border-line/50" : "",
-        layout === "page" && "flex-grow md:translate-y-4",
+        layout === "page" && "flex-grow md:translate-y-4 lg:col-span-2",
         layout === "drawer" && "px-5 pb-5 overflow-auto transition",
       ])}
     >
@@ -182,18 +185,23 @@ function CartLines({
   );
 }
 
-function CartCheckoutActions({ checkoutUrl }: { checkoutUrl: string }) {
+function CartCheckoutActions({
+  checkoutUrl,
+  layout,
+}: { checkoutUrl: string; layout: Layouts }) {
   if (!checkoutUrl) return null;
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex flex-col gap-3">
       <a href={checkoutUrl} target="_self">
         <Button className="w-full">Continue to Checkout</Button>
       </a>
       {/* @todo: <CartShopPayButton cart={cart} /> */}
-      <Button variant="link" link="/cart" className="w-fit mx-auto pb-1">
-        View cart
-      </Button>
+      {layout === "drawer" && (
+        <Button variant="link" link="/cart" className="w-fit mx-auto">
+          View cart
+        </Button>
+      )}
     </div>
   );
 }

diff --git a/app/modules/Footer.tsx b/app/modules/Footer.tsx
@@ -23,7 +23,7 @@ let variants = cva("divide-y divide-line/50 space-y-9", {
     width: {
       full: "w-full h-full",
       stretch: "w-full h-full",
-      fixed: "w-full h-full max-w-[var(--page-width,1280px)] mx-auto",
+      fixed: "w-full h-full max-w-page mx-auto",
     },
     padding: {
       full: "",

diff --git a/app/sections/slideshow/slide.tsx b/app/sections/slideshow/slide.tsx
@@ -17,7 +17,7 @@ let variants = cva("w-full h-full flex flex-col [&_.paragraph]:mx-[unset]", {
     width: {
       full: "",
       stretch: "px-3 md:px-10 lg:px-16",
-      fixed: "max-w-[var(--page-width,1280px)] mx-auto px-3 md:px-10 lg:px-16",
+      fixed: "max-w-page mx-auto px-3 md:px-10 lg:px-16",
     },
     verticalPadding: {
       none: "",

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -104,6 +104,12 @@ export default {
       },
       width: {
         mobileGallery: "calc(100vw - 3rem)",
+        page: "var(--page-width, 1280px)",
+      },
+      maxWidth: {
+        page: "var(--page-width, 1280px)",
+        "prose-narrow": "45ch",
+        "prose-wide": "80ch",
       },
       fontFamily: {
         sans: ["Poppins", "ui-sans-serif", "system-ui", "sans-serif"],
@@ -134,10 +140,6 @@ export default {
       letterSpacing: {
         normal: "var(--body-base-letter-spacing)",
       },
-      maxWidth: {
-        "prose-narrow": "45ch",
-        "prose-wide": "80ch",
-      },
       boxShadow: {
         border: "inset 0px 0px 0px 1px rgb(var(--color-border) / 0.08)",
         header: "0 2px 5px #0000000f",