From 4e65652aebb5ab71b2c887d0b5ce71c70de98335 Mon Sep 17 00:00:00 2001 From: Nenad Vracar <34926005+nenadV91@users.noreply.github.com> Date: Wed, 5 Jan 2022 23:42:21 +0100 Subject: [PATCH] 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 --- components/Button.tsx | 2 +- components/CowSlider.tsx | 23 +++++++++++---- components/Layout/Footer.tsx | 5 ++++ components/Layout/Header.tsx | 6 +++- components/Layout/index.tsx | 2 +- const/styles/global.ts | 26 +++++++++++++++++ const/styles/pages/index.ts | 55 ++++++++++++++++++++++++++++++++---- const/styles/variables.ts | 20 ++++++++++--- pages/index.tsx | 14 +++++---- 9 files changed, 129 insertions(+), 24 deletions(-) diff --git a/components/Button.tsx b/components/Button.tsx index 239149362..07cdcd3b4 100644 --- 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 index e81e1420a..67fa9d6e0 100644 --- 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,7 +104,6 @@ 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}; @@ -103,8 +111,10 @@ export const CowTabs = styled.div` 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 ( diff --git a/components/Layout/Footer.tsx b/components/Layout/Footer.tsx index aa8b62054..2fcca3272 100644 --- 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 index d214de0f2..dc652b683 100644 --- 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 index 124307446..52ea00e7f 100644 --- 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 index 82bb67472..6aa6cd886 100644 --- 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 index 79b3bcad7..5d8657cce 100644 --- 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 index fdb7221bf..3e5616806 100644 --- 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,8 +41,11 @@ 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})` @@ -50,12 +53,21 @@ export const Media = { 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 index a735fd647..5fda3bc2e 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -34,7 +34,7 @@ export default function Home({ metricsData, siteConfigData }) { {/* Hero/1st section */} -
+

Batch Settlement layer for MEV protected trades

@@ -69,12 +69,14 @@ export default function Home({ metricsData, siteConfigData }) {
{/* 3rd section */} -
+
Meta DEX Aggregator +
+ +

More than a meta DEX aggregator

- Uniform clearing prices @@ -122,7 +124,7 @@ export default function Home({ metricsData, siteConfigData }) {
{/* 4th section */} - < Section flow={'column'} > + < Section className='container' flow={'column'} >

The life cycle of a CoW order

The protocol improves prices for users by batching trades, finding coincidence of wants (CoWs)
and tapping into all on chain liquidity - including aggregators. @@ -135,7 +137,7 @@ export default function Home({ metricsData, siteConfigData }) {
{/* 5th section */} - < Section mobileSwitchOrder id="developers" > +

Get a price quote

@@ -183,7 +185,7 @@ export default function Home({ metricsData, siteConfigData }) { -
+

Your guardian in the dark forest