Cleans up styles

NYPL · Dec 3, 2024 · e29688c · e29688c
1 parent f911d19
commit e29688c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/src/components/Template/TemplateNew.tsx b/src/components/Template/TemplateNew.tsx
@@ -1,7 +1,6 @@
 import { Box, useStyleConfig } from "@chakra-ui/react";
 
 const TemplateNew: React.FC<any> = ({ children, sidebar = "none" }) => {
-  console.log("side -->", sidebar);
   const styles = useStyleConfig("TemplateNew", { variant: sidebar });
 
   return <Box __css={styles}>{children}</Box>;
@@ -20,7 +19,7 @@ const TemplateNewTop: React.FC<any> = ({ children }) => {
 };
 
 const TemplateNewMain: React.FC<any> = ({ children }) => {
-  const styles = useStyleConfig("TemplateNewMain", {});
+  const styles = useStyleConfig("TemplateNewMain");
 
   return <Box __css={styles}>{children}</Box>;
 };

diff --git a/src/theme/components/templatenew.ts b/src/theme/components/templatenew.ts
@@ -8,39 +8,39 @@ const TemplateNew = defineStyleConfig({
   baseStyle: defineStyle({
     boxSizing: "border-box",
     color: "ui.typography.body",
-    maxWidth: "min(100vw, 1280px)",
-    m: "0 auto",
     display: "grid",
+    maxWidth: "1280px",
+    m: "0 auto",
     p: "s",
     gap: responsiveGap,
+    gridTemplateAreas: `"breakout" "top" "main" "bottom"`,
     gridTemplateColumns: "repeat(1, minmax(100px, 1fr))",
     gridTemplateRows: "auto",
-    gridTemplateAreas: `"breakout" "top" "main" "bottom"`,
   }),
   variants: {
     left: {
+      gridTemplateAreas: {
+        base: `"breakout" "top" "sidebar" "main" "bottom"`,
+        md: `"breakout breakout" "top top" "sidebar main" "bottom bottom"`,
+      },
       gridTemplateColumns: {
         base: "repeat(1, minmax(100px, 1fr))",
         md: "repeat(2, minmax(100px, 1fr))",
         lg: "minmax(100px, 1fr) minmax(200px, 2fr)",
         xl: "minmax(100px, 1fr) minmax(300px, 3fr)",
       },
-      gridTemplateAreas: {
-        base: `"breakout" "top" "sidebar" "main" "bottom"`,
-        md: `"breakout breakout" "top top" "sidebar main" "bottom bottom"`,
-      },
     },
     right: {
+      gridTemplateAreas: {
+        base: `"breakout" "top" "main" "sidebar" "bottom"`,
+        md: `"breakout breakout" "top top" "main sidebar" "bottom bottom"`,
+      },
       gridTemplateColumns: {
         base: "repeat(1, minmax(100px, 1fr))",
         md: "repeat(2, minmax(100px, 1fr))",
         lg: "minmax(200px, 2fr) minmax(100px, 1fr)",
         xl: "minmax(300px, 3fr) minmax(100px, 1fr)",
       },
-      gridTemplateAreas: {
-        base: `"breakout" "top" "main" "sidebar" "bottom"`,
-        md: `"breakout breakout" "top top" "main sidebar" "bottom bottom"`,
-      },
     },
   },
 });
@@ -64,6 +64,16 @@ const TemplateNewMain = defineStyleConfig({
   baseStyle: defineStyle({
     gridArea: "main",
   }),
+  variants: {
+    featuredContent: {
+      width: "100vw",
+      ml: "calc(-50vw + 50%)",
+      px: "s",
+    },
+    text: {
+      maxWidth: "600px",
+    },
+  },
 });
 
 const TemplateNewSidebar = defineStyleConfig({