docs: make custom demo lib responsive

measuredco · Jul 7, 2023 · 2df119c · 2df119c
1 parent 2234e01
commit 2df119c
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 14 deletions.
diff --git a/apps/demo/app/configs/custom/blocks/ButtonGroup/styles.module.css b/apps/demo/app/configs/custom/blocks/ButtonGroup/styles.module.css
@@ -1,6 +1,7 @@
 .ButtonGroup-actions {
   display: flex;
   gap: 24px;
+  flex-wrap: wrap;
 }
 
 .ButtonGroup--center .ButtonGroup-actions {

diff --git a/apps/demo/app/configs/custom/blocks/FeatureList/styles.module.css b/apps/demo/app/configs/custom/blocks/FeatureList/styles.module.css
@@ -3,17 +3,27 @@
   gap: 24px;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
 }
 
 .FeatureList--cardMode .FeatureList-items {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 768px) {
+  .FeatureList--cardMode .FeatureList-items {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
 }
 
 .FeatureList-item {
   display: flex;
   flex-direction: column;
   align-items: center;
+  max-width: 312px;
+  margin-left: auto;
+  margin-right: auto;
   gap: 16px;
   width: 100%;
 }
@@ -22,6 +32,9 @@
   background: white;
   box-shadow: rgba(140, 152, 164, 0.25) 0px 3px 6px 0px;
   border-radius: 8px;
+  max-width: 100%;
+  margin-left: unset;
+  margin-right: unset;
   padding: 24px;
   align-items: flex-start;
   width: auto;

diff --git a/apps/demo/app/configs/custom/blocks/Hero/index.tsx b/apps/demo/app/configs/custom/blocks/Hero/index.tsx
@@ -56,6 +56,7 @@ export const Hero: ComponentConfig<HeroProps> = {
   },
   defaultProps: {
     title: "Hero",
+    align: "left",
     description: "Description",
     buttons: [{ label: "Learn more", href: "#" }],
     padding: "64px",
@@ -72,7 +73,11 @@ export const Hero: ComponentConfig<HeroProps> = {
     return (
       <Section
         padding={padding}
-        className={getClassName({ center: align === "center" })}
+        className={getClassName({
+          left: align === "left",
+          center: align === "center",
+          hasImageBackground: imageMode === "background",
+        })}
       >
         {imageMode === "background" && (
           <>
@@ -106,10 +111,11 @@ export const Hero: ComponentConfig<HeroProps> = {
                 backgroundImage: `url('${imageUrl}')`,
                 backgroundSize: "cover",
                 backgroundRepeat: "no-repeat",
+                backgroundPosition: "center",
                 borderRadius: 24,
                 height: 356,
-                width: 512,
                 marginLeft: "auto",
+                width: "100%",
               }}
             />
           )}

diff --git a/apps/demo/app/configs/custom/blocks/Hero/styles.module.css b/apps/demo/app/configs/custom/blocks/Hero/styles.module.css
@@ -12,23 +12,41 @@
   display: flex;
   align-items: center;
   position: relative;
-  gap: 24px;
+  gap: 48px;
+  flex-wrap: wrap;
   z-index: 1;
 }
 
+@media (min-width: 1024px) {
+  .Hero-inner {
+    flex-wrap: nowrap;
+  }
+}
+
 .Hero h1 {
   line-height: 1.1;
-  font-size: 64px;
+  font-size: 48px;
+}
+
+@media (min-width: 768px) {
+  .Hero h1 {
+    font-size: 64px;
+  }
 }
 
 .Hero-subtitle {
   color: var(--puck-color-grey-4);
   font-size: var(--puck-font-size-m);
   line-height: 1.5;
   margin: 0;
+  margin-bottom: 8px;
   font-weight: 300;
 }
 
+.Hero--hasImageBackground .Hero-subtitle {
+  color: var(--puck-color-grey-2);
+}
+
 .Hero-image {
   background-repeat: no-repeat;
   background-size: cover;
@@ -43,8 +61,8 @@
 .Hero-imageOverlay {
   background-image: linear-gradient(
     -90deg,
-    rgba(255, 255, 255, 0),
-    rgb(247, 250, 255) 80%
+    rgb(247, 250, 255, 0.7) 0%,
+    rgb(247, 250, 255, 0.7) 80%
   );
   position: absolute;
   right: 0;
@@ -53,6 +71,16 @@
   left: 0;
 }
 
+@media (min-width: 768px) {
+  .Hero--left .Hero-imageOverlay {
+    background-image: linear-gradient(
+      -90deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgb(247, 250, 255) 70%
+    );
+  }
+}
+
 .Hero-bg img {
   height: 100%;
 }
@@ -61,11 +89,18 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
-  max-width: 50%;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .Hero--hasImageBackground .Hero-content {
+    max-width: 50%;
+  }
 }
 
 .Hero--center .Hero-inner {
   justify-content: center;
+  text-align: center;
 }
 
 .Hero--center .Hero-content {

diff --git a/apps/demo/app/configs/custom/blocks/Stats/styles.module.css b/apps/demo/app/configs/custom/blocks/Stats/styles.module.css
@@ -1,6 +1,3 @@
-.Stats {
-}
-
 .Stats-items {
   background-image: linear-gradient(
     120deg,
@@ -9,11 +6,18 @@
   );
   border-radius: 24px;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr;
   grid-gap: 72px;
   align-items: center;
   justify-content: space-between;
-  padding: 128px;
+  padding: 64px;
+}
+
+@media (min-width: 768px) {
+  .Stats-items {
+    grid-template-columns: 1fr 1fr;
+    padding: 128px;
+  }
 }
 
 .Stats-item {

diff --git a/apps/demo/app/configs/custom/components/Footer/index.tsx b/apps/demo/app/configs/custom/components/Footer/index.tsx
@@ -61,7 +61,7 @@ const Footer = ({ children }: { children: ReactNode }) => {
           style={{
             display: "grid",
             gridGap: 24,
-            gridTemplateColumns: "1fr 1fr 1fr 1fr",
+            gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
             paddingTop: 24,
             paddingBottom: 24,
           }}