diff --git a/src/pages/About/Title.ts b/src/pages/About/Title.ts index 3519365f31..0765918399 100644 --- a/src/pages/About/Title.ts +++ b/src/pages/About/Title.ts @@ -25,8 +25,8 @@ export const SubTitle = styled.h2<{ isDarkMode?: boolean }>` font-weight: 500; max-width: 340px; color: transparent; - font-size: 36px; - line-height: 44px; + font-size: 20px; + line-height: 28px; background: ${({ isDarkMode }) => isDarkMode @@ -35,4 +35,9 @@ export const SubTitle = styled.h2<{ isDarkMode?: boolean }>` background-clip: text; -webkit-background-clip: text; + + @media screen and (min-width: ${BREAKPOINTS.md}px) { + font-size: 36px; + line-height: 44px; + } ` diff --git a/src/pages/About/index.tsx b/src/pages/About/index.tsx index 0ebb1306bc..e28c61b4e1 100644 --- a/src/pages/About/index.tsx +++ b/src/pages/About/index.tsx @@ -30,10 +30,6 @@ const BackgroundImage = styled.img` height: calc(100vh - 72px); ` -const AboutTitle = styled(Title)` - z-index: 1; -` - const Panels = styled.div` display: flex; flex-direction: column; @@ -62,10 +58,11 @@ const Content = styled.div` justify-content: center; align-items: flex-start; padding: 0px 16px 16px 16px; - gap: 96px; + gap: 48px; @media screen and (min-width: ${BREAKPOINTS.md}px) { padding: 0px 80px 80px 80px; + gap: 96px; } ` @@ -129,14 +126,6 @@ const Thumbnail = styled.img` width: 100%; ` -const PoweredBySection = styled(Panels)` - order: 1; - - @media screen and (min-width: ${BREAKPOINTS.md}px) { - order: 0; - } -` - const SocialRow = styled.div` display: flex; gap: 24px; @@ -180,10 +169,10 @@ export default function About() { - + Uniswap is the leading on-chain marketplace for tokens and NFTs. - </AboutTitle> - <PoweredBySection> + +
Powered by the Uniswap Protocol
@@ -198,7 +187,7 @@ export default function About() { - +
{CARDS.map((card) => (