Skip to content

Commit f14ceeb

Browse files
joshuaellisjoshuaellis
committed
docs: improve responsive behaviour
1 parent 886683c commit f14ceeb

File tree

10 files changed

+242
-238
lines changed

10 files changed

+242
-238
lines changed

‎docs/src/components/Footer/index.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import styled from 'styled-components'
33

4-
export default function Footer() {
4+
export const Footer = () => {
55
return (
66
<Container>
77
<Cap />
@@ -49,30 +49,34 @@ const Cap = styled.div`
4949
`
5050
const Container = styled.div`
5151
position: relative;
52-
width: 100%;
53-
min-height: 300px;
54-
background: #202020;
55-
margin-top: 40px;
56-
padding-top: 30px;
57-
text-align: center;
5852
display: flex;
5953
align-items: center;
6054
justify-content: center;
55+
width: 100%;
56+
min-height: 300px;
57+
text-align: center;
58+
59+
background: ${props => props.theme.colors.grey};
60+
margin-top: ${props => props.theme.margin['40']};
61+
padding-top: ${props => props.theme.padding['25']};
6162
6263
a {
63-
color: #ccc;
64+
color: ${props => props.theme.colors.offWhite};
65+
6466
text-decoration: none;
67+
6568
&:hover {
6669
text-decoration: underline;
6770
}
6871
}
6972
7073
ul {
7174
list-style: none;
72-
margin-top: 26px;
75+
margin-top: ${props => props.theme.margin['20']};
76+
7377
li {
7478
display: inline;
75-
margin: 0 5px;
79+
margin: ${props => `0 ${props.theme.margin['5']}`};
7680
}
7781
}
7882
`

‎docs/src/components/ScrollIndicator/index.tsx‎

Lines changed: 0 additions & 114 deletions
This file was deleted.

‎docs/src/components/Splash/index.tsx‎

Lines changed: 89 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react'
22
import styled from 'styled-components'
3+
import { MEDIA_QUERIES } from 'styles/mediaQueries'
34
import { Logo } from '../Logo'
45

5-
export const Splash = () => {
6+
export const Header = () => {
67
return (
78
<Container>
89
<Column>
@@ -13,24 +14,24 @@ export const Splash = () => {
1314
primitives
1415
</Tagline>
1516
<QuickNav>
16-
<a
17+
<QuickNavAnchor
1718
target="_blank"
1819
rel="nofollow noopener noreferrer"
1920
href="https://github.com/pmndrs/react-spring/discussions">
20-
community
21-
</a>
22-
<a
21+
<span>community</span>
22+
</QuickNavAnchor>
23+
<QuickNavAnchor
2324
target="_blank"
2425
rel="nofollow noopener noreferrer"
2526
href="https://github.com/pmndrs/react-spring">
26-
source
27-
</a>
28-
<a
27+
<span>source</span>
28+
</QuickNavAnchor>
29+
<QuickNavAnchor
2930
target="_blank"
3031
rel="nofollow noopener noreferrer"
3132
href="https://twitter.com/pmndrs">
32-
twitter
33-
</a>
33+
<span>twitter</span>
34+
</QuickNavAnchor>
3435
</QuickNav>
3536
</TitleContainer>
3637
</Column>
@@ -43,19 +44,20 @@ export const Splash = () => {
4344
)
4445
}
4546

46-
const Container = styled.div`
47+
const Container = styled.header`
4748
position: relative;
48-
background: #363645;
49-
color: white;
49+
background: ${props => props.theme.colors.steel};
50+
color: ${props => props.theme.colors.white};
51+
border-radius: 0 0 20px 20px;
52+
5053
width: 100%;
5154
height: calc(100vh - 100px);
55+
5256
display: flex;
53-
flex-flow: row nowrap;
57+
flex-direction: column-reverse;
5458
align-items: space-around;
5559
justify-content: center;
56-
border-radius: 0 0 20px 20px;
57-
overflow: hidden;
58-
padding: 20px;
60+
padding: ${props => props.theme.padding['25']};
5961
6062
background-size: 40px 40px;
6163
background-image: linear-gradient(
@@ -64,60 +66,100 @@ const Container = styled.div`
6466
transparent 1px
6567
),
6668
linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
69+
70+
${MEDIA_QUERIES.tabletUp} {
71+
flex-direction: row;
72+
padding: ${props => props.theme.padding['50']};
73+
}
6774
`
6875

6976
const Column = styled.div`
70-
height: 100%;
71-
width: 400px;
72-
7377
display: flex;
7478
align-items: center;
7579
justify-content: center;
76-
@media (min-width: 900px) {
80+
81+
${MEDIA_QUERIES.tabletUp} {
82+
flex: 1;
83+
max-width: ${props => props.theme.wrappers.splash};
84+
7785
&:first-child {
7886
margin-right: 120px;
7987
}
8088
}
8189
`
8290

83-
const QuickNav = styled.div`
84-
margin-top: 18px;
85-
& a {
86-
display: inline-block;
87-
background: #ff6d6d;
88-
color: white;
89-
text-decoration: none;
90-
font-weight: 18px;
91-
line-height: 20px;
92-
padding: 10px 15px;
93-
border-radius: 18px;
94-
margin-top: 8px;
95-
margin-left: 12px;
96-
&:first-child {
97-
margin-left: 0;
98-
}
91+
const LogoContainer = styled.div`
92+
margin: 0 0 24px 0;
93+
width: 50%;
94+
user-select: none;
95+
96+
${MEDIA_QUERIES.tabletUp} {
97+
width: 100%;
98+
margin: 0;
9999
}
100100
`
101101

102-
const LogoContainer = styled.div`
103-
width: 100%;
104-
user-select: none;
102+
const QuickNav = styled.div`
103+
margin-top: 24px;
104+
`
105+
106+
const QuickNavAnchor = styled.a`
107+
display: inline-block;
108+
background: ${props => props.theme.colors.red};
109+
color: ${props => props.theme.colors.white};
110+
font-size: ${props => props.theme.fontSizes.XS};
111+
line-height: ${props => props.theme.lineHeights.XS};
112+
text-decoration: none;
113+
padding: 10px 15px;
114+
border-radius: 18px;
115+
margin-left: 16px;
116+
transition: background 400ms ease-out;
117+
118+
&:hover {
119+
background: ${props => props.theme.colors.redHover};
120+
}
121+
122+
&:first-child {
123+
margin-left: 0;
124+
}
125+
126+
& span {
127+
position: relative;
128+
bottom: 1px;
129+
}
105130
`
106131

107132
const TitleContainer = styled.div`
108-
text-align: right;
133+
text-align: center;
134+
margin-bottom: 24px;
135+
136+
${MEDIA_QUERIES.tabletUp} {
137+
margin: 0;
138+
text-align: right;
139+
}
109140
`
110141

111142
const Title = styled.h1`
112-
font-size: 65px;
113143
font-weight: 600;
114-
line-height: 65px;
115-
color: white;
144+
color: ${props => props.theme.colors.white};
145+
font-size: ${props => props.theme.fontSizes.XL};
146+
line-height: ${props => props.theme.lineHeights.XL};
147+
148+
${MEDIA_QUERIES.tabletUp} {
149+
font-size: ${props => props.theme.fontSizes.XXL};
150+
line-height: ${props => props.theme.lineHeights.XXL};
151+
}
116152
`
117153

118154
const Tagline = styled.p`
119-
font-size: 20px;
120-
line-height: 26px;
121-
font-weight: 400;
122155
margin-top: 16px;
156+
157+
color: ${props => props.theme.colors.white};
158+
font-size: ${props => props.theme.fontSizes.S};
159+
line-height: ${props => props.theme.lineHeights.S};
160+
161+
${MEDIA_QUERIES.tabletUp} {
162+
font-size: ${props => props.theme.fontSizes.M};
163+
line-height: ${props => props.theme.lineHeights.M};
164+
}
123165
`

0 commit comments

Comments
 (0)