diff --git a/components/toggle-panel/styles.module.scss b/components/toggle-panel/styles.module.scss index 14bfc345..ae0a0894 100644 --- a/components/toggle-panel/styles.module.scss +++ b/components/toggle-panel/styles.module.scss @@ -9,7 +9,7 @@ background: #b75400; border-radius: 2px; padding: 15px 10px; - height: 54px; + min-height: 54px; display: flex; align-items: center; width: 100%; diff --git a/design-v2/_variables.scss b/design-v2/_variables.scss index f0011be9..c3796564 100644 --- a/design-v2/_variables.scss +++ b/design-v2/_variables.scss @@ -1,4 +1,5 @@ $breakpoint-sm: 46rem; +$breakpoint-md: 48rem; $breakpoint-lg: 80rem; $status-icon-font-color: var(--white); $status-icon-background: #8bc34a; diff --git a/design-v2/components/membership-table/styles.module.scss b/design-v2/components/membership-table/styles.module.scss index 39e8ac31..f602487e 100644 --- a/design-v2/components/membership-table/styles.module.scss +++ b/design-v2/components/membership-table/styles.module.scss @@ -1,3 +1,4 @@ +@import 'design-v2/variables'; $table-border: 1px solid var(--gray-400); $checkbox-success-color: #8bc34a; $checkbox-danger-color: rgba(255, 95, 82, 1); @@ -66,10 +67,17 @@ $card-header-color: #fef5ef; padding: 0.5rem; font-weight: 600; background-color: var(--gray-100); + @media (max-width: $breakpoint-sm) { + font-size: 10px; + } } &-padding { padding: 1rem; font-weight: 400; + @media (max-width: $breakpoint-sm) { + padding: 6px; + width: 85px; + } } &-description { padding: 1.5rem; @@ -85,7 +93,9 @@ $card-header-color: #fef5ef; font-weight: 400; text-align: center; background-color: var(--gray-100); - + @media (max-width: $breakpoint-sm) { + padding: 2px; + } &-active { background-color: #fae2d2; } @@ -96,6 +106,9 @@ $card-header-color: #fef5ef; color: var(--primary); font-weight: 400; font-size: 0.9rem; + @media (max-width: $breakpoint-sm) { + font-size: 10px; + } } &-status { @@ -120,12 +133,18 @@ $card-header-color: #fef5ef; } &-title { font-size: 1.2rem; + @media (max-width: $breakpoint-sm) { + font-size: 10px; + } a { color: var(--black); text-decoration: underline; } &-details { margin-bottom: 1rem; + @media (max-width: $breakpoint-sm) { + margin-bottom: 5px; + } } } } @@ -151,6 +170,16 @@ $card-header-color: #fef5ef; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); + @media (max-width: $breakpoint-sm) { + width: 6px; + height: 10px; + left: 6px; + top: 2px; + } + } + @media (max-width: $breakpoint-sm) { + width: 1rem; + height: 1rem; } } @@ -174,18 +203,33 @@ $card-header-color: #fef5ef; height: 2px; background-color: white; top: 11px; + @media (max-width: $breakpoint-sm) { + width: 10px; + height: 2px; + top: 7px; + } } &::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); left: 2px; + @media (max-width: $breakpoint-sm) { + left: 3px; + } } &::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); right: 2px; + @media (max-width: $breakpoint-sm) { + left: 3px; + } + } + @media (max-width: $breakpoint-sm) { + width: 1rem; + height: 1rem; } } diff --git a/pages/about/about.module.scss b/pages/about/about.module.scss index 969c212a..b0aeb620 100644 --- a/pages/about/about.module.scss +++ b/pages/about/about.module.scss @@ -1,4 +1,5 @@ @import '~components/bootstrap/core'; +@import 'design-v2/variables'; .related { @include section-skew-left($gray-100); @@ -18,8 +19,14 @@ display: flex; justify-content: center; align-items: center; + @media (max-width: $breakpoint-sm) { + width: 320px; + } .governance-image { margin: 42px 0 32px 0; + @media (max-width: $breakpoint-sm) { + width: 100%; + } } } } @@ -199,12 +206,18 @@ .researchSection { padding: 0 0 44px 0; grid-template-columns: 1fr 100% 1fr; + .research-item { + width: 100%; + max-width: unset; + } .always-open { margin-top: 24px; display: flex; justify-content: space-between; - flex-wrap: wrap; gap: 20px; + @media (max-width: $breakpoint-sm) { + flex-wrap: wrap; + } } .toggle-panel-title { font-style: normal; @@ -290,6 +303,9 @@ .toggle-item-small { width: 48%; + @media (max-width: $breakpoint-sm) { + width: 100%; + } } .footer-wrapper { @@ -299,7 +315,15 @@ background: #f5f5f5; padding: 24px; margin-top: 24px; + width: 100%; + max-width: unset; + @media (max-width: $breakpoint-sm) { + flex-wrap: wrap; + } .footer-text { margin-bottom: 0; + @media (max-width: $breakpoint-sm) { + margin-bottom: 0.5rem; + } } } diff --git a/pages/about/research-outputs.jsx b/pages/about/research-outputs.jsx index bb679e2c..09017c9f 100644 --- a/pages/about/research-outputs.jsx +++ b/pages/about/research-outputs.jsx @@ -118,7 +118,7 @@ const ResearchOutputsSection = ({ ...restProps }) => ( <Section id={id} {...restProps} className={styles.researchSection}> - <Content> + <Content className={styles.researchItem}> <TogglePanel id={title} title={title} diff --git a/pages/governance/community.module.scss b/pages/governance/community.module.scss index 364fff93..63d929f0 100644 --- a/pages/governance/community.module.scss +++ b/pages/governance/community.module.scss @@ -18,6 +18,10 @@ display: flex; align-items: center; justify-content: center; + @media (max-width: $breakpoint-sm) { + width: 100%; + flex: unset; + } } .header { @@ -44,5 +48,8 @@ margin-bottom: 5px; } } + @media (max-width: $breakpoint-lg) { + margin-left: 1.5rem; + } } } diff --git a/templates/governance/advisory/advisory.module.scss b/templates/governance/advisory/advisory.module.scss index 757312fb..4e8c0054 100644 --- a/templates/governance/advisory/advisory.module.scss +++ b/templates/governance/advisory/advisory.module.scss @@ -1,3 +1,4 @@ +@import 'design-v2/variables'; .organisation-wrapper { display: flex; align-items: center; @@ -11,3 +12,16 @@ justify-content: center; } } + +.supporters { + @media (max-width: $breakpoint-sm) { + td { + font-size: 10px; + } + th { + button { + font-size: 10px; + } + } + } +} diff --git a/templates/governance/supporters/supporters.module.scss b/templates/governance/supporters/supporters.module.scss index 3dcd984b..87169640 100644 --- a/templates/governance/supporters/supporters.module.scss +++ b/templates/governance/supporters/supporters.module.scss @@ -1,3 +1,4 @@ +@import 'design-v2/variables'; $grid-responsive-for-sections: repeat(auto-fit, minmax(300px, 1fr)); $grid-responsive-for-items: repeat(auto-fit, minmax(500px, 1fr)); @@ -46,6 +47,9 @@ $grid-responsive-for-items: repeat(auto-fit, minmax(500px, 1fr)); grid-gap: 3rem; grid-template-columns: $grid-responsive-for-items; margin-top: 48px; + @media (max-width: $breakpoint-sm) { + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + } .how-it-works-description { background: #f5f5f5; padding: 16px; @@ -122,6 +126,20 @@ $grid-responsive-for-items: repeat(auto-fit, minmax(500px, 1fr)); box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.1), inset 0px 1px 2px rgba(0, 0, 0, 0.05); } + @media (max-width: $breakpoint-sm) { + width: 40px; + height: 40px; + } + } + td { + @media (max-width: $breakpoint-sm) { + padding: 8px; + } + } + } + td { + @media (max-width: $breakpoint-sm) { + padding: 8px; } } &:hover { diff --git a/templates/sponsorships/index.jsx b/templates/sponsorships/index.jsx index 5adc5d65..587f6685 100644 --- a/templates/sponsorships/index.jsx +++ b/templates/sponsorships/index.jsx @@ -46,7 +46,7 @@ const renderDiscountsRows = () => )) const SponsorshipPageTemplate = ({ data }) => ( - <Layout> + <Layout className={styles.sponsorshipMainWrapper}> <Section id="metadata" className={styles.header}> <div> <h2 className={styles.title}>{data.header.title}</h2> diff --git a/templates/sponsorships/styles.module.scss b/templates/sponsorships/styles.module.scss index acddf2e1..e07d2ad8 100644 --- a/templates/sponsorships/styles.module.scss +++ b/templates/sponsorships/styles.module.scss @@ -105,7 +105,6 @@ $grid-responsive-for-cards: repeat(auto-fit, minmax(200px, 1fr)); .itemGroup { display: flex; - flex-wrap: wrap; gap: 0.5rem; .groupItem { flex: 1; @@ -122,6 +121,10 @@ $grid-responsive-for-cards: repeat(auto-fit, minmax(200px, 1fr)); flex: auto; } } + @media (max-width: $breakpoint-md) { + flex-wrap: wrap; + margin-top: 1rem; + } } .table { @@ -140,3 +143,15 @@ $grid-responsive-for-cards: repeat(auto-fit, minmax(200px, 1fr)); .discount-section { padding: 6px 0 54px 0; } + +.sponsorship-main-wrapper { + .logo-container, + .image-wrapper { + @media (max-width: $breakpoint-sm) { + width: 320px; + img { + width: 100%; + } + } + } +}