Merge pull request #166 from ethereum/grid-gap

chore: update spacing between sections on home and /downloads pages
This commit is contained in:
Corwin Smith 2022-12-15 09:57:01 -07:00 committed by GitHub
commit 77d4a92374
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 20 additions and 13 deletions

View file

@ -2,10 +2,9 @@ import { FC } from 'react';
import { Box, Flex, Link, Stack, Text, useColorMode } from '@chakra-ui/react'; import { Box, Flex, Link, Stack, Text, useColorMode } from '@chakra-ui/react';
import NextLink from 'next/link'; import NextLink from 'next/link';
import { Search } from '../UI'; import { HeaderButtons, Search } from './';
import { MoonIcon, SunIcon } from '../UI/icons'; import { MoonIcon, SunIcon } from '../UI/icons';
import { HeaderButtons } from './';
import { MobileMenu } from '../layouts'; import { MobileMenu } from '../layouts';
export const Header: FC = () => { export const Header: FC = () => {
@ -14,7 +13,7 @@ export const Header: FC = () => {
return ( return (
<Flex <Flex
mb={4} mb={{ base: 4, lg: 8 }}
border='2px' border='2px'
borderColor='primary' borderColor='primary'
justifyContent='space-between' justifyContent='space-between'

View file

@ -8,7 +8,11 @@ interface Props {
export const SpecificVersionsSection: FC<Props> = ({ children }) => { export const SpecificVersionsSection: FC<Props> = ({ children }) => {
return ( return (
<Grid id='specificversions' templateColumns={{ base: '1fr', md: '300px 1fr' }} gap={4}> <Grid
id='specificversions'
templateColumns={{ base: '1fr', md: '300px 1fr' }}
gap={{ base: 4, lg: 8 }}
>
<GridItem w='auto'> <GridItem w='auto'>
<Box h='100%'> <Box h='100%'>
{/* TODO: replace with animated/video version */} {/* TODO: replace with animated/video version */}

View file

@ -20,7 +20,7 @@ const hoverStyles = {
export const Footer: FC = () => { export const Footer: FC = () => {
return ( return (
<Flex mt={4} direction={{ base: 'column', lg: 'row' }}> <Flex mt={{ base: 4, lg: 8 }} direction={{ base: 'column', lg: 'row' }}>
<Flex <Flex
direction={{ base: 'column', md: 'row' }} direction={{ base: 'column', md: 'row' }}
justifyContent={{ md: 'space-between' }} justifyContent={{ md: 'space-between' }}

View file

@ -299,7 +299,7 @@ const DownloadsPage: NextPage<Props> = ({ data }) => {
<PageMetadata title={METADATA.DOWNLOADS_TITLE} description={METADATA.DOWNLOADS_DESCRIPTION} /> <PageMetadata title={METADATA.DOWNLOADS_TITLE} description={METADATA.DOWNLOADS_DESCRIPTION} />
<main id='main-content'> <main id='main-content'>
<Stack spacing={4}> <Stack spacing={{ base: 4, lg: 8 }}>
<DownloadsHero <DownloadsHero
currentBuild={LATEST_RELEASES_DATA.releaseName} currentBuild={LATEST_RELEASES_DATA.releaseName}
currentBuildVersion={LATEST_RELEASES_DATA.versionNumber} currentBuildVersion={LATEST_RELEASES_DATA.versionNumber}

View file

@ -1,8 +1,6 @@
import { Box, Grid, GridItem, Link, Stack, Text } from '@chakra-ui/react'; import { Box, Grid, GridItem, Link, Stack, Text } from '@chakra-ui/react';
import type { NextPage } from 'next'; import type { NextPage } from 'next';
import { GopherHomeFront } from '../components/UI/svgs';
import { import {
HomeHero, HomeHero,
HomeSection, HomeSection,
@ -11,7 +9,7 @@ import {
WhyRunANode WhyRunANode
} from '../components/UI/homepage'; } from '../components/UI/homepage';
import { PageMetadata } from '../components/UI'; import { PageMetadata } from '../components/UI';
import { GopherHomeLinks } from '../components/UI/svgs'; import { GopherHomeFront, GopherHomeLinks } from '../components/UI/svgs';
import { import {
CONTRIBUTING_PAGE, CONTRIBUTING_PAGE,
@ -29,10 +27,13 @@ const HomePage: NextPage = ({}) => {
<PageMetadata title={METADATA.HOME_TITLE} description={METADATA.HOME_DESCRIPTION} /> <PageMetadata title={METADATA.HOME_TITLE} description={METADATA.HOME_DESCRIPTION} />
<main id='main-content'> <main id='main-content'>
<Stack spacing={4}> <Stack spacing={{ base: 4, lg: 8 }}>
<HomeHero /> <HomeHero />
<Grid templateColumns={{ base: 'repeat(1, 1fr)', lg: 'repeat(2, 1fr)' }} gap={4}> <Grid
templateColumns={{ base: 'repeat(1, 1fr)', lg: 'repeat(2, 1fr)' }}
gap={{ base: 4, lg: 8 }}
>
<GridItem rowSpan={2}> <GridItem rowSpan={2}>
{/* SECTION: What is Geth */} {/* SECTION: What is Geth */}
<HomeSection <HomeSection
@ -106,7 +107,10 @@ const HomePage: NextPage = ({}) => {
</GridItem> </GridItem>
</Grid> </Grid>
<Grid templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }} gap={4}> <Grid
templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
gap={{ base: 4, lg: 8 }}
>
<GridItem> <GridItem>
{/* SECTION: Contribute to Geth */} {/* SECTION: Contribute to Geth */}
<HomeSection <HomeSection
@ -142,7 +146,7 @@ const HomePage: NextPage = ({}) => {
</GridItem> </GridItem>
</Grid> </Grid>
<Grid templateColumns={{ base: '1fr', md: '300px 1fr' }} gap={4}> <Grid templateColumns={{ base: '1fr', md: '300px 1fr' }} gap={{ base: 4, lg: 8 }}>
<GridItem w='auto'> <GridItem w='auto'>
<Box h='100%'> <Box h='100%'>
{/* TODO: replace with animated/video version */} {/* TODO: replace with animated/video version */}