Skip to content

Commit f8849e2

Browse files
jmgasperjmgasper
authored
Merge pull request #49 from topcoder-platform/issues-598
Issues-598: Updated Footer
2 parents 4c12fcd + c77866f commit f8849e2

File tree

7 files changed

+352
-421
lines changed

7 files changed

+352
-421
lines changed

‎design/custom.css

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎design/custom.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/scss/base/_common.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,21 @@
3131
flex: auto;
3232
}
3333

34+
.block {
35+
clear: both;
36+
overflow: hidden;
37+
}
38+
.col-span-1 {
39+
flex-grow: 1;
40+
}
41+
42+
.col-span-2 {
43+
flex-grow: 2;
44+
}
45+
.flex-grow, .flex-grow-1 {
46+
flex-grow: 1;
47+
}
48+
3449
@media screen and (max-width: 768px) {
3550
.hide-mobile {
3651
display: none !important;

‎src/scss/base/_footer.scss

Lines changed: 132 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,179 @@
1+
.FooterContainer {
2+
position: relative;
3+
}
4+
.FooterContainer::after{
5+
content: "";
6+
clear: both;
7+
display: block;
8+
}
9+
110
.Frame-footer {
2-
.Footer {
3-
background-color: $global-color_black_light;
4-
padding: 30px 80px 21px;
5-
font-size: 14px;
6-
font-weight: 400;
7-
line-height: 21px;
8-
position: relative;
9-
10-
.Container {
11-
max-width: 1280px;
12-
margin: auto;
11+
12+
.Footer {
13+
color: #e9e9e9;
14+
font-family: $global-body_fontFamily;
15+
background-color: #0c0c0c;
16+
font-size: 14px;
17+
font-weight: 400;
18+
line-height: 21px;
19+
20+
.FooterWrapper {
21+
max-width: 1310px;
22+
padding: 0 15px;
23+
margin: auto;
24+
25+
@media (max-width: 767px) {
26+
margin-left: 0;
27+
margin-right: 0;
28+
}
29+
30+
@media (max-width: 1200px) {
31+
max-width: none;
32+
}
33+
}
1334

1435
.Footer-logo {
1536
display: flex;
37+
text-align: center;
1638
justify-content: center;
17-
margin-bottom: 30px;
18-
}
39+
padding: 30px 0px;
1940

20-
.Footer-Menu-Container {
21-
margin-bottom: 39px;
22-
display: grid;
23-
grid-template-columns: repeat(6, 1fr);
24-
gap: 20px;
25-
}
2641

27-
@media (max-width: 768px) {
28-
.Footer-separator,
29-
.Footer-Menu-Container {
30-
display: none;
42+
@media (max-width: 767px) {
43+
padding-bottom: 15px;
44+
svg{
45+
width: 53px;
46+
}
3147
}
3248
}
3349

34-
.Footer-separator {
35-
height: 2px;
36-
background-color: $global-color_grey;
37-
border-radius: 1px;
38-
width: 100%;
39-
}
50+
.Footer-Menu-Container {
51+
margin-left: -10px;
52+
margin-right: -10px;
53+
align-items: normal;
54+
.Footer-Column {
55+
margin: 0 10px;
56+
a:hover {
57+
color: #D4D4D4;
58+
}
59+
&.col-span-2 {
60+
ul {
61+
column-count: 2;
62+
}
63+
}
64+
65+
@media (max-width: 767px) {
66+
flex-grow: 2;
67+
margin-top: 18px;
68+
&:first-child {
69+
margin-top: 0;
70+
}
71+
ul {
72+
column-count: 2;
73+
}
74+
}
75+
}
76+
@media (max-width: 767px) {
77+
flex-wrap: wrap;
78+
}
79+
}
4080

4181
.Footer-Menu-Title {
42-
color: white;
43-
font-size: 14px;
82+
border-bottom: 2px solid #555;
4483
font-weight: 500;
45-
line-height: 21px;
46-
margin-bottom: 1px;
84+
margin-bottom: 10px;
85+
text-transform: uppercase;
4786
}
4887

4988
.Footer-Menu-List {
50-
margin-top: 7px;
89+
5190
}
5291

5392
.Footer-Menu-List-Item {
5493
a {
55-
color: $global-grey-bg !important;
94+
color: $global-grey-bg;
5695
font-size: 14px;
5796
line-height: 21px;
97+
&:hover {
98+
color: $global-grey-bg-dark;
99+
}
58100
}
59101
}
60102

61103
.Footer-Share-Container {
62-
margin-top: 15px;
63-
a {
64-
margin-right: 5px;
65-
}
66-
67-
@media (max-width: 768px) {
68-
display: flex;
69-
justify-content: center;
70-
}
71-
}
72-
73-
.Footer-Mobile-Menu {
74-
display: flex;
75-
justify-content: center;
76-
77-
@media (min-width: 769px) {
78-
display: none;
79-
}
80-
81-
.Mobile-Menu-Item {
82-
display: flex;
83-
flex-direction: column;
84-
margin-right: 43px;
85-
86-
&:last-child {
87-
margin-right: 0;
88-
}
104+
li {
105+
width: 26px;
106+
height: 26px;
107+
line-height: 26px;
108+
border-radius: 100%;
109+
float: left;
110+
margin-left: 5px;
89111

90112
a {
91-
color: $global-grey-bg;
92-
font-size: 12px;
93-
font-weight: 500;
94-
line-height: 21px;
95-
white-space: nowrap;
113+
color: $global-grey-bg !important;
114+
text-decoration: none;
115+
&:hover {
116+
opacity: 0.75;
117+
}
96118
}
97119
}
98-
}
99120

121+
@media (max-width: 767px) {
122+
display: flex;
123+
justify-content: center;
124+
order: 1;
125+
width: 100%;
126+
}
127+
}
100128
.Footer-Copyright-Container {
101-
display: flex;
102-
justify-content: space-between;
103-
padding-top: 22px;
129+
flex-wrap: wrap;
130+
color: $global-color_grey_dark;;
131+
margin-top: 40px;
132+
border-top: 2px solid #555;
133+
padding: 20px 0px;
104134

105135
.Footer-Copyright {
106-
color: $global-color_grey_dark;
107-
font-size: 14px;
108-
line-height: 21px;
109136

110-
a {
111-
margin-left: 20px;
112-
font-size: 14px;
113-
color: $global-grey-bg;
114-
}
115-
@media (max-width: 768px) {
116-
font-size: 11px;
117-
line-height: 21px;
137+
li {
138+
display: inline;
139+
margin-right: 20px;
118140

119141
a {
142+
margin-left: 20px;
143+
font-size: 14px;
144+
color: $global-color_grey_dark;
120145
text-decoration: underline;
146+
&:hover{
147+
color:white;
148+
}
149+
}
150+
@media (max-width: 767px) {
121151
font-size: 11px;
122-
line-height: 21px;
152+
margin-right: 0;
153+
a {
154+
font-size: 11px;
155+
}
156+
&:nth-child(2) {
157+
left: 50%;
158+
position: absolute;
159+
transform: translateX(-50%);
160+
}
123161
}
124162
}
163+
164+
@media (max-width: 768px) {
165+
display: flex;
166+
justify-content: space-between;
167+
margin-top: 10px;
168+
order: 2;
169+
width: 100%;
170+
}
125171
}
126-
}
127172

128-
.Footer-Mobile {
129-
@media (min-width: 769px) {
130-
display: none;
173+
@media (max-width: 767px) {
174+
border-top: 0;
175+
margin-top: 20px;
131176
}
132177
}
133178
}
134-
}
135179
}

‎src/scss/sections/_footer.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.Footer {
2+
padding: 0px;
3+
4+
@media (max-width: 767px) {
5+
padding: 10px;
6+
}
7+
8+
}

‎src/scss/sections/_index.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
@import "navigation";
1+
@import "navigation";
2+
@import "footer";

0 commit comments

Comments
 (0)