From 2df119cb3f4a6a0914ec8341e48fea9ea2e66670 Mon Sep 17 00:00:00 2001 From: Chris Villa Date: Fri, 7 Jul 2023 09:38:40 +0100 Subject: [PATCH] docs: make custom demo lib responsive --- .../blocks/ButtonGroup/styles.module.css | 1 + .../blocks/FeatureList/styles.module.css | 15 ++++++- .../app/configs/custom/blocks/Hero/index.tsx | 10 ++++- .../custom/blocks/Hero/styles.module.css | 45 ++++++++++++++++--- .../custom/blocks/Stats/styles.module.css | 14 +++--- .../custom/components/Footer/index.tsx | 2 +- 6 files changed, 73 insertions(+), 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 index 9dcdcdfc70..39c7a41fb8 100644 --- 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 index 2be374b35a..c1641e32a4 100644 --- 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 index 349a8a9ed9..48f68021fe 100644 --- 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 = { }, defaultProps: { title: "Hero", + align: "left", description: "Description", buttons: [{ label: "Learn more", href: "#" }], padding: "64px", @@ -72,7 +73,11 @@ export const Hero: ComponentConfig = { return (
{imageMode === "background" && ( <> @@ -106,10 +111,11 @@ export const Hero: ComponentConfig = { 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 index 98cc9874c9..ce427a566f 100644 --- a/apps/demo/app/configs/custom/blocks/Hero/styles.module.css +++ b/apps/demo/app/configs/custom/blocks/Hero/styles.module.css @@ -12,13 +12,26 @@ 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 { @@ -26,9 +39,14 @@ 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 index 0167eb831b..ad3c7798fe 100644 --- 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 index f7fad4b80c..459c2a9d06 100644 --- 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, }}