1
1
import styled , { createGlobalStyle } from 'styled-components' ;
2
2
import { remSize , prop } from '../../theme' ;
3
3
4
- // 1. Global style for the full page background
4
+
5
5
export const GlobalStyle = createGlobalStyle `
6
6
html, body, #root {
7
7
background-color: ${ prop ( 'backgroundColor' ) } ;
@@ -15,7 +15,7 @@ export const GlobalStyle = createGlobalStyle`
15
15
}
16
16
` ;
17
17
18
- // 2. Page Content wrapper
18
+
19
19
export const AboutPageContent = styled . div `
20
20
margin: ${ remSize ( 42 ) } ${ remSize ( 295 ) } ;
21
21
background-color: ${ prop ( 'backgroundColor' ) } ;
@@ -30,7 +30,7 @@ export const AboutPageContent = styled.div`
30
30
}
31
31
` ;
32
32
33
- // 3. Intro section
33
+
34
34
export const Intro = styled . div `
35
35
background-color: ${ prop ( 'backgroundColor' ) } ;
36
36
color: ${ prop ( 'primaryTextColor' ) } ;
@@ -65,7 +65,7 @@ export const Intro = styled.div`
65
65
}
66
66
` ;
67
67
68
- // 4. Intro Headline
68
+
69
69
export const IntroHeadline = styled . div `
70
70
display: flex;
71
71
align-items: center;
@@ -95,7 +95,7 @@ export const IntroHeadline = styled.div`
95
95
}
96
96
` ;
97
97
98
- // 5. Intro Description
98
+
99
99
export const IntroDescription = styled . div `
100
100
line-height: ${ remSize ( 27 ) } ;
101
101
font-size: ${ remSize ( 16 ) } ;
@@ -109,7 +109,7 @@ export const IntroDescription = styled.div`
109
109
}
110
110
` ;
111
111
112
- // 6. Section Wrapper
112
+
113
113
export const Section = styled . div `
114
114
margin: ${ remSize ( 50 ) } 0;
115
115
background-color: ${ prop ( 'backgroundColor' ) } ;
@@ -127,7 +127,7 @@ export const Section = styled.div`
127
127
}
128
128
` ;
129
129
130
- // 7. SectionContainer
130
+
131
131
export const SectionContainer = styled . div `
132
132
display: flex;
133
133
justify-content: row;
@@ -143,7 +143,7 @@ export const SectionContainer = styled.div`
143
143
}
144
144
` ;
145
145
146
- // 8. SectionItem
146
+
147
147
export const SectionItem = styled . div `
148
148
width: 33%;
149
149
display: flex;
@@ -191,7 +191,7 @@ export const SectionItem = styled.div`
191
191
}
192
192
` ;
193
193
194
- // 9. Contact Section
194
+
195
195
export const Contact = styled . div `
196
196
margin-bottom: ${ remSize ( 50 ) } ;
197
197
background-color: ${ prop ( 'backgroundColor' ) } ;
@@ -212,7 +212,7 @@ export const Contact = styled.div`
212
212
}
213
213
` ;
214
214
215
- // 10. ContactTitle
215
+
216
216
export const ContactTitle = styled . p `
217
217
width: 50%;
218
218
color: ${ prop ( 'primaryTextColor' ) } ;
@@ -222,7 +222,7 @@ export const ContactTitle = styled.p`
222
222
}
223
223
` ;
224
224
225
- // 11. ContactHandles
225
+
226
226
export const ContactHandles = styled . p `
227
227
width: 50%;
228
228
color: ${ prop ( 'primaryTextColor' ) } ;
@@ -242,7 +242,7 @@ export const ContactHandles = styled.p`
242
242
}
243
243
` ;
244
244
245
- // 12. Footer
245
+
246
246
export const Footer = styled . div `
247
247
border-top: 0.1rem dashed ${ prop ( 'primaryTextColor' ) } ;
248
248
padding: 0 ${ remSize ( 20 ) } ${ remSize ( 70 ) } 0;
0 commit comments