Skip to content

Commit 9e6e2ea

Browse files
thorrelltthorrellt
committed
convert home styles to styled components
1 parent 3c74f8e commit 9e6e2ea

File tree

4 files changed

+270
-235
lines changed

4 files changed

+270
-235
lines changed

‎pages/index.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import Bracket from '@/components/decorations/Bracket';
2-
import Stick from '@/components/decorations/Stick';
31
import TwoColumn from '@/components/containers/TwoColumn/TwoColumn';
42
import CardsColumns from '@/components/containers/CardColumns/CardsColumns';
5-
import styles from '@/styles/Home.module.scss';
3+
import S from '@/styles/pages/homeStyles';
64
import {
75
$white,
86
$primaryContentColor,
@@ -26,7 +24,7 @@ export default function Home() {
2624
</RevealContentContainer>
2725

2826
<RevealContentContainer>
29-
<Bracket className={styles.bracket} />
27+
<S.Bracket />
3028
<TwoColumn
3129
title='Get involved.'
3230
content='Web Dev Path runs on volunteers. Here are the ways you can get involved with us:'
@@ -72,7 +70,7 @@ export default function Home() {
7270
</RevealContentContainer>
7371

7472
<RevealContentContainer>
75-
<Stick className={styles.stick} />
73+
<S.Stick />
7674

7775
<TwoColumn
7876
title='Nonprofit?'

‎styles/Contact.module.scss

Lines changed: 185 additions & 185 deletions
Original file line numberDiff line numberDiff line change
@@ -1,185 +1,185 @@
1-
@use './mixins' as *;
2-
@use './variables' as *;
3-
4-
.contact {
5-
background-color: $light-bg-color;
6-
height: 42rem;
7-
position: relative;
8-
margin-bottom: -10rem;
9-
@include mobile {
10-
margin-bottom: 3rem;
11-
}
12-
13-
&__formAndDecorations {
14-
@include tablet {
15-
display: flex;
16-
flex-wrap: wrap;
17-
justify-content: center;
18-
position: absolute;
19-
bottom: 48%;
20-
right: 4%;
21-
z-index: 11;
22-
}
23-
24-
@include desktop {
25-
bottom: 52%;
26-
right: 8%;
27-
}
28-
}
29-
30-
&__yellowBracket {
31-
-webkit-transform: scaleX(-1);
32-
transform: scaleX(-1);
33-
34-
@include mobile {
35-
display: none;
36-
}
37-
38-
@include tablet {
39-
position: absolute;
40-
top: 28%;
41-
right: 120%;
42-
width: 8rem;
43-
}
44-
45-
@include desktop {
46-
top: 25%;
47-
right: 120%;
48-
}
49-
50-
@include desktop-breakpoint-plus {
51-
top: 25%;
52-
right: 140%;
53-
}
54-
}
55-
56-
&__yellowColon {
57-
@include tablet {
58-
position: absolute;
59-
top: -10%;
60-
right: -5%;
61-
}
62-
63-
@include desktop {
64-
right: -15%;
65-
}
66-
}
67-
68-
&__response_message {
69-
position: absolute;
70-
right: 8%;
71-
bottom: -5%;
72-
margin: auto;
73-
74-
@include mobile {
75-
position: unset;
76-
margin-top: 1rem;
77-
padding: 0 2rem;
78-
}
79-
80-
@include small-mobile {
81-
max-width: fit-content;
82-
}
83-
}
84-
85-
@include desktop-breakpoint-minus {
86-
img {
87-
display: none;
88-
}
89-
}
90-
91-
@include desktop {
92-
height: 32rem;
93-
}
94-
95-
@include mobile {
96-
height: unset;
97-
padding-bottom: 2rem;
98-
}
99-
100-
// &__form {
101-
// padding: 2.5rem 0;
102-
// display: flex;
103-
// flex-direction: column;
104-
// align-items: center;
105-
106-
// @include desktop {
107-
// max-width: 100%;
108-
// width: 26rem;
109-
// padding: 2rem 0;
110-
// }
111-
// }
112-
113-
// &__errorMessage {
114-
// color: $error;
115-
// margin: 0.1rem 0 1rem;
116-
// font-size: 1rem;
117-
// height: 1.5rem;
118-
// font-style: italic;
119-
// align-self: start;
120-
// }
121-
122-
// &__input {
123-
// display: block;
124-
// font-size: 1.2rem;
125-
// border-radius: 1rem;
126-
// height: 2rem;
127-
// padding: 1.2rem 1.25rem;
128-
// border: 1px solid $dark-bg-color;
129-
// max-width: 100%;
130-
// width: 24rem;
131-
132-
// @include large-desktop {
133-
// font-size: 1.5rem;
134-
// height: 3rem;
135-
// border-radius: 3rem;
136-
// max-width: 25rem;
137-
// }
138-
139-
// &::placeholder {
140-
// color: $primary-content-color;
141-
// }
142-
143-
// &:focus {
144-
// outline: none;
145-
// }
146-
// }
147-
148-
// &__message {
149-
// font-family: inherit;
150-
// height: 13rem;
151-
// border-radius: 1rem;
152-
153-
// @include desktop {
154-
// border-radius: 1.5rem;
155-
// }
156-
// }
157-
158-
// &__subscribe {
159-
// display: flex;
160-
// margin-bottom: 1.25rem;
161-
// opacity: 0.6;
162-
163-
// @include desktop {
164-
// font-size: 1.5rem;
165-
// }
166-
// }
167-
168-
// &__subscribeInput {
169-
// width: 1.5rem;
170-
// margin-right: 10px;
171-
// }
172-
173-
// &__respseonErrorMessage {
174-
// position: absolute;
175-
// right: 8%;
176-
// bottom: -15%;
177-
// width: 26rem;
178-
// margin: auto;
179-
// color: $error;
180-
181-
// @include mobile {
182-
// position: unset;
183-
// }
184-
// }
185-
}
1+
// @use './mixins' as *;
2+
// @use './variables' as *;
3+
4+
// .contact {
5+
// background-color: $light-bg-color;
6+
// height: 42rem;
7+
// position: relative;
8+
// margin-bottom: -10rem;
9+
// @include mobile {
10+
// margin-bottom: 3rem;
11+
// }
12+
13+
// &__formAndDecorations {
14+
// @include tablet {
15+
// display: flex;
16+
// flex-wrap: wrap;
17+
// justify-content: center;
18+
// position: absolute;
19+
// bottom: 48%;
20+
// right: 4%;
21+
// z-index: 11;
22+
// }
23+
24+
// @include desktop {
25+
// bottom: 52%;
26+
// right: 8%;
27+
// }
28+
// }
29+
30+
// &__yellowBracket {
31+
// -webkit-transform: scaleX(-1);
32+
// transform: scaleX(-1);
33+
34+
// @include mobile {
35+
// display: none;
36+
// }
37+
38+
// @include tablet {
39+
// position: absolute;
40+
// top: 28%;
41+
// right: 120%;
42+
// width: 8rem;
43+
// }
44+
45+
// @include desktop {
46+
// top: 25%;
47+
// right: 120%;
48+
// }
49+
50+
// @include desktop-breakpoint-plus {
51+
// top: 25%;
52+
// right: 140%;
53+
// }
54+
// }
55+
56+
// &__yellowColon {
57+
// @include tablet {
58+
// position: absolute;
59+
// top: -10%;
60+
// right: -5%;
61+
// }
62+
63+
// @include desktop {
64+
// right: -15%;
65+
// }
66+
// }
67+
68+
// &__response_message {
69+
// position: absolute;
70+
// right: 8%;
71+
// bottom: -5%;
72+
// margin: auto;
73+
74+
// @include mobile {
75+
// position: unset;
76+
// margin-top: 1rem;
77+
// padding: 0 2rem;
78+
// }
79+
80+
// @include small-mobile {
81+
// max-width: fit-content;
82+
// }
83+
// }
84+
85+
// @include desktop-breakpoint-minus {
86+
// img {
87+
// display: none;
88+
// }
89+
// }
90+
91+
// @include desktop {
92+
// height: 32rem;
93+
// }
94+
95+
// @include mobile {
96+
// height: unset;
97+
// padding-bottom: 2rem;
98+
// }
99+
100+
// // &__form {
101+
// // padding: 2.5rem 0;
102+
// // display: flex;
103+
// // flex-direction: column;
104+
// // align-items: center;
105+
106+
// // @include desktop {
107+
// // max-width: 100%;
108+
// // width: 26rem;
109+
// // padding: 2rem 0;
110+
// // }
111+
// // }
112+
113+
// // &__errorMessage {
114+
// // color: $error;
115+
// // margin: 0.1rem 0 1rem;
116+
// // font-size: 1rem;
117+
// // height: 1.5rem;
118+
// // font-style: italic;
119+
// // align-self: start;
120+
// // }
121+
122+
// // &__input {
123+
// // display: block;
124+
// // font-size: 1.2rem;
125+
// // border-radius: 1rem;
126+
// // height: 2rem;
127+
// // padding: 1.2rem 1.25rem;
128+
// // border: 1px solid $dark-bg-color;
129+
// // max-width: 100%;
130+
// // width: 24rem;
131+
132+
// // @include large-desktop {
133+
// // font-size: 1.5rem;
134+
// // height: 3rem;
135+
// // border-radius: 3rem;
136+
// // max-width: 25rem;
137+
// // }
138+
139+
// // &::placeholder {
140+
// // color: $primary-content-color;
141+
// // }
142+
143+
// // &:focus {
144+
// // outline: none;
145+
// // }
146+
// // }
147+
148+
// // &__message {
149+
// // font-family: inherit;
150+
// // height: 13rem;
151+
// // border-radius: 1rem;
152+
153+
// // @include desktop {
154+
// // border-radius: 1.5rem;
155+
// // }
156+
// // }
157+
158+
// // &__subscribe {
159+
// // display: flex;
160+
// // margin-bottom: 1.25rem;
161+
// // opacity: 0.6;
162+
163+
// // @include desktop {
164+
// // font-size: 1.5rem;
165+
// // }
166+
// // }
167+
168+
// // &__subscribeInput {
169+
// // width: 1.5rem;
170+
// // margin-right: 10px;
171+
// // }
172+
173+
// // &__respseonErrorMessage {
174+
// // position: absolute;
175+
// // right: 8%;
176+
// // bottom: -15%;
177+
// // width: 26rem;
178+
// // margin: auto;
179+
// // color: $error;
180+
181+
// // @include mobile {
182+
// // position: unset;
183+
// // }
184+
// // }
185+
// }

0 commit comments

Comments
 (0)