fix: dark mode body colors (#61)
* chore: update textStyles * markdown text color styles Co-authored-by: Corwin Smith <cssmittys@gmail.com>
This commit is contained in:
parent
42c0b33f1d
commit
d504f047ab
|
@ -54,11 +54,12 @@ export const DownloadsHero: FC<DownloadsHero> = ({
|
||||||
fontFamily='"JetBrains Mono", monospace'
|
fontFamily='"JetBrains Mono", monospace'
|
||||||
lineHeight='21px'
|
lineHeight='21px'
|
||||||
mb={{ base: '4 !important', md: '8 !important' }}
|
mb={{ base: '4 !important', md: '8 !important' }}
|
||||||
|
color='body'
|
||||||
>
|
>
|
||||||
{currentBuild}
|
{currentBuild}
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<Text mb={4}>
|
<Text mb={4} color='body'>
|
||||||
You can download the latest 64-bit stable release of Geth for our primary platforms
|
You can download the latest 64-bit stable release of Geth for our primary platforms
|
||||||
below. Packages for all supported platforms, as well as develop builds, can be found
|
below. Packages for all supported platforms, as well as develop builds, can be found
|
||||||
further down the page. If you're looking to install Geth and/or associated tools
|
further down the page. If you're looking to install Geth and/or associated tools
|
||||||
|
|
|
@ -54,7 +54,7 @@ export const HomeHero: FC = () => {
|
||||||
</Button>
|
</Button>
|
||||||
</NextLink>
|
</NextLink>
|
||||||
|
|
||||||
<Text mt={1} fontSize='13px' fontFamily='"Inter", sans-serif' alignSelf='center'>
|
<Text mt={1} textStyle='hero-text-small'>
|
||||||
Read our documentation
|
Read our documentation
|
||||||
</Text>
|
</Text>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|
|
@ -26,10 +26,7 @@ import {
|
||||||
const HomePage: NextPage = ({}) => {
|
const HomePage: NextPage = ({}) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<PageMetadata
|
<PageMetadata title={METADATA.HOME_TITLE} description={METADATA.HOME_DESCRIPTION} />
|
||||||
title={METADATA.HOME_TITLE}
|
|
||||||
description={METADATA.HOME_DESCRIPTION}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<Stack spacing={4}>
|
<Stack spacing={4}>
|
||||||
|
@ -45,7 +42,7 @@ const HomePage: NextPage = ({}) => {
|
||||||
Svg={GopherHomeFront}
|
Svg={GopherHomeFront}
|
||||||
ariaLabel='Gopher greeting'
|
ariaLabel='Gopher greeting'
|
||||||
>
|
>
|
||||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
<Text textStyle='quick-link-text'>
|
||||||
Geth (go-ethereum) is a{' '}
|
Geth (go-ethereum) is a{' '}
|
||||||
<Link href={GO_URL} isExternal variant='light'>
|
<Link href={GO_URL} isExternal variant='light'>
|
||||||
Go
|
Go
|
||||||
|
@ -57,13 +54,13 @@ const HomePage: NextPage = ({}) => {
|
||||||
- a gateway into the decentralized web.
|
- a gateway into the decentralized web.
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
<Text textStyle='quick-link-text'>
|
||||||
Geth has been a core part of Etheruem since the very beginning. Geth was one of
|
Geth has been a core part of Etheruem since the very beginning. Geth was one of
|
||||||
the original Ethereum implementations making it the most battle-hardened and
|
the original Ethereum implementations making it the most battle-hardened and
|
||||||
tested client.
|
tested client.
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
<Text textStyle='quick-link-text'>
|
||||||
Geth is an Ethereum{' '}
|
Geth is an Ethereum{' '}
|
||||||
<Text as='span' fontStyle='italic'>
|
<Text as='span' fontStyle='italic'>
|
||||||
execution client
|
execution client
|
||||||
|
@ -76,7 +73,7 @@ const HomePage: NextPage = ({}) => {
|
||||||
.
|
.
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
<Text textStyle='quick-link-text'>
|
||||||
Running Geth alongside a consensus client turns a computer into an Ethereum node.
|
Running Geth alongside a consensus client turns a computer into an Ethereum node.
|
||||||
</Text>
|
</Text>
|
||||||
</HomeSection>
|
</HomeSection>
|
||||||
|
@ -85,7 +82,7 @@ const HomePage: NextPage = ({}) => {
|
||||||
<GridItem>
|
<GridItem>
|
||||||
{/* SECTION: What is Ethereum (has different styles than the other sections so it uses a different component) */}
|
{/* SECTION: What is Ethereum (has different styles than the other sections so it uses a different component) */}
|
||||||
<WhatIsEthereum>
|
<WhatIsEthereum>
|
||||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
<Text textStyle='quick-link-text'>
|
||||||
Ethereum is a technology for building apps and organizations, holding assets,
|
Ethereum is a technology for building apps and organizations, holding assets,
|
||||||
transacting and communicating without being controlled by a central authority. It
|
transacting and communicating without being controlled by a central authority. It
|
||||||
is the base of a new, decentralized internet.
|
is the base of a new, decentralized internet.
|
||||||
|
@ -96,13 +93,13 @@ const HomePage: NextPage = ({}) => {
|
||||||
<GridItem>
|
<GridItem>
|
||||||
{/* SECTION: Why run a node (has different styles than the other sections so it uses a different component) */}
|
{/* SECTION: Why run a node (has different styles than the other sections so it uses a different component) */}
|
||||||
<WhyRunANode>
|
<WhyRunANode>
|
||||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
<Text textStyle='quick-link-text'>
|
||||||
Running your own node enables you to use Ethereum in a truly private,
|
Running your own node enables you to use Ethereum in a truly private,
|
||||||
self-sufficient and trustless manner. You don't need to trust information you
|
self-sufficient and trustless manner. You don't need to trust information you
|
||||||
receive because you can verify the data yourself using your Geth instance.
|
receive because you can verify the data yourself using your Geth instance.
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px' fontWeight={700}>
|
<Text textStyle='quick-link-text' fontWeight={700}>
|
||||||
“Don't trust, verify”
|
“Don't trust, verify”
|
||||||
</Text>
|
</Text>
|
||||||
</WhyRunANode>
|
</WhyRunANode>
|
||||||
|
@ -117,7 +114,7 @@ const HomePage: NextPage = ({}) => {
|
||||||
linkLabel='Read our contribution guidelines'
|
linkLabel='Read our contribution guidelines'
|
||||||
buttonHref={CONTRIBUTING_PAGE}
|
buttonHref={CONTRIBUTING_PAGE}
|
||||||
>
|
>
|
||||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
<Text textStyle='quick-link-text'>
|
||||||
We welcome contributions from anyone on the internet, and are grateful for even
|
We welcome contributions from anyone on the internet, and are grateful for even
|
||||||
the smallest of fixes! If you'd like to contribute to the Geth source code,
|
the smallest of fixes! If you'd like to contribute to the Geth source code,
|
||||||
please fork the{' '}
|
please fork the{' '}
|
||||||
|
@ -137,7 +134,7 @@ const HomePage: NextPage = ({}) => {
|
||||||
linkLabel='Read more about the Ethereum Foundation'
|
linkLabel='Read more about the Ethereum Foundation'
|
||||||
buttonHref={ETHEREUM_FOUNDATION_URL}
|
buttonHref={ETHEREUM_FOUNDATION_URL}
|
||||||
>
|
>
|
||||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
<Text textStyle='quick-link-text'>
|
||||||
The Geth team comprises 10 developers distributed across the world. The Geth team
|
The Geth team comprises 10 developers distributed across the world. The Geth team
|
||||||
is funded exclusively by The Ethereum Foundation.
|
is funded exclusively by The Ethereum Foundation.
|
||||||
</Text>
|
</Text>
|
||||||
|
|
|
@ -20,49 +20,57 @@ export const textStyles = {
|
||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
fontSize: { base: '1.875rem', md: '2.125rem' },
|
fontSize: { base: '1.875rem', md: '2.125rem' },
|
||||||
letterSpacing: '0.04em',
|
letterSpacing: '0.04em',
|
||||||
lineHeight: 'normal'
|
lineHeight: 'normal',
|
||||||
|
color: 'body'
|
||||||
},
|
},
|
||||||
header2: {
|
header2: {
|
||||||
fontFamily: 'heading',
|
fontFamily: 'heading',
|
||||||
fontSize: { base: '1.5rem', md: '1.75rem' },
|
fontSize: { base: '1.5rem', md: '1.75rem' },
|
||||||
letterSpacing: '0.04em',
|
letterSpacing: '0.04em',
|
||||||
lineHeight: 'normal'
|
lineHeight: 'normal',
|
||||||
|
color: 'body'
|
||||||
},
|
},
|
||||||
header3: {
|
header3: {
|
||||||
fontFamily: 'heading',
|
fontFamily: 'heading',
|
||||||
fontSize: { base: '1.25rem', md: '1.375rem' },
|
fontSize: { base: '1.25rem', md: '1.375rem' },
|
||||||
letterSpacing: '0.04em',
|
letterSpacing: '0.04em',
|
||||||
lineHeight: 'normal'
|
lineHeight: 'normal',
|
||||||
|
color: 'body'
|
||||||
},
|
},
|
||||||
header4: {
|
header4: {
|
||||||
fontFamily: 'heading',
|
fontFamily: 'heading',
|
||||||
fontSize: '1.125rem',
|
fontSize: '1.125rem',
|
||||||
letterSpacing: '0.04em',
|
letterSpacing: '0.04em',
|
||||||
lineHeight: 'normal'
|
lineHeight: 'normal',
|
||||||
|
color: 'body'
|
||||||
},
|
},
|
||||||
header5: {
|
header5: {
|
||||||
fontFamily: 'heading',
|
fontFamily: 'heading',
|
||||||
fontSize: '1rem',
|
fontSize: '1rem',
|
||||||
letterSpacing: '0.02em',
|
letterSpacing: '0.02em',
|
||||||
lineHeight: 'normal'
|
lineHeight: 'normal',
|
||||||
|
color: 'body'
|
||||||
},
|
},
|
||||||
header6: {
|
header6: {
|
||||||
fontFamily: 'heading',
|
fontFamily: 'heading',
|
||||||
fontSize: '0.875rem',
|
fontSize: '0.875rem',
|
||||||
letterSpacing: '0.02em',
|
letterSpacing: '0.02em',
|
||||||
lineHeight: 'normal'
|
lineHeight: 'normal',
|
||||||
|
color: 'body'
|
||||||
},
|
},
|
||||||
'header-font': {
|
'header-font': {
|
||||||
fontFamily: 'heading',
|
fontFamily: 'heading',
|
||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
fontSize: { base: '0.86rem', sm: '1rem' }
|
fontSize: { base: '0.86rem', sm: '1rem' },
|
||||||
|
color: 'body'
|
||||||
},
|
},
|
||||||
'homepage-description': {
|
'homepage-description': {
|
||||||
fontFamily: 'heading',
|
fontFamily: 'heading',
|
||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
lineHeight: '21px',
|
lineHeight: '21px',
|
||||||
letterSpacing: '0.05em',
|
letterSpacing: '0.05em',
|
||||||
textAlign: { base: 'center', md: 'left' }
|
textAlign: { base: 'center', md: 'left' },
|
||||||
|
color: 'body'
|
||||||
},
|
},
|
||||||
'homepage-primary-label': {
|
'homepage-primary-label': {
|
||||||
fontFamily: 'heading',
|
fontFamily: 'heading',
|
||||||
|
@ -79,7 +87,8 @@ export const textStyles = {
|
||||||
},
|
},
|
||||||
'quick-link-text': {
|
'quick-link-text': {
|
||||||
fontFamily: 'body',
|
fontFamily: 'body',
|
||||||
lineHeight: '26px'
|
lineHeight: '26px',
|
||||||
|
color: 'body'
|
||||||
},
|
},
|
||||||
'quick-link-label': {
|
'quick-link-label': {
|
||||||
fontFamily: 'heading',
|
fontFamily: 'heading',
|
||||||
|
@ -93,7 +102,8 @@ export const textStyles = {
|
||||||
},
|
},
|
||||||
'hero-text-small': {
|
'hero-text-small': {
|
||||||
fontSize: '13px',
|
fontSize: '13px',
|
||||||
fontFamily: 'body'
|
fontFamily: 'body',
|
||||||
|
color: 'body'
|
||||||
},
|
},
|
||||||
'footer-link-label': {
|
'footer-link-label': {
|
||||||
fontFamily: '"JetBrains Mono", monospace',
|
fontFamily: '"JetBrains Mono", monospace',
|
||||||
|
@ -106,7 +116,8 @@ export const textStyles = {
|
||||||
fontFamily: 'body',
|
fontFamily: 'body',
|
||||||
lineHeight: '22px',
|
lineHeight: '22px',
|
||||||
fontWeight: 400,
|
fontWeight: 400,
|
||||||
fontSize: '12px'
|
fontSize: '12px',
|
||||||
|
color: 'body'
|
||||||
},
|
},
|
||||||
'downloads-button-label': {
|
'downloads-button-label': {
|
||||||
fontFamily: 'heading',
|
fontFamily: 'heading',
|
||||||
|
|
Loading…
Reference in New Issue