Skip to content

Commit 808c271

Browse files
nihgwunihgwu
committed
[website] update style
1 parent 2ecd47c commit 808c271

File tree

21 files changed

+168
-163
lines changed

21 files changed

+168
-163
lines changed

‎website/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"gatsby-transformer-react-docgen": "^4.1.0",
2323
"gatsby-transformer-remark": "^2.6.0",
2424
"lz-string": "^1.4.4",
25+
"minireset.css": "^0.0.5",
2526
"prop-types": "^15.7.2",
2627
"react": "^16.8.5",
2728
"react-dom": "^16.8.5",
@@ -31,7 +32,6 @@
3132
"react-overlays": "^1.2.0",
3233
"react-sortable-hoc": "^1.9.1",
3334
"rehype-react": "^3.1.0",
34-
"sanitize.css": "^10.0.0",
3535
"seamless-immutable": "^7.1.4",
3636
"slugify": "^1.3.4",
3737
"styled-components": "^4.3.2"

‎website/src/components/Anchor.js‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@ import styled from 'styled-components'
33
import slugify from 'slugify'
44

55
const Container = styled.div`
6-
margin: 20px 0 10px 0;
7-
font-size: 18px;
8-
font-weight: 500;
6+
position: relative;
97
`
108

119
const Span = styled.span`
@@ -16,14 +14,11 @@ const Span = styled.span`
1614
`
1715

1816
const Link = styled.a`
19-
float: left;
20-
padding-right: 4px;
21-
margin-left: -20px;
22-
padding-left: 6px;
17+
position: absolute;
18+
left: -1.6rem;
2319
2420
&::before {
2521
content: '#';
26-
font-size: 16px;
2722
visibility: hidden;
2823
}
2924
@@ -34,12 +29,12 @@ const Link = styled.a`
3429
}
3530
`
3631

37-
const Anchor = ({ children, title, link }) => {
32+
const Anchor = ({ tagName = 'h2', children, title, link, ...rest }) => {
3833
if (!title && !children) return null
3934

4035
const slug = link || slugify(title || children, { lower: true })
4136
return (
42-
<Container id={slug}>
37+
<Container as={tagName} id={slug} {...rest}>
4338
<Span />
4439
<Link href={`#${slug}`} aria-hidden="true" />
4540
{children || title}

‎website/src/components/CodeBlock.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import CopyButton from './CopyButton'
77
const Container = styled.div`
88
position: relative;
99
overflow: hidden;
10-
border-radius: 3px;
10+
border-radius: 0.3rem;
1111
`
1212

1313
const Scroll = styled.div`

‎website/src/components/CodeEditor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const EditorContainer = styled.div`
1717

1818
const StyledEditor = styled(Editor)`
1919
font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
20-
font-size: 14px;
20+
font-size: 1.4rem;
2121
white-space: pre;
2222
background: #222;
2323
caret-color: #fff;

‎website/src/components/CodePreview.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,21 @@ const Container = styled.div`
1212
`
1313

1414
const StyledEditor = styled(CodeEditor)`
15-
height: 300px;
16-
border-radius: 3px;
15+
height: 30rem;
16+
border-radius: 0.3rem;
1717
`
1818

1919
const PreviewContainer = styled.div`
20-
min-height: 400px;
20+
min-height: 40rem;
2121
position: relative;
2222
display: flex;
2323
flex-direction: column;
2424
align-items: center;
2525
justify-content: center;
2626
overflow: auto;
27-
padding: 10px;
28-
margin-bottom: 10px;
29-
box-shadow: 0 0 8px 0 lightsteelblue;
27+
padding: 1rem;
28+
margin-bottom: 1rem;
29+
box-shadow: 0 0 0.8rem 0 lightsteelblue;
3030
`
3131

3232
const Preview = styled.div`
@@ -40,7 +40,7 @@ const Error = styled.div`
4040
left: 0;
4141
min-width: 100%;
4242
margin: 0;
43-
padding: 10px;
43+
padding: 1rem;
4444
color: #f00;
4545
white-space: pre-wrap;
4646
`

‎website/src/components/CornerButton.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ const CornerButton = styled.button`
44
position: absolute;
55
top: 0;
66
right: 0;
7-
border-bottom-left-radius: 3px;
8-
padding: 2px 8px;
7+
border-bottom-left-radius: 0.3em;
8+
padding: 0.2em 0.8em;
99
outline: none;
1010
border: 0;
1111
opacity: 0.5;
12-
font-size: 13px;
12+
font-size: 1.4rem;
1313
color: #000;
1414
transition: opacity 0.15s;
1515

‎website/src/components/Header.js‎

Lines changed: 40 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -15,33 +15,37 @@ const Container = styled.div`
1515

1616
const Nav = styled.div`
1717
margin: 0 auto;
18-
max-width: 1000px;
19-
height: 50px;
20-
padding: 0 20px;
18+
max-width: 100rem;
19+
height: 5rem;
20+
padding: 0 2rem;
2121
display: flex;
2222
align-items: center;
2323
justify-content: space-between;
2424
`
2525

2626
const Title = styled(Link)`
2727
text-decoration: none;
28-
font-size: 24px;
29-
padding: 10px 0;
28+
font-size: 2.4rem;
29+
line-height: 1;
30+
padding: 1rem 0;
3031
&,
3132
&:hover,
3233
&:focus {
3334
color: #fff;
3435
}
3536
`
3637

38+
const Spacer = styled.div`
39+
flex: 1;
40+
`
41+
3742
const NavLink = styled(Link).attrs({
3843
partiallyActive: true,
3944
})`
4045
color: #bcc9d1;
4146
text-decoration: none;
42-
font-size: 16px;
43-
line-height: 20px;
44-
padding: 10px;
47+
padding: 1rem;
48+
line-height: 1;
4549
&:hover {
4650
color: #fff;
4751
}
@@ -59,44 +63,43 @@ const NavLink = styled(Link).attrs({
5963
const ExternalLink = NavLink.withComponent('a')
6064

6165
const LinkIcon = styled.img`
62-
width: 20px;
63-
height: 20px;
66+
width: 2rem;
67+
height: 2rem;
6468
`
6569

6670
const Version = styled(ExternalLink)`
67-
font-size: 14px;
71+
font-size: 1.4rem;
72+
padding: 1rem;
73+
margin-top: 1rem;
6874
`
6975

7076
const Header = ({ pathname }) => {
7177
return (
7278
<Container>
7379
<Nav>
74-
<div>
75-
<Title to="/">BaseTable</Title>
76-
<Version
77-
href="https://github.com/Autodesk/react-base-table/blob/master/CHANGELOG.md"
78-
target="_blank"
79-
>
80-
v{pkg.version}
81-
</Version>
82-
</div>
83-
<div>
84-
<NavLink to="/docs" pathname={pathname}>
85-
Docs
86-
</NavLink>
87-
<NavLink to="/api" pathname={pathname}>
88-
API
89-
</NavLink>
90-
<NavLink to="/examples" pathname={pathname}>
91-
Examples
92-
</NavLink>
93-
<NavLink to="/playground" pathname={pathname}>
94-
Playground
95-
</NavLink>
96-
<ExternalLink last href={pkg.repository.url} target="_blank">
97-
<LinkIcon src={linkIcon} alt="Github" />
98-
</ExternalLink>
99-
</div>
80+
<Title to="/">BaseTable</Title>
81+
<Version
82+
href="https://github.com/Autodesk/react-base-table/blob/master/CHANGELOG.md"
83+
target="_blank"
84+
>
85+
v{pkg.version}
86+
</Version>
87+
<Spacer />
88+
<NavLink to="/docs" pathname={pathname}>
89+
Docs
90+
</NavLink>
91+
<NavLink to="/api" pathname={pathname}>
92+
API
93+
</NavLink>
94+
<NavLink to="/examples" pathname={pathname}>
95+
Examples
96+
</NavLink>
97+
<NavLink to="/playground" pathname={pathname}>
98+
Playground
99+
</NavLink>
100+
<ExternalLink last href={pkg.repository.url} target="_blank">
101+
<LinkIcon src={linkIcon} alt="Github" />
102+
</ExternalLink>
100103
</Nav>
101104
</Container>
102105
)

‎website/src/components/Html.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,14 @@ const Pre = props => {
4242
const meta = parseMeta(props.children[0].props['data-meta'])
4343
const { live, ...rest } = meta
4444
const Component = live ? CodePreview : CodeBlock
45-
return <Component code={code} language={language} {...rest} />
45+
return (
46+
<Component
47+
code={code}
48+
language={language}
49+
{...rest}
50+
style={{ marginBottom: '1.2rem' }}
51+
/>
52+
)
4653
}
4754

4855
const renderAst = new rehypeReact({

‎website/src/components/Methods.js‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,31 +5,22 @@ import Html from './Html'
55
import Anchor from './Anchor'
66

77
const Method = styled.div`
8-
margin-bottom: 15px;
8+
margin-bottom: 1.6rem;
99
`
1010

11-
const Name = styled.div`
12-
font-size: 14px;
13-
font-weight: 600;
14-
margin-bottom: 5px;
15-
`
11+
const Name = styled.h4``
1612

1713
const Tag = styled.span`
18-
font-size: 12px;
19-
padding: 2px 6px;
20-
margin: 0 8px;
21-
border-radius: 4px;
14+
font-size: 0.8em;
15+
padding: 0.1em 0.4em;
16+
margin: 0 0.4em;
17+
border-radius: 0.2em;
2218
background-color: #daf0f9;
2319
color: #819099;
2420
`
2521

2622
const Block = styled(Html)`
27-
font-size: 14px;
28-
29-
p {
30-
font-size: 14px;
31-
margin: 0 0 10px;
32-
}
23+
color: #666;
3324
`
3425

3526
const getSignature = params =>

‎website/src/components/Page.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ import Sidebar from './Sidebar'
99
import '../styles/index.css'
1010
import 'react-base-table/styles.css'
1111

12-
const pagelMixin = css`
12+
const pageMixin = css`
1313
margin: 0 auto;
14-
max-width: 1000px;
14+
max-width: 100rem;
1515
`
1616

1717
const Container = styled.div`
1818
position: relative;
1919
padding: 70px 20px 20px;
20-
${props => !props.full && pagelMixin};
20+
${props => !props.full && pageMixin};
2121
`
2222

2323
const Content = styled.div`

0 commit comments

Comments
 (0)