Skip to content

Commit 8b7e493

Browse files
MazizovaMazizova
authored
Merge pull request #43 from Mazizova/homepage-redesign
Redesign the Homepage
2 parents 05e295a + 6f0aff6 commit 8b7e493

7 files changed

Lines changed: 902 additions & 316 deletions

File tree

‎assets/scss/_footer.scss‎

Lines changed: 147 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -7,201 +7,184 @@
77
max-width: $container-max;
88
margin: 0 auto;
99
}
10+
}
1011

11-
.footer-top {
12-
display: grid;
13-
grid-template-columns: 1.5fr repeat(3, 1fr);
14-
gap: 3rem;
15-
padding-bottom: 2.5rem;
16-
border-bottom: 1px solid $dark-border;
17-
margin-bottom: 2rem;
12+
.footer-newsletter {
13+
display: flex;
14+
align-items: center;
15+
justify-content: space-between;
16+
gap: 1.5rem;
17+
flex-wrap: wrap;
18+
background: $dark-surface;
19+
border: 1px solid $dark-border;
20+
border-radius: 14px;
21+
padding: 1.5rem 1.75rem;
22+
margin-bottom: 2.5rem;
23+
}
1824

19-
@media (max-width: $break-lg) {
20-
grid-template-columns: 1fr 1fr;
21-
}
25+
.footer-newsletter-text {
26+
strong {
27+
display: block;
28+
font-size: 1rem;
29+
color: $off-white;
30+
margin-bottom: 0.25rem;
31+
}
2232

23-
@media (max-width: $break-sm) {
24-
grid-template-columns: 1fr;
25-
gap: 2rem;
26-
}
33+
span {
34+
font-size: 0.875rem;
35+
color: $muted;
36+
}
37+
}
38+
39+
.footer-newsletter-form {
40+
display: flex;
41+
gap: 0.625rem;
42+
flex-wrap: wrap;
43+
flex: 1;
44+
max-width: 480px;
45+
min-width: 280px;
46+
47+
input {
48+
font-family: $font-sans;
49+
font-size: 0.9375rem;
50+
color: $off-white;
51+
background: $dark-card;
52+
border: 1px solid rgba($accent, 0.35);
53+
border-radius: 8px;
54+
padding: 0.875rem 1.125rem;
55+
flex: 1;
56+
min-width: 0;
57+
58+
&::placeholder { color: darken($muted, 8%); }
59+
&:disabled { cursor: not-allowed; }
2760
}
61+
}
2862

29-
.footer-brand {
30-
.logo-text {
31-
font-size: 1.125rem;
32-
font-weight: 800;
33-
color: $white;
34-
letter-spacing: -0.02em;
35-
display: block;
36-
margin-bottom: 0.75rem;
63+
.footer-main {
64+
display: flex;
65+
justify-content: space-between;
66+
gap: 2.5rem;
67+
flex-wrap: wrap;
68+
padding-bottom: 2.5rem;
69+
border-bottom: 1px solid $dark-border;
70+
margin-bottom: 2rem;
71+
}
3772

38-
span { color: $accent; }
39-
}
73+
.footer-link-cols {
74+
display: grid;
75+
grid-template-columns: repeat(3, minmax(140px, 1fr));
76+
gap: 2.5rem;
77+
flex: 1;
78+
max-width: 560px;
4079

41-
p {
42-
font-size: 0.875rem;
43-
color: $muted;
44-
line-height: 1.6;
45-
margin: 0;
46-
max-width: 240px;
47-
}
80+
@media (max-width: $break-sm) {
81+
grid-template-columns: 1fr;
82+
gap: 1.75rem;
4883
}
84+
}
4985

50-
.footer-col {
51-
h4 {
52-
font-size: 0.75rem;
53-
font-weight: 600;
54-
letter-spacing: 0.1em;
55-
text-transform: uppercase;
56-
color: $muted;
57-
margin-bottom: 1rem;
58-
}
86+
.footer-brand {
87+
flex: 0 1 300px;
5988

60-
ul {
61-
list-style: none;
62-
margin: 0;
63-
padding: 0;
64-
display: flex;
65-
flex-direction: column;
66-
gap: 0.5rem;
67-
68-
li a {
69-
font-size: 0.875rem;
70-
color: darken($muted, 5%);
71-
text-decoration: none;
72-
transition: color 0.2s ease;
73-
74-
&:hover {
75-
color: $off-white;
76-
}
77-
}
78-
}
89+
.footer-logo {
90+
display: block;
91+
font-size: 1.0625rem;
92+
font-weight: 800;
93+
color: $white;
94+
letter-spacing: -0.02em;
95+
margin-bottom: 0.75rem;
7996
}
8097

81-
.footer-top {
82-
display: flex;
83-
align-items: center;
84-
justify-content: space-between;
85-
gap: 2rem;
86-
padding-bottom: 1.25rem;
87-
margin-bottom: 1.25rem;
88-
border-bottom: 1px solid $dark-border;
89-
flex-wrap: wrap;
98+
.footer-tagline {
99+
font-size: 0.875rem;
100+
color: $muted;
101+
line-height: 1.6;
102+
margin: 0 0 1.25rem;
103+
max-width: 260px;
90104
}
105+
}
106+
107+
.footer-social {
108+
display: flex;
109+
align-items: center;
110+
gap: 0.5rem;
91111

92-
.footer-nav {
112+
a {
93113
display: flex;
94114
align-items: center;
95-
gap: 0.25rem;
96-
flex-wrap: wrap;
97-
98-
a {
99-
font-size: 0.8125rem;
100-
font-weight: 500;
101-
color: $muted;
102-
text-decoration: none;
103-
padding: 0.35rem 0.75rem;
104-
border-radius: 6px;
105-
transition: color 0.2s ease, background 0.2s ease;
106-
107-
&:hover {
108-
color: $off-white;
109-
background: $dark-card;
110-
}
115+
justify-content: center;
116+
width: 34px;
117+
height: 34px;
118+
border-radius: 50%;
119+
color: $muted;
120+
border: 1px solid $dark-border;
121+
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
122+
123+
&:hover {
124+
color: $off-white;
125+
border-color: rgba($accent, 0.35);
126+
background: $dark-card;
111127
}
128+
}
129+
}
112130

113-
@media (max-width: $break-md) {
114-
flex-direction: column;
115-
align-items: flex-start;
116-
}
131+
.footer-col {
132+
h4 {
133+
font-size: 0.75rem;
134+
font-weight: 600;
135+
letter-spacing: 0.1em;
136+
text-transform: uppercase;
137+
color: $muted;
138+
margin-bottom: 1rem;
117139
}
118140

119-
.footer-logos {
141+
ul {
142+
list-style: none;
143+
margin: 0;
144+
padding: 0;
120145
display: flex;
121-
align-items: center;
122-
gap: 1rem;
123-
flex-wrap: wrap;
124-
125-
.footer-logos-label {
126-
font-size: 0.75rem;
127-
font-weight: 600;
128-
letter-spacing: 0.08em;
129-
text-transform: uppercase;
130-
color: $muted;
131-
white-space: nowrap;
132-
}
146+
flex-direction: column;
147+
gap: 0.625rem;
148+
}
133149

134-
.footer-logos-links {
135-
display: flex;
136-
gap: 0.5rem;
137-
flex-wrap: wrap;
150+
li a {
151+
font-size: 0.875rem;
152+
color: darken($muted, 5%);
153+
text-decoration: none;
154+
transition: color 0.2s ease;
138155

139-
a {
140-
font-size: 0.8125rem;
141-
color: $muted;
142-
text-decoration: none;
143-
border: 1px solid $dark-border;
144-
border-radius: 6px;
145-
padding: 0.25rem 0.625rem;
146-
transition: color 0.2s ease, border-color 0.2s ease;
147-
148-
&:hover {
149-
color: $off-white;
150-
border-color: rgba($accent, 0.3);
151-
}
152-
}
156+
&:hover {
157+
color: $off-white;
153158
}
154159
}
160+
}
161+
162+
.footer-bottom {
163+
display: flex;
164+
align-items: center;
165+
justify-content: space-between;
166+
flex-wrap: wrap;
167+
gap: 1rem;
168+
169+
p {
170+
font-size: 0.8125rem;
171+
color: darken($muted, 15%);
172+
margin: 0;
173+
max-width: 560px;
174+
}
155175

156-
.footer-bottom {
176+
.footer-legal {
157177
display: flex;
158-
align-items: center;
159-
justify-content: space-between;
160-
flex-wrap: wrap;
161-
gap: 1rem;
178+
gap: 1.5rem;
179+
flex-shrink: 0;
162180

163-
p {
181+
a {
164182
font-size: 0.8125rem;
165-
color: darken($muted, 15%);
166-
margin: 0;
167-
}
183+
color: darken($muted, 10%);
184+
text-decoration: none;
168185

169-
.footer-social {
170-
display: flex;
171-
align-items: center;
172-
gap: 0.5rem;
173-
174-
a {
175-
display: flex;
176-
align-items: center;
177-
justify-content: center;
178-
width: 34px;
179-
height: 34px;
180-
border-radius: 50%;
186+
&:hover {
181187
color: $muted;
182-
border: 1px solid $dark-border;
183-
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
184-
185-
&:hover {
186-
color: $off-white;
187-
border-color: rgba($accent, 0.35);
188-
background: $dark-card;
189-
}
190-
}
191-
}
192-
193-
.footer-legal {
194-
display: flex;
195-
gap: 1.5rem;
196-
197-
a {
198-
font-size: 0.8125rem;
199-
color: darken($muted, 10%);
200-
text-decoration: none;
201-
202-
&:hover {
203-
color: $muted;
204-
}
205188
}
206189
}
207190
}

0 commit comments

Comments
 (0)