Skip to content

Commit ed5fbf5

Browse files
johnojohno
committed
Add header and subheader
1 parent 5140ec4 commit ed5fbf5

File tree

6 files changed

+95
-31
lines changed

6 files changed

+95
-31
lines changed

‎components/t/head.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react'
22
import Head from 'next/head'
33

4-
export default () => (
4+
export default ({ title = 'TACHYONS - Css Toolkit' }) => (
55
<Head>
6-
<title children='TACHYONS - Css Toolkit' />
6+
<title children={title} />
77
<meta charSet='utf-8' />
88
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
99
<link rel='stylesheet' href='https://unpkg.com/tachyons@4.5.5/css/tachyons.min.css'/>

‎components/t/header.js

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,52 @@
11
import React from 'react'
2+
import Link from 'next/link'
23

34
export default () => (
4-
<header className='w-100 pa3 ph5-ns bg-white'>
5+
<header className='w-100 pa3 ph5-ns bg-white bb b--black-10'>
56
<div className='db dt-ns mw9 center w-100'>
67
<div className='db dtc-ns v-mid tl w-50'>
7-
<a href='/' className='dib f5 f4-ns fw6 mt0 mb1 link black-70' title='Home'>
8-
Tachyons
9-
<div className='dib pl1'>
10-
<small className='nowrap f6 mt2 mt3-ns pr2 black-70 fw2'>v4.6.0</small>
11-
</div>
12-
</a>
8+
<Link href='/'>
9+
<a href='/' className='dib f5 f4-ns fw6 mt0 mb1 link black-70' title='Home'>
10+
Tachyons
11+
<div className='dib pl1'>
12+
<small className='nowrap f6 mt2 mt3-ns pr2 black-70 fw2'>v4.6.0</small>
13+
</div>
14+
</a>
15+
</Link>
1316
</div>
17+
1418
<nav className='db dtc-ns v-mid w-100 tl tr-ns mt2 mt0-ns'>
15-
<a title='Documentation' href='/docs/'
16-
className='f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dib'>
17-
Docs
18-
</a>
19-
<a title='Components' href='/components/'
20-
className='f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dib'>
21-
Components
22-
</a>
23-
<a title='Gallery of sites built with Tachyons' href='/gallery/'
24-
className='f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dib'>
25-
Gallery
26-
</a>
27-
<a title='Tachyons on GitHub' href='http://github.com/tachyons-css/tachyons/'
28-
className='f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dn dib-l'>
29-
GitHub
30-
</a>
19+
<HeaderLink
20+
title='Documentation'
21+
href='/docs'
22+
children='Docs'
23+
/>
24+
<HeaderLink
25+
title='Components'
26+
href='/components'
27+
children='Components'
28+
/>
29+
<HeaderLink
30+
title='Gallery of sites built with Tachyons'
31+
href='/gallery'
32+
children='Gallery'
33+
/>
34+
<HeaderLink
35+
title='Tachyons on GitHub'
36+
href='http://github.com/tachyons-css/tachyons/'
37+
children='GitHub'
38+
/>
3139
</nav>
3240
</div>
3341
</header>
3442
)
43+
44+
const HeaderLink = ({ href, title, children }) => (
45+
<Link href={href}>
46+
<a
47+
title='Tachyons on GitHub'
48+
className='f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dn dib-l'
49+
children={children}
50+
/>
51+
</Link>
52+
)

‎components/t/home/nav.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react'
2+
import Link from 'next/link'
3+
4+
export default () => (
5+
<header className='ph3 ph5-ns w-100 bg-transparent pv3 mb4 mb5-ns bb b--black-10 overflow-auto'>
6+
<div className='nowrap mw9 center'>
7+
<NavLink
8+
title='Getting Started'
9+
href='#getting-started'
10+
children='Getting Started'
11+
/>
12+
<NavLink
13+
title='Principles'
14+
href='#priniciples'
15+
children='Principles'
16+
/>
17+
<NavLink
18+
title='Features'
19+
href='#features'
20+
children='Features'
21+
/>
22+
<NavLink
23+
title='Style Guide'
24+
href='#style'
25+
children='Style Guide'
26+
/>
27+
<NavLink
28+
title='Testimonials'
29+
href='#testimonials'
30+
children='Testimonials'
31+
/>
32+
</div>
33+
</header>
34+
)
35+
36+
const NavLink = ({ href, title, children }) => (
37+
<Link href={href}>
38+
<a
39+
title='Tachyons on GitHub'
40+
className='pv1-ns f6 fw6 dim link black-70 mr2 mr3-m mr4-l dib'
41+
children={children}
42+
/>
43+
</Link>
44+
)

‎components/t/layout.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import React from 'react'
33
import Head from './head'
44
import Header from './header'
55

6-
export default ({ children }) => (
6+
export default ({ title, children }) => (
77
<div>
8-
<Head />
8+
<Head title={title} />
99
<Header />
1010
{children}
1111
</div>

‎pages/docs.js renamed to ‎pages/docs/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react'
22
import Link from 'next/link'
3-
import Layout from '../components/t/layout'
3+
import Layout from '../../components/t/layout'
44

55
export default () => (
6-
<Layout>
6+
<Layout title='TACHYONS / Docs'>
77
<Link href='/docs/typography/docs'>
88
<a children='docs' />
99
</Link>

‎pages/index.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React from 'react'
2+
import Link from 'next/link'
23
import Layout from '../components/t/layout'
4+
import Nav from '../components/t/home/nav'
35

46
export default () => (
5-
<Layout>
6-
<h1 children='Tachyons' />
7+
<Layout title='TACHYONS - Css Toolkit'>
8+
<Nav />
79
</Layout>
810
)

0 commit comments

Comments
 (0)