Added responsiveness for medium device size (#12)

* Improve examples * Added responsivnes for medium device size * Addes some fixes after rebase Co-authored-by: Anxo Rodriguez <[email protected]>
gnosis · Jan 5, 2022 · 4e65652 · 4e65652
1 parent dae474e
commit 4e65652
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 24 deletions.
diff --git a/components/Button.tsx b/components/Button.tsx
@@ -49,7 +49,7 @@ export const ButtonWrapper = styled.div`
   gap: 1.6rem;
   width: 100%;
 
-  ${Media.mobile} {
+  ${Media.mediumDown} {
     justify-content: center;
     flex-flow: column wrap;
 

diff --git a/components/CowSlider.tsx b/components/CowSlider.tsx
@@ -21,6 +21,11 @@ export const Wrapper = styled.div`
   color: ${Color.grey};
   position: relative;
 
+  ${Media.desktopLargeDown} {
+    padding: 2.8rem;
+    border-radius: 3rem;
+  }
+
   ${Media.mobile} {
     max-height: initial;
     border-radius: 2rem;
@@ -29,7 +34,7 @@ export const Wrapper = styled.div`
 `
 
 export const CowSliderWrapper = styled.div`
-  ${Media.mobile} {
+  ${Media.mediumDown} {
     width: 100%;
   }
 `
@@ -39,6 +44,10 @@ export const CowTop = styled.div`
   display: flex;
   flex-flow: row;
 
+  ${Media.desktopLargeDown} {
+    flex-direction: column;
+  }
+
   ${Media.mobile} {
     flex-flow: column wrap;
   }
@@ -95,16 +104,17 @@ export const CowTabs = styled.div`
   flex: 1 1 50%;
   display: flex;
   font-size: 1.4rem;
-  align-items: center;
   justify-content: center;
   border: 0.1rem solid ${Color.border};
   color: ${Color.grey};
   padding: 0;
   border-radius: 4rem;
   gap: 0;
   max-height: 50px;
+  min-width: 250px;
 
-  ${Media.mobile} {
+  ${Media.desktopLargeDown} {
+    min-height: 45px;
     flex: 1 1 100%;
     border-radius: 2rem;
     order: -1;
@@ -124,7 +134,11 @@ export const CowTabItem = styled.div<{ active?: boolean, position?: number }>`
   line-height: 1;
   transition: background 0.2 ease-in-out, color 0.2 ease-in-out;
   flex: 1 1 auto;
-  height: 100%;
+  padding: 5px;
+
+  ${Media.desktopDown} {
+    font-size: 1.2rem;
+  }
 
   ${Media.mobile} {
     text-align: center;
@@ -244,7 +258,6 @@ function getNetworkConfig(networkID) {
 export default function CowSlider() {
   const [activeBatch, setActiveBatch] = useState(1);
   const { summary, description, metrics, visual, link, bars } = batches.find(b => b.id === activeBatch)
-
 
   return (
     <Wrapper>

diff --git a/components/Layout/Footer.tsx b/components/Layout/Footer.tsx
@@ -101,6 +101,11 @@ const Menu = styled.ol`
     font-size: inherit;
     color: inherit;
     text-decoration: none;
+    line-height: 1.2;
+
+    ${Media.mediumDown} {
+      font-size: 1.2rem;
+    }
 
     &:hover {
       color: ${Color.white};

diff --git a/components/Layout/Header.tsx b/components/Layout/Header.tsx
@@ -52,6 +52,10 @@ const Menu = styled.ol`
   padding: 0;
   margin: 0;
 
+  ${Media.mediumOnly} {
+    font-size: 1.4rem;
+  }
+
   ${Media.mobile} {
     display: none;
   }
@@ -77,7 +81,7 @@ const Logo = styled.div`
   background: url(${LogoImage}) no-repeat center/contain;
   cursor: pointer;
 
-  ${Media.mobile} {
+  ${Media.mediumDown} {
     width: 5.5rem;
     background-size: 14rem 100%;
     background-position: left;

diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
@@ -29,7 +29,7 @@ const Content = styled.main`
   display: flex;
   flex-flow: column wrap;
 
-  ${Media.mobile} {
+  ${Media.mediumDown} {
     margin: 10rem 0 0;
   }
 `

diff --git a/const/styles/global.ts b/const/styles/global.ts
@@ -165,18 +165,44 @@ const GlobalStyles = createGlobalStyle`
       display: none;
     }
   }
+
+  .container {
+    margin: 0 auto;
+
+    ${Media.smallUp} {
+      max-width: 720px;
+    }
+    
+    ${Media.mediumUp} {
+      max-width: 960px;
+    }
+
+    ${Media.mediumOnly} {
+      max-width: 720px;
+    }
+
+    ${Media.desktop} {
+      max-width: 1140px;
+    }
+
+    ${Media.desktopLarge} {
+      max-width: 1320px;
+    }
+  }
 `
 
 export const ExternalLink = styled.a`
   display: inline-block;
   color: ${Color.orange};
   font-size: 1.4rem;
+  white-space: nowrap;
 
   &::after {
     content: "↗";
     color: inherit;
     font-size: ${Font.sizeDefault};
     display: inline-block;
+    margin-left: 5px;
   }
 `
 

diff --git a/const/styles/pages/index.ts b/const/styles/pages/index.ts
@@ -3,10 +3,9 @@ import { transparentize } from 'polished'
 import { Color, Font, Media } from 'const/styles/variables'
 
 
-export const Section = styled.section<{ hero?: boolean, colorVariant?: string, flow?: string, fullWidth?: boolean, mobileSwitchOrder?: boolean }>`
+export const Section = styled.section<{ hero?: boolean, breakMedium?: boolean, colorVariant?: string, flow?: string, fullWidth?: boolean, mediumSwitchOrder?: boolean, mobileSwitchOrder?: boolean }>`
   display: flex;
   width: 100%;
-  max-width: ${({ fullWidth }) => fullWidth ? '100vw' : '148rem'};
   min-height: 100vh;
   flex-flow: ${({ flow }) => flow === 'column' ? 'column wrap' : 'row'};
   gap: 8rem;
@@ -29,9 +28,16 @@ export const Section = styled.section<{ hero?: boolean, colorVariant?: string, f
   }
 
   // Hero specific styling
-  ${({ hero }) => hero && `
+  ${({ hero, breakMedium }) => (hero || breakMedium) && `
     margin: 0 auto;
     min-height: calc(100vh - 8.1rem);
+    padding-top: 3.6rem;
+
+    ${Media.mediumDown} {
+      padding: 3.2rem 0;
+      min-height: initial;
+      flex-flow: column wrap;
+    }
 
     ${Media.mobile} {
       min-height: initial;
@@ -70,6 +76,22 @@ export const Section = styled.section<{ hero?: boolean, colorVariant?: string, f
     }
   `}
 
+  ${({ mediumSwitchOrder }) => mediumSwitchOrder && `
+  > div:first-child {
+    ${Media.mediumDown} {
+      order: 2;
+    }
+  }
+`}
+
+${({ mediumSwitchOrder }) => mediumSwitchOrder && `
+  > div:last-child {
+    ${Media.mediumDown} {
+      order: 1;
+    }
+  }
+`}
+
   }
 
    h1, h2, h3 {
@@ -80,11 +102,23 @@ export const Section = styled.section<{ hero?: boolean, colorVariant?: string, f
     margin: 0;
     z-index: 1;
 
-    ${Media.mobile} {
+    ${Media.mediumDown} {
       font-size: 4rem;
       text-align: center;
     }
   }
+
+  h1, h2 {
+    ${Media.desktopLargeDown} {
+      font-size: 4.8rem;
+    }
+  }
+
+  h3 {
+    ${Media.desktopDown} {
+      font-size: 3.8rem;
+    }
+  }
 `
 
 export const TopGradient = styled.div`
@@ -123,7 +157,7 @@ export const SubTitle = styled.p<{ maxWidth?: number, align?: string, lineHeight
   max-width: ${({ maxWidth }) => maxWidth && `${maxWidth}rem`};
   z-index: 1;
 
-  ${Media.mobile} {
+  ${Media.mediumDown} {
     font-size: 1.6rem;
     text-align: ${({ align }) => align ? align : "center"};
   }
@@ -140,7 +174,7 @@ export const SectionImage = styled.div<{ centerMobile?: boolean, margin?: string
   position: relative;
   z-index: 0;
 
-  ${Media.mobile} {
+  ${Media.mediumDown} {
     height: initial;
 
     ${({ centerMobile }) => centerMobile && `
@@ -217,6 +251,10 @@ export const Metrics = styled.div`
     font-size: 7.4rem;
     font-weight: ${Font.weightNormal};
 
+    ${Media.mediumOnly} {
+      font-size: 5rem;
+    }
+
     ${Media.mobile} {
       font-size: 4rem;
     }
@@ -331,6 +369,11 @@ export const ApiTool = styled.div`
   padding: 2.4rem 4.8rem;
   font-size: ${Font.sizeDefault};
 
+  ${Media.desktopOnly} {
+    border-radius: 3rem;
+    padding: 0 2.4rem 2.4rem;
+  }
+
   ${Media.mobile} {
     // max-height: initial;
     border-radius: 2rem;

diff --git a/const/styles/variables.ts b/const/styles/variables.ts
@@ -28,10 +28,10 @@ export const Media = {
   xSmallScreen: '430px',
   smallScreen: '736px',
   smallScreenUp: '737px',
-  mediumScreenSmall: '850px',
+  mediumScreenSmall: '992px',
   mediumEnd: '1024px',
-  desktopScreen: '1025px',
-  desktopScreenLarge: '1366px',
+  desktopScreen: '1200px',
+  desktopScreenLarge: '1400px',
   get tinyDown(): string {
     return `@media only screen and (max-width : ${this.tinyScreen})`
   },
@@ -41,21 +41,33 @@ export const Media = {
   get mobile(): string {
     return `@media only screen and (max-width : ${this.smallScreen})`
   },
+  get smallUp(): string {
+    return `@media only screen and (min-width : ${this.smallScreen})`
+  },
   get mediumUp(): string {
-    return `@media only screen and (min-width : ${this.smallScreenUp})`
+    return `@media only screen and (min-width : ${this.mediumScreenSmall})`
   },
   get mediumDown(): string {
     return `@media only screen and (max-width : ${this.mediumEnd})`
   },
   get mediumOnly(): string {
     return `@media only screen and (min-width : ${this.smallScreenUp}) and (max-width : ${this.mediumEnd})`
   },
+  get desktopOnly(): string {
+    return `@media only screen and (min-width : ${this.mediumEnd}) and (max-width : ${this.desktopScreen})`
+  },
+  get desktopDown(): string {
+    return `@media only screen and (max-width : ${this.desktopScreen})`
+  },
   get desktop(): string {
     return `@media only screen and (min-width : ${this.desktopScreen})`
   },
   get desktopLarge(): string {
     return `@media only screen and (min-width: ${this.desktopScreenLarge})`
   },
+  get desktopLargeDown(): string {
+    return `@media only screen and (max-width: ${this.desktopScreenLarge})`
+  },
   get tabletPortrait(): string {
     return `@media (min-device-width: ${this.smallScreenUp}) and (max-device-width: ${this.mediumEnd}) and (orientation: portrait)`
   },

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -34,7 +34,7 @@ export default function Home({ metricsData, siteConfigData }) {
       </Head>
 
       {/* Hero/1st section */}
-      <Section hero>
+      <Section className='container' hero>
         <div>
           <h1>Batch Settlement layer for
             MEV protected trades</h1>
@@ -69,12 +69,14 @@ export default function Home({ metricsData, siteConfigData }) {
       </Section>
 
       {/* 3rd section */}
-      <Section flow={'column'} fullWidth id="about">
+      <Section  flow={'column'} fullWidth id="about">
         <div>
           <SectionImage margin={'0 auto -6rem'}><img loading="lazy" src="/images/barn.jpg" alt="Meta DEX Aggregator" /></SectionImage>
+        </div>
+
+        <div className='container'>
           <h3>More than a meta DEX aggregator</h3>
           <IconList>
-
             <IconListItem icon="images/icons/equal.svg">
               <span>
                 <b>Uniform clearing prices</b>
@@ -122,7 +124,7 @@ export default function Home({ metricsData, siteConfigData }) {
       </Section >
 
       {/* 4th section */}
-      < Section flow={'column'} >
+      < Section className='container' flow={'column'} >
         <div>
           <h3>The life cycle of a CoW order</h3>
           <SubTitle align='center'>The protocol improves prices for users by batching trades, finding coincidence of wants (CoWs) <br className='hideMobile' />and tapping into all on chain liquidity - including aggregators.
@@ -135,7 +137,7 @@ export default function Home({ metricsData, siteConfigData }) {
       </Section >
 
       {/* 5th section */}
-      < Section mobileSwitchOrder id="developers" >
+      <Section className='container' breakMedium mediumSwitchOrder mobileSwitchOrder id="developers">
         <ApiWrapper>
           <ApiTool>
             <h4>Get a price quote</h4>
@@ -183,7 +185,7 @@ export default function Home({ metricsData, siteConfigData }) {
           </SectionImage >
         </div >
 
-        <div>
+        <div className='container'>
           <h3>Your guardian in the dark forest</h3>
 
           <IconList>