Skip to content

Commit b5c31de

Browse files
AdrianoCaheteMauricioFauth
AdrianoCahete
authored and
MauricioFauth
committed
Fix typos + Fix menu on mobile + Fix footer on small mobile
1 parent 1d008a5 commit b5c31de

File tree

3 files changed

+234
-145
lines changed

3 files changed

+234
-145
lines changed

‎pmaweb/static/css/mobile.css

Lines changed: 148 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,164 @@
1-
body {
2-
overflow-x: hidden;
3-
overflow-y: visible;
4-
}
1+
@media screen and (max-width: 900px) {
2+
body {
3+
overflow-x: hidden;
4+
overflow-y: visible;
5+
}
56

6-
.hero-content,
7-
.content {
8-
width: 90vw;
9-
max-width: 90%;
10-
}
7+
.hero-content,
8+
.content {
9+
width: 90vw;
10+
max-width: 90%;
11+
}
1112

12-
.content-row .col-md-1,
13-
.content-row .col-md-2,
14-
.content-row .col-md-3,
15-
.content-row .col-md-4,
16-
.content-row .col-md-5,
17-
.content-row .col-md-6,
18-
.content-row .col-md-7,
19-
.content-row .col-md-8,
20-
.content-row .col-md-9 {
21-
width: 100%;
22-
}
13+
.content-row .col-md-1,
14+
.content-row .col-md-2,
15+
.content-row .col-md-3,
16+
.content-row .col-md-4,
17+
.content-row .col-md-5,
18+
.content-row .col-md-6,
19+
.content-row .col-md-7,
20+
.content-row .col-md-8,
21+
.content-row .col-md-9 {
22+
width: 100%;
23+
}
2324

24-
.hero-image,
25-
.hero-image svg,
26-
.nav-buttons {
27-
display: none;
28-
}
25+
.hero-image,
26+
.hero-image svg,
27+
.nav-buttons {
28+
display: none;
29+
}
2930

30-
.navbar-toggler {
31-
display: block;
32-
height: 100%;
33-
width: 5rem;
34-
background-color: #ccc; /* TODO: Move to white after add icon */
35-
border: 0;
36-
}
31+
.navbar-toggler {
32+
display: block;
33+
height: 100%;
34+
width: 5rem;
35+
background-color: #ccc; /* TODO: Move to white after add icon */
36+
border: 0;
37+
}
3738

38-
.nav-menu {
39-
flex-direction: column;
40-
position: absolute;
41-
left: 0;
42-
top: 7rem;
43-
width: 100%;
44-
height: auto;
45-
background: var(--background-page);
46-
border-bottom: 1px solid var(--color-gray-200);
47-
}
39+
.menuHandle {
40+
display: flex;
41+
justify-content: center;
42+
width: 5rem;
43+
height: 100%;
44+
position: relative;
45+
border: none;
46+
position: relative;
47+
background-color: transparent;
48+
}
4849

49-
.nav-menu.navbar-collapse:not(.show) {
50-
display: none;
51-
}
50+
.menuHandle .nav-icon {
51+
display: flex;
52+
align-self: center;
53+
width: 23px;
54+
height: 14px;
55+
position: relative;
56+
}
5257

53-
.nav-brand {
54-
margin-left: -5rem; /* Button width */
55-
}
58+
.menuHandle .line {
59+
display: block;
60+
background: var(--brand-primary);
61+
width: 100%;
62+
height: .2rem;
63+
position: absolute;
64+
left: 0;
65+
border-radius: 4px;
66+
transition:all .4s;
67+
}
5668

57-
.nav-menu .nav-item {
58-
width: 100%;
59-
height: 4rem;
60-
border-bottom: 0;
61-
border-left: 3px solid transparent;
62-
}
69+
.menuHandle .line.line-1 {
70+
top: 0
71+
}
72+
.menuHandle .line.line-2 {
73+
top: 50%
74+
}
75+
.menuHandle .line.line-3 {
76+
top: 100%
77+
}
6378

64-
.nav-item.nav-active {
65-
border-color: var(--brand-primary);
66-
}
79+
.menuHandle:hover .line-1 {
80+
transform: translateY(-1px);
81+
}
6782

68-
.content-row,
69-
.box .box-horz,
70-
.sponsor-list {
71-
flex-direction: column;
72-
}
83+
.menuHandle:hover .line-3 {
84+
transform: translateY(1px);
85+
}
7386

74-
.hero-description-actions {
75-
margin-top: 2rem;
76-
}
87+
.menuHandle.active .line-1,
88+
.menuHandle:not(.collapsed) .line-1 {
89+
transform: translateY(.6rem) translateX(0) rotate(45deg);
90+
}
91+
92+
.menuHandle.active .line-2,
93+
.menuHandle:not(.collapsed) .line-2 {
94+
opacity: 0;
95+
}
96+
97+
.menuHandle.active .line-3,
98+
.menuHandle:not(.collapsed) .line-3 {
99+
transform: translateY(-8px) translateX(0) rotate(-45deg);
100+
}
101+
102+
.nav-menu {
103+
flex-direction: column;
104+
position: absolute;
105+
left: 0;
106+
top: 7rem;
107+
width: 100%;
108+
height: auto;
109+
background: var(--background-page);
110+
border-bottom: 1px solid var(--color-gray-200);
111+
box-shadow: 0 1.4rem 2rem -1rem rgba(0, 0, 0, .8);
112+
}
113+
114+
.nav-menu.navbar-collapse:not(.show) {
115+
display: none;
116+
}
117+
118+
.nav-brand {
119+
margin-left: -5rem; /* Button width */
120+
}
121+
122+
.nav-menu .nav-item {
123+
width: 100%;
124+
height: 4rem;
125+
border-bottom: 0;
126+
border-left: 3px solid transparent;
127+
}
128+
129+
.nav-item.nav-active {
130+
border-color: var(--brand-primary);
131+
}
132+
133+
.content-row,
134+
.box .box-horz,
135+
.sponsor-list {
136+
flex-direction: column;
137+
}
138+
139+
.hero-description-actions {
140+
margin-top: 2rem;
141+
}
142+
143+
.sponsor-list a.link-external {
144+
margin-bottom: 1rem;
145+
}
146+
147+
.box .box-item,
148+
.box .box-item:not(:nth-child(3n)) {
149+
margin-right: 0;
150+
}
77151

78-
.sponsor-list a.link-external {
79-
margin-bottom: 1rem;
152+
80153
}
81154

82-
.box .box-item,
83-
.box .box-item:not(:nth-child(3n)) {
84-
margin-right: 0;
155+
@media screen and (max-width: 600px) {
156+
.card-list {
157+
width: auto;
158+
}
159+
160+
.copyright > span {
161+
display: none;
162+
}
85163
}
86164

0 commit comments

Comments
 (0)