Skip to content

Commit fb7ac6b

Browse files
sarmsteadsarmstead
committed
feat(footer): add responsive footer styles
1 parent 05e0b05 commit fb7ac6b

File tree

2 files changed

+210
-2
lines changed

2 files changed

+210
-2
lines changed

‎src/css/app.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
@import './layout/dropdown.css';
1818
@import './layout/container.css';
1919
/* @import './layout/header.css'; */
20-
/* @import './layout/footer.css'; */
20+
@import './layout/footer.css';
2121

2222
/* Pages */
2323
@import './pages/post.css';

‎src/css/layout/footer.css‎

Lines changed: 209 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,209 @@
1-
/* Add footer styles here */
1+
.footer {
2+
background-color: var(--color-lightblue);
3+
width: 100%;
4+
5+
.footer__inner {
6+
display: flex;
7+
flex-direction: column;
8+
margin: auto;
9+
max-width: var(--layout-inner-max-width);
10+
padding: 40px;
11+
}
12+
13+
.footer__top {
14+
border-bottom: 2px solid #dce9fa;
15+
display: grid;
16+
grid-template-columns: 1fr;
17+
margin-bottom: 25px;
18+
padding-bottom: 36px;
19+
}
20+
21+
.footer__logo {
22+
justify-self: center;
23+
max-width: 245px;
24+
width: 100%;
25+
}
26+
27+
.footer__links {
28+
font-family: 'Rubik', sans-serif;
29+
font-size: 1rem;
30+
line-height: 1.125rem;
31+
margin-bottom: 36px;
32+
33+
ul {
34+
align-items: center;
35+
display: flex;
36+
flex-direction: column;
37+
list-style: none;
38+
margin: 0;
39+
padding: 0;
40+
}
41+
42+
li {
43+
align-items: center;
44+
display: flex;
45+
min-height: 44px;
46+
}
47+
48+
a {
49+
box-shadow: none;
50+
}
51+
52+
a:hover {
53+
box-shadow: inset 0 -2px 0 var(--color-red);
54+
}
55+
}
56+
57+
.footer__bottom {
58+
display: grid;
59+
gap: 48px;
60+
grid-template-columns: 1fr;
61+
}
62+
63+
.footer__form {
64+
align-items: center;
65+
display: flex;
66+
flex-direction: column;
67+
68+
span[data-members-error],
69+
span[data-members-success] {
70+
display: none;
71+
font-size: 0.875rem;
72+
font-weight: 700;
73+
line-height: 1rem;
74+
padding: 16px 0;
75+
}
76+
}
77+
78+
.error span[data-members-error] {
79+
color: var(--color-darkred);
80+
display: block;
81+
}
82+
83+
.success span[data-members-success] {
84+
color: green;
85+
display: block;
86+
}
87+
88+
.footer__form__row {
89+
display: grid;
90+
gap: 12px;
91+
grid-template-columns: 1fr;
92+
justify-content: center;
93+
width: 100%;
94+
95+
input {
96+
border: 1px solid #dce9fa;
97+
border-radius: 8px;
98+
color: var(--color-navy);
99+
min-height: 50px;
100+
font-size: 1rem;
101+
padding: 12px 20px;
102+
width: 100%;
103+
}
104+
105+
input::placeholder {
106+
color: rgba(160, 168, 184, 1);
107+
}
108+
109+
.kg-button-card {
110+
width: 100%;
111+
}
112+
}
113+
114+
.footer__bottom__socials {
115+
align-items: center;
116+
display: flex;
117+
flex-direction: column;
118+
gap: 16px;
119+
}
120+
121+
.footer__bottom__socials__links {
122+
align-items: center;
123+
display: flex;
124+
flex-wrap: wrap;
125+
gap: 14px;
126+
justify-content: center;
127+
128+
figcaption {
129+
display: none;
130+
}
131+
132+
a {
133+
box-shadow: none;
134+
}
135+
136+
figure.kg-image-card {
137+
margin: 0;
138+
139+
a {
140+
align-items: center;
141+
display: flex;
142+
height: 24px;
143+
width: 24px;
144+
}
145+
}
146+
}
147+
148+
@media (min-width: 834px) {
149+
.footer__top {
150+
align-items: center;
151+
grid-template-columns: repeat(2, 1fr);
152+
padding-bottom: 36px;
153+
154+
.kg-button-card {
155+
justify-self: end;
156+
}
157+
}
158+
159+
.footer__logo {
160+
justify-self: start;
161+
margin: 0 0 -14px -10px;
162+
}
163+
164+
.footer__bottom {
165+
gap: 36px;
166+
grid-template-columns: 1fr max-content;
167+
}
168+
169+
.footer__form {
170+
align-items: flex-start;
171+
}
172+
173+
.footer__form__row {
174+
grid-template-columns: 1fr max-content;
175+
}
176+
177+
.footer__links {
178+
ul {
179+
column-gap: 24px;
180+
flex-direction: row;
181+
flex-wrap: wrap;
182+
justify-content: center;
183+
row-gap: 8px;
184+
}
185+
}
186+
}
187+
188+
@media (min-width: 1440px) {
189+
.footer__bottom {
190+
gap: 0;
191+
grid-template-columns: repeat(2, 1fr);
192+
}
193+
194+
.footer__bottom__socials {
195+
justify-self: end;
196+
}
197+
198+
.footer__form__row {
199+
grid-template-columns: 280px max-content;
200+
justify-content: start;
201+
}
202+
203+
.footer__links {
204+
ul {
205+
justify-content: end;
206+
}
207+
}
208+
}
209+
}

0 commit comments

Comments
 (0)