1
1
mirror of https://github.com/primer/css.git synced 2024-12-29 17:12:27 +03:00

move the hero into css/index.md

This commit is contained in:
Shawn Allen 2018-12-20 14:53:54 -08:00
parent b4c45783bc
commit a0ac1fa912
2 changed files with 25 additions and 30 deletions

View File

@ -1,9 +1,8 @@
---
title: Docs
hero: true
---
import {Box, Flex, Heading, Text} from '@primer/components'
import {Box, Flex, Heading, Link, Text} from '@primer/components'
import {
MetaPackageBox,
OverviewTitle,
@ -12,6 +11,8 @@ import {
PrimitivesOverview,
StylesOverview
} from '../../src/landing'
import {CONTENT_MAX_WIDTH} from '../../src/constants'
import {name, version} from 'primer/package.json'
import packages from './packages.json'
# Introduction
@ -60,3 +61,25 @@ Each component or group of styles is packaged up and distributed via npm. Primer
</div>
</div>
</div>
export const Hero = () => (
<Box bg="blue.5">
<Box maxWidth={CONTENT_MAX_WIDTH} p={6} mx="auto" mb={3}>
<Box mt={4} mb={4}>
<Heading color="white" fontSize={7} fontWeight="light">
Primer CSS
</Heading>
<Text is="div" color="blue.2" fontSize={2} fontFamily="mono" mb={4}>
{name}@{version}
</Text>
<Text is="p" color="white" fontSize={4} fontWeight="light">
Resources for building websites with{' '}
<Link color="inherit" underline href="https://primer.style">
Primer
</Link>{' '}
in CSS and Sass.
</Text>
</Box>
</Box>
</Box>
)

View File

@ -1,28 +0,0 @@
import React from 'react'
import {Box, Heading, Link, Text} from '@primer/components'
import {name, version} from 'primer/package.json'
import {CONTENT_MAX_WIDTH} from './constants'
const IndexHero = () => (
<Box bg="blue.5">
<Box maxWidth={CONTENT_MAX_WIDTH} p={6} mx="auto" mb={3}>
<Box mt={4} mb={4}>
<Heading color="white" fontSize={7} fontWeight="light">
Primer CSS
</Heading>
<Text is="div" color="blue.2" fontSize={2} fontFamily="mono" mb={4}>
{name}@{version}
</Text>
<Text is="p" color="white" fontSize={4} fontWeight="light">
Resources for building websites with{' '}
<Link color="inherit" underline href="https://primer.style">
Primer
</Link>{' '}
in CSS and Sass.
</Text>
</Box>
</Box>
</Box>
)
export default IndexHero